WordPressのAMP対応を本気で考えてみた | Webクリエイターな備忘録

このサイトはフリーランスでWeb制作をするクリエイターの備忘録なメモサイトです。 Webサイトを作る際に気になった事やjavaScriptなどのライブラリの事などWebサイト制作に関する事、また気になるでき事、日常の事などを気ままに勝手に書き綴っています。

WordPressのAMP対応を本気で考えてみた

WordpressのAMP対応を本気で考えてみた

はじめに

みなさんのサイトは「AMP対応」してますか!!

当サイトは、2017年末までAMP設定していましたが「余りのAMPエラー」に対応しきれず、止めてしまいました。しかし、当サイトの「AMP」対応を、もう一度本気で考え対応してみたいと思います。

AMP対応は、去年の年末までWordpressの「AMP for WordPressプラグイン」をインストールだけの簡易対応をしていました。
しかしサーチコンソールで「AMPエラー」が頻発した為、その対応に疲弊しプラグインをアンインストールして、2018年初めからAMP対応を諦めてしまいました。

AMPとは

AMP(Accelerated Mobile Pages)とは、2015年10月にGoogleとTwitterが共同して「モバイルユーザーのユーザー体験向上」を目的にオープンソースプロジェクトとして立ち上げました。2016年10月に通常の検索結果にもAMPページが表示されるようになり、現在ではAMPに対応したWebサイトが増えてきています。

AMPページは2016年当初、記事ページのみをサポートしていましたが、2017年ごろからAMPの仕様が変更となりショッピングサイトやポータルサイトで導入されるようになりました。現在ではニュースサイトや各種情報系メディアサイト(食べログなど)でも採用されています。

今現在Webサイトが、AMP対応していなくてもGoogleの検索順位に影響はないようです。

しかし最近Google検索していると、「AMP対応済み」ページ(AMPマーク付き)が、検索結果の上位に表示されていることが多いと思いませんか。Googleは検索順位に影響しないと言ってますが、いずれは対応が必要な要素になるかもしれませんね。

WordPressへのAMP対応方法

通常Wordpressで1番簡単なAMP対応方法は、各種の「AMP対応プラグイン」をインストールして対応するのが簡単ですぐにできます。
しかし、ネットで確認してみると、各種の「AMP対応プラグイン」をインストールするだけではAMP対応が不十分であると、多くのサイトで記載されています。

では、どのようにしてAMP対応するのが良いのでしょうか。

WordPressのAMP対応方法(当サイト編)

いろいろなサイトに掲載されている情報をもとに、当サイトを最低限のプラグインを使用してAMP対応を考えてみました。基本となるプラグインは、「AMP for WordPress」プラグインとなりますので、ご注意ください!

今回のAMP対応方法の多くは「ねんでぶ」氏が公開されているサイトから、当サイトに合う物を選んだ記述が中心となっています。

以下が、当サイトをAMP対応するために選んだ記述になります。以下の記述は「function.php」に追記していきます。

AMPページの投稿者の名前を変更する

前半部分でAMPページの投稿者名を変更し、後半の「schema.org」部分で構造化データの投稿者名を変更している。
投稿者名は、「hoge」部分に変更したい名前を記述して変更する

function nendebcom_amp_modify_author_data( $data ) {

$data['post_author']->display_name = 'hoge';
return $data;
}
add_filter( 'amp_post_template_data', 'nendebcom_amp_modify_author_data' );

/* schema.org */
function nendebcom_amp_modify_author_jsonld( $metadata, $post ) {

$metadata['author']['name'] = 'hoge';
return $metadata;
}
add_filter( 'amp_post_template_metadata', 'nendebcom_amp_modify_author_jsonld', 10, 2 );

AMPページのサイトアイコンを変更する

前半部分でAMPページのサイトアイコンを変更し、後半の「schema.org」部分で構造化データのサイトアイコンを変更している。
サイトアイコンは小さい(32x32ピクセル)ので、ファビコン画像などを設定するといい感じになると思います。

function nendebcom_amp_modify_site_icon_data( $data ) {

$data['site_icon_url'] = 'サイトアイコン画像のURL';
return $data;
}
add_filter( 'amp_post_template_data', 'nendebcom_amp_modify_site_icon_data' );

/*
* サイトアイコン変更 JSON-LD
*/
function nendebcom_amp_modify_site_icon_jsonld( $metadata, $post ) {

$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => 'サイトアイコン画像のURL' ,
'height' => 32,
'width' => 32,
);
return $metadata;
}
add_filter( 'amp_post_template_metadata', 'nendebcom_amp_modify_site_icon_jsonld', 10, 2 );

<p>タグ<pre>タグの制御

WordPressのコンテンツ部分で自動で付いてしまうHTMLタグの<p>タグ、<pre>タグをAMP表示時のみ削除するように制限する。

function nendebcom_filter_amp_tags( $content ){

if ( function_exists( 'is_amp_endpoint' ) ) {
//Are we currently on an AMP URL?
if( is_amp_endpoint() ){
$content = str_replace( 'pre', 'p', $content );
}
}
return $content;
}
add_filter( 'the_content', 'nendebcom_filter_amp_tags', 999 );

GoogleAnalyticsをAMPページで使用する

GoogleAnalyticsをAMPページで使用する為の記述
‘account’ => “UA-XXXXXXXX-Y”の「UA-XXXXXXXX-Y」部分に自分のコードに置き換える。

function nendebcom_amp_add_custom_analytics( $analytics ) {

if ( ! is_array( $analytics ) ) {
$analytics = array();
}

// https://developers.google.com/analytics/devguides/collection/amp-analytics/
$analytics['xyz-googleanalytics'] = array(
'type' => 'googleanalytics',
'attributes' => array(
// 'data-credentials' => 'include',
),
'config_data' => array(
'vars' => array(
'account' => "UA-XXXXXXXX-Y"
),
'triggers' => array(
'trackPageview' => array(
'on' => 'visible',
'request' => 'pageview',
),
),
),
);
return $analytics;
}
add_filter( 'amp_post_template_analytics', 'nendebcom_amp_add_custom_analytics' );

AMPページの記事下にSNSボタンを表示する

AMPページからの各種SNSにシェアできるようにAMPページの記事下にSNSボタンを表示する記述

function content_for_social_button($content){
if (is_amp_endpoint()) {
$url_encode=urlencode(get_permalink());
$twitter = '<a href="http://twitter.com/share?text='.urlencode(the_title( "" , "" , 0 )).'&url='.$url_encode.'"><span class="text">Twitter</span></a>';
$facebook = '<a href="http://www.facebook.com/sharer.php?src=bm&u='.$url_encode.'&t='.$title_encode.'"><span class="text">Facebook</span></a>';
$line = '<a href="//line.me/R/msg/text/?'.$title_encode.'%0A'.$url_encode.'"><span class="text">LINEで送る</span></a>';
$social = "<div class='share amp'>";
$social .= "<h4>この記事をシェアする</h4>";
$social .= "<span class='twitter snslist'>" . $twitter . "</span>";
$social .= "<span class='facebook snslist'>" . $facebook . "</span>";
$social .= "<span class='line snslist'>" . $line . "</span>";
$social .= "</div>";
$content .= $social;
return $content;
} else {
return $content;
}
}
add_filter( 'the_content', 'content_for_social_button');

AMPでも「カエレバ・ヨメレバ」を表示する

「カエレバ・ヨメレバ」をページ内で使用しているので、AMPでも「カエレバ・ヨメレバ」を表示する為の記述

function convert_content_for_amp($amp_the_content){
if ( is_single() ) {//投稿ページ
//カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する
$amp_the_content = preg_replace('/ src="(http:)?\/\/ecx.images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://ecx.images-amazon.com', $amp_the_content);
//カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する(SSL用)
$amp_the_content = preg_replace('/ src="(https:)?\/\/images-fe.ssl-images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="https://images-fe.ssl-images-amazon.com', $amp_the_content);
// //カエレバ・ヨメレバの楽天商品画像にwidthとhightを追加する
$amp_the_content = preg_replace('/ src="(http:)?\/\/thumbnail.image.rakuten.co.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://thumbnail.image.rakuten.co.jp', $amp_the_content);
// //カエレバ・ヨメレバのYahoo!ショッピング商品画像にwidthとhightを追加する
$amp_the_content = preg_replace('/ src="(http:)?\/\/item.shopping.c.yimg.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://item.shopping.c.yimg.jp', $amp_the_content);
//アプリーチの画像対応
$amp_the_content = preg_replace('/<img([^>]+?src="[^"]+?(mzstatic\.com|phobos\.apple\.com|googleusercontent\.com|ggpht\.com)[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="75" height="75" sizes="(max-width: 75px) 100vw, 75px"></amp-img>', $amp_the_content);
$amp_the_content = preg_replace('/<img([^>]+?src="[^"]+?nabettu\.github\.io[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="120" height="36" sizes="(max-width: 120px) 100vw, 120px"></amp-img>', $amp_the_content);
}
return $amp_the_content;
}
add_filter('amp_the_content','convert_content_for_amp', 999999999);

AMPページに独自CSSを読み込む

AMPページに独自CSSを読み込むための記述
読み込んでいるCSSは、「カエレバ・ヨメレバ」と「SNSボタン」、「AMPページ用関連記事一覧」の表示関連のCSSファイル

function kool_amp_additional_css_styles( $amp_template ) {
//CSS追加
?>
/************************************
** カエレバ・ヨメレバ
************************************/
.booklink-box,
.kaerebalink-box,
.pochireba {
border: medium double #ccc;
border-radius: 5px;
font-size: small;
margin: 20px auto;
overflow: hidden;
padding: 25px 25px 18px;
}
.kaerebalink-image,
.booklink-image{
width: 85px;
float: left;
margin-top: 4px;
}
.kaerebalink-link1 amp-img{
display: none;
}
.booklink-name,
.kaerebalink-name {
font-size: 16px;
line-height: 1.3em;
}
.kaerebalink-powered-date,
.booklink-powered-date{
font-size: small;
}
.kaerebalink-link1 div,
.booklink-link2 div {
background: #ffffff linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%) repeat scroll 0 0;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
float: left;
font-size: 12px;
font-weight: 800;
margin: 7px auto;
padding: 10px 1px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #dcdcdc;
width: 100%;
}
.kaerebalink-link1 div:hover,
.booklink-link2 div:hover {
background: #f6f6f6 linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%) repeat scroll 0 0;
}
.kaerebalink-link1 div a,
.booklink-link2 div a{
text-decoration: none;
}
.booklink-footer {
clear: left;
}
.shoplinkamazon a {
color: #ff9901;
}
.shoplinkrakuten a {
color: #c20004;
}
.shoplinkkindle a {
color: #007dcd;
}
.shoplinkkakakucom a {
color: #314995;
}
.shoplinkyahoo a {
color: #7b0099;
}
.shoplinkseven a {
color: #000;
}
.shoplinkehon a {
color: #0086cd;
}
.shoplinkkino a {
color: #004097;
}
.shoplinkjun a {
color: #1c2c5e;
}
.shoplinktoshokan a {
color: #27b5e9;
}
.shoplinkpsstore a {
color: #003791;
}
/************************************
** BabyLink
************************************/
.babylink-box{
overflow: hidden;
font-size: small;
zoom: 1;
margin: 1em 0;
text-align: left;
border: medium double #ccc;
border-radius: 4px;
padding: 10px;
}
.babylink-image{
float: left;
margin: 0px 15px 10px 0px;
width: 75px;
height: 75px;
text-align: center;
}
.babylink-image img{
border-top: medium none;
border-right: medium none;
border-bottom: medium none;
border-left: medium none;
}
.babylink-info{
overflow: hidden;
zoom: 1;
line-height: 120%;
}
.babylink-title{
margin-bottom: 2px;
line-height: 120%;
}
.babylink-manufacturer{
margin-bottom: 5px;
}
.babylink-description{
margin-top: 7px;
}
/************************************
** SNS-Button Link
************************************/
body {
font-family: Arial, Helvetica, 游ゴシック, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.share.amp .snslist{
width:31%;
margin:0 1% 15px;
display:inline-block;
text-align:center;
font-size:82%;
font-weight:bold;
}
.share.amp .snslist a{
display:block;
padding:1em 0;
width:100%;
border-radius:0.3em;
color:#fff;
text-decoration:none;
}
.share.amp .snslist.twitter a{
background: #00acee;
box-shadow: 0 3px 0 #0092ca;
}
.share.amp .snslist.facebook a{
background: #1f6aba;
box-shadow: 0 3px 0 #2c4373;
}
.share.amp .snslist.line a {
background:#25af00;
box-shadow:0 3px 0 #219900;
}
/************************************
** AMP関連記事
************************************/
.amp-related {margin: 40px 0;}
.amp-related ul {margin: 0;}
.amp-related ul li {margin-bottom: 15px; border-bottom: 3px solid #e4e4e4; list-style: none; clear: both; display: flex;}
.amp-related ul li a {color: #333; text-decoration: none; font-weight:normal;}
.amp-rerated-title {margin-bottom: 5px;}
.amp-related .list-amp-img {margin-right: 10px; margin-bottom: 5px;}
<?php
}
add_action( 'amp_post_template_css', 'kool_amp_additional_css_styles' );

以上が、当サイトに追加したAMPの記述になります。

まとめ

上記のコードで当サイトをAMP対応してから、1ヶ月ほど経過しています。

サーチコンソールで確認すると、少しずつですがGoogleにAMPページが登録されつつあるようです。また以前は頻発していたAMPページのエラーですが、今もところエラー表示がないので今回のAMP設定は順調のようです。

しかしAMPの仕様もまだ変更になる事があるので、今回のAMP設定で経過観察してみようと思います。

おまけ!!今後使いそうなAMP設定!3点

「Rinkerプラグイン」用のCSS

アフィリエイトの商品リンクですとWordpressの「Rinkerプラグイン」を使用されている方も多いと思います。「Rinkerプラグイン」を使用している方のCSSは以下で行けました、ボタンの色などは好みにより適所変更してください。

/************************************
** Rinker関連
************************************/
.yyi-rinker-box {
	border: medium double #ccc;
	border-radius: 5px;
	margin: 20px auto;
	overflow: hidden;
	padding: 25px 25px 18px;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    margin: 0 auto;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
	width: 90%;
    display: block;
    text-align: center;
    list-style: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding: 5% 0 2% 0;
    text-decoration: none;
    display: block;
    font-size: 1.3rem;
    color: #FFF;
}
/**ショップリンク**/
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink{
	background: #ff9901;
    margin-bottom: .5em;
    text-decoration: none;
    line-height: 100%;
    border-radius: 5px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
    background: #c20004;
    margin-bottom:.5em;
    text-decoration: none;
    line-height: 100%;
    border-radius: 5px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    background: #7b0099;
    margin-bottom: .5em;
    text-decoration: none;
    line-height: 100%;
    border-radius: 5px;
}
/**テキスト調整**/
div.yyi-rinker-contents div.yyi-rinker-title p {
    font-size: .8rem;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price {
    color: #f7a9a9;
}

を「CSSを追加する」の中に追記します。

AMPページの時だけ「BJ Lazy Loadプラグイン」を無効化

WordPressで表示速度を速めるため、「BJ Lazy Loadプラグイン」(画像の読込を遅延するプラグイン)を使用している方でAMPページで画像が表示されない場合、必須の記述になります。AMPページの時だけ「BJ Lazy Loadプラグイン」を無効化します。

function bjll_compat_amp() {
if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
add_filter('bjll/enabled','__return_false');
}
}
add_action('bjll/compat','bjll_compat_amp');

カスタム投稿用、専用AMPページテンプレートの使用

最後に、カスタム投稿ページを使用している場合、カスタム投稿ページに別のAMPページテンプレートを使用したい場合の記述です。記述前に「カスタム投稿専用のテンプレート」(AMP用single.phpをコピーして修正し、名前を変更すればできます。)を作る必要があります。

add_filter( 'amp_post_template_file', 'custom_post_template', 10, 3 );
function custom_post_template( $file, $type, $post ) {
 if ( 'single' === $type && 'カスタム投稿名' === $post->post_type ) {
  $file = TEMPLATEPATH . '/amp/テンプレートファイル名.php'; //読み込むテンプレートファイルの場所を指定
 }
 return $file;
}

以上が、AMP設定の際に使いそうな記述3点でした。

また、面白そうな記述があれば追記していきたいと思います。

参照サイトURL

WordPress AMPプラグインを使って サイトをAMP対応にする
WordPress AMPプラグインをいろいろ改造してみる
AMP化したページでカエレバ・ヨメレバ・アプリーチを表示する方法
RinkerをAMPでも崩れない程度にカスタマイズに成功【Cocoon限定】
WordPressでAMPページと通常ページを条件分岐する関数「is_amp_endpoint()」の使い方
PHP(WordPress)でAMP対応ページかどうか判別する方法
WordPressの投稿本文をAMP化する方法
AMPが当たり前の時代なのでWordPressのオリジナルテーマをAMP対応させてみた
WordPressのAMPプラグインで通常ページとAMPページで条件分岐する関数 is_amp_endpoint()
【WordPress】プラグイン無しでAMP(Accelerated Mobile Pages)に対応にする手順
WordPressのプラグインを使ってAMP⚡対応するにあたっての備忘録
いまさら聞けない? WordPressでのAMP対応

コメントは受け付けていません。