WordPressサイトを無料で真面目にAMP化した経緯と備忘録（AMP化プラグイン使用）|Knowledge Base

公開日：2019(令和元)年12月22日／最終更新日： 2019(令和元)年12月24日

WordPressサイトのAMP化。いつかはやろうやろうと思いつつ結構な月日が流れてしまいました。重い腰を上げていざ！！ではありますがやはり本番サイトでは何かあった時に心配・・・ということでテストサイトでまず導入してみることに。

構造も必要要件も完全理解しないまま、ネットで拾った情報を基に自力で対処なんてまず無理ですから、今回はプラグインに頼ることにしました。でも・・・。

やってみたらこれがまあ難しいんですよ。もちろん何にもプラグインを使ったコンテンツがない（つまりインストールしたままで文章だけ淡々と入れてる）記事は問題なくプラグインで一発AMP化できるんですけど、そうではないものは結構苦労しました。でも最終的にはいろいろごちゃごちゃやってるこのサイトに適用しないと意味がないので、できること・できないこと、代わりをどうするなどいろいろ試行錯誤しながらの作業。なんとかかんとかこぎつけましたので、この記事を公開した次第です。

AMP化するにあたって、まずはプラグイン選定。いくつかありましたが特殊なプラグインをAMPへ対応させる部分がアドオンになっているものがほとんどで、しかも有料。ただそのプラグインを未来永劫使うわけでもないし、今のバージョンで使える有料アドオンでも永久ではないので、できるだけ費用をかけずにやりたい！ということで、プラグインの変更やどうしても何ともならないものは停止して工夫するといったこともしました。

この記事はそんな苦労話、失敗話も兼ねてすべての経緯を書いていきますので、かなりお見苦しい記事となりますがご容赦ください。貴サイトのAMP化に役立てば幸いです。

AMPの表示は評判通り爆速でした（笑）

実は私、あんまり信じてなかったんです。AMPにしたら高速表示されるっていうの。どーせ眉唾ものだろうと思ってたんです。

でも実際適用させてみたら、😲😲

なんて速度で表示されるんだ！！

感動ものでした（笑）。

これはどうしても導入したい！導入しきるしかない！と再認識して設定を進めることにしました。

複数のサイトを持っていて１つはまあテスト的に・・・とか実際にテストサイトが作れる人はぜひAMP化プラグインだけでも有効化してみてください。本当に速いですから（笑）。

そうそう忘れてました。今回AMP化の基礎として使ったのは【Better AMP – WordPress Complete AMP】というプラグイン。公式サイトの「インストール数」を見る限りではあまり導入されていないようなのですが、個人的にはこれが一番使いやすかったです。プラグインファイルの構造自体も有料アドオン等が一切ないためそれらを割り込ませる必要がないのか単純ですので、後々自力でAMPと考えている私にはピッタリでした。

【Better AMP – WordPress Complete AMP】は2021年3月22日に確認した段階で、既に配布されていないようです

ちなみに一番人気と思われる【AMP for WP】

AMP for WP – Accelerated Mobile Pages

はアドオンがいっぱいあるので事足りるのは間違いないとは思うのですが、ほとんどが有料で、必要なものを揃えたらいったいいくらになるの？？という、私のポリシー？？には反するものでしたし、構造が複雑で意味不明！？だったので今回は使いませんでした（笑）。

AMP化すると何がどうなるのか？

対応の苦労話をこうして記事にする位ですから到底AMPの達人には程遠いのはお分かりかと思いますが、AMP化関連の紹介記事では成功例と失敗例、理論的に高速表示する理由、小難しい設定などといった極論てきなものが多いので、ここでは今回私が実際に設定していく中で「WordPressサイトをAMP化するとこういうことが起こるのね」と気づいた大きな事柄や仕様を紹介していきます。

恐らくWordPressのAMP化で「なんで？？」となった時にはこれらの要因が関連すると思われますので、原因の精査や代替の対処などを行う前のヒント的なものとして参考にしていただけたらと思います。

基本的に複雑な処理はできない

AMPは高速表示をするために許可されていない処理は実行されません。

一番大きいのはJavaスクリプトの処理。プラグインなどが独自に加えたスクリプトは実行されません。

また、プラグインなどで使えるようになっているショートコードについても、きちんと動作しないものについては

ショートコードのまま表示
何も表示されない

のいずれかになりますので、自身がサイト内で使っているショートコードの表示がどうなっているのかを１つ１つ確認する必要があります（非表示ならまだいいのですが、ショートコードそのままというのは何とも格好悪いので）。

フォームを使った入力は基本使えない

後述するContact Form 7プラグインをはじめ、訪問者に何かを入力してもらって送信するというアクションは、これも前述したスクリプトの問題から正常動作しないことがほとんどです。

実際今回の方法でAMPの基礎部分に使った【Better AMP – WordPress Complete AMP】プラグインも、コメント欄（これもフォーム入力コンテンツです）へ書き込もうとすると、AMPでの表示から通常のモバイル表示に変わるようになっています。

想像ですが、AMPプラグインのフォーム入力に関する改善アドオン（有料／無料）は、特定のプラグインが生成しているフォームを通常のモバイルページへの遷移ボタンにする感じなのではないかと思いますから、どんな動作をするためのアドオンなのかをしっかり確認した方がいいのかも知れません。

必要なHTMLによるコンテンツ挿入は直接テーマに書かないと表示されない

いろいろとAMP化のプラグインを試す中での印象（絶対にそうとは言い切れない）として、プラグインが用意するカスタムHTML入力欄へ何かを追加しても、そのHTMLが出力されない（表示されない）ことが多いです。逆にそのプラグインのテンプレートへ同じコードを直接記述するときちんと表示されることが多いです。

構造を熟知しているわけではありませんが、何となくそんな性質があるのかなぁと思いますので、どうしても表示させたいHTMLは直接テーマ内へ挿入したほうがよさそうです。

うまく動作しないコンテンツ（本文内の特定の箇所）の処理方法

HTML上では出力されているものを見えなくするという処置なのであまりおすすめはできませんが、非表示というと、その部分にclass属性を付加した上でCSSに「display:none」と書いていくのが一番の方法でしょう。

というのは、WordPressで作成したサイトはAMPを含めると

パソコンからのアクセス時に表示させるものを決めるテーマ
モバイルからのアクセス時に表示させるものを決めるテーマ
モバイルからのアクセス時にAMP表示させるものを決めるテーマ

が存在することになります。そして１と２は同じものを使ってそれぞれの画面の大きさ、ユーザーエージェントによって表示し分けるレスポンシブ表示のものがほとんどです。

そこで、AMPのモバイル表示だけ適用しないようにするつもりで何等かの方法でモバイルアクセス時は表示しないというように設定してしまうと、２と３の両方に適用され、AMPのページもモバイル用のページも表示されないということになってしまいます。

例えばAMPではフォーム入力ができないから、通常のモバイルページに遷移させて・・・の遷移先でもフォームは表示されないということになり、意味がありません。

そうなると、同じ投稿や固定ページの本文を使って、とある部分だけをAMPでは表示しない（逆にAMPだけ表示させる）ようにするには、

AMPだけ非表示にするものはAMPのテーマ内CSSで非表示にする記述を追加する
AMP以外で非表示にするものは通常のテーマ内CSSで非表示にする記述を追加する

これしかないと思います。あまりにもHTMLに出力されているのに表示はされないものが多いと隠しコンテンツが多数挿入されていると判断されて、ひょっとするとSEO的にマイナス要因となるかもしれませんが、問い合わせフォームの部分など一部に関してであれば恐らく問題はないかと思います（責任は負えません・・と加えておきます）。

WordPressのAMP化備忘録（苦労話・失敗談含む）

前項でAMP化を進めていく中で大枠に関して気づいたこと、対処方法について紹介しました。ここでは実際に私がサイトで使っているプラグイン等に関して何が起きたのか？どう処理したのかの具体的な例を紹介していきます。

モバイルページへのリンクを文頭に挿入する

多分AMP化した人の中にはこれからいろいろ紹介していく苦労＆対処の中のどれかに遭遇して「これはダメだわ」とあきらめる方もいることでしょう（私もその中の一人には違いありません）。

そこで、今表示されているAMPのページが簡易表示であることを告知し、完全な機能が使えるモバイルページ（テーマのレスポンシブ表示ページ）へのリンクを文頭に表示させることで少しでもきちんとしたページを見てもらえるのではないか？と考えて設置することにしました。

これを行うには【Better AMP – WordPress Complete AMP】のテンプレート（つまりAMP表示用のテンプレート）へ直接記述する必要があります。
※プラグインの更新で追加したものがなくなる可能性がありますので更新都度チェックが必要です

「外観」→「プラグインエディタ」を開き、「Better AMP」を選択後、「template」→「single.php」を開きます。

93行目辺りに

<div class="post-content entry-content">

というのがあるので、その下に次のコードを挿入します。

<?php if ( better_amp_get_theme_mod( 'better-amp-footer-main-link' ) ) :
$args = array();
// disable auto redirect for this link
if ( better_amp_get_theme_mod( 'better-amp-mobile-auto-redirect' ) ) {
$args['query-args'] = array(
array(
'bamp-skip-redirect',
TRUE,
)
);
}
?>
<div class="non-amp" <?php better_amp_customizer_hidden_attr( 'better-amp-footer-main-link' ) ?>>
<a href="<?php echo esc_attr( better_amp_guess_none_amp_url( $args ) ) ?>">このページは表示速度重視のため簡易表示させております。すべてのコンテンツを表示するにはこちらをタップしてください。
</a>
</div>
<?php endif; ?>

※表示する文言は自身で考えて変更ください

このコードはフッターにある「View Desktop Version」のリンクを流用して文言を変えたもの。なぜこれを流用したかというと、普通に「/amp」を抜いたリンクを張ってもタップしたらモバイル判定されてAMPページが表示されるだけなので、その転送をエスケープする必要があったからです。それは分かっていてもどうエスケープすればいい？？となり「そうだ！フッターにリンクあったぞ！！」と気づいてこのリンクが完成しました。

また、そのままだとちょっと味気ないリンクになってしまいますので、管理画面の「Better AMP」→「Customize AMP」を開き、さらに「Custom CSS Code」を開いた窓へ以下を追記します。

.non-amp {
background-color: #eee;
padding: 5px;
border-radius: 5px;
}

.non-amp a {
text-decoration: none;
color: #000;
}

※CSSについても好みで変更してください。

これで一応このページが簡易表示（AMPって書いても分からないので簡易表示というのが妥当だと思います）であることを示し、通常のレスポンシブページへ誘導することができるようになります。

ひとまずこれで、もしもAMPのページに何等かの不具合があっても理解してもらえる・・・と願ってます（笑）。

Google Analyticsタグの挿入

これについては【Better AMP – WordPress Complete AMP】の設定項目で簡単に設定でき、きちんとAMPのソース中にも解析タグが挿入されていましたので問題ないでしょう。

問題なくAMPに対応できたプラグイン

Pz-LinkCard

リンクのカード表示に使用しているプラグインです。作者様も試行錯誤して対応いただいたようで、問題なく表示できました。

[Pz-LkC][1.8.0]リンクをカード形式で表示するプラグイン更新。AMP仮対応など。

CS-Shop

ずーっと更新されていないAmazonと楽天の商品掲載に使っているプラグイン。一部の外部URLが非SSLだった部分の修正を除けばなぜか問題なく使えました。ただこのプラグインはある程度の期間商品情報はキャッシュされるものの、キーワードなどを基に商品を抽出してきて表示をするため、プラグインを停止したときと比べて表示は遅くなります。それでも通常のモバイルページと比べたらよっぽど高速なので、私はそのまま表示させることにしました。

Shortcoder

プラグインが生成するカスタム投稿タイプに作ったコンテンツをショートコードで投稿などに挿入できる定型文挿入プラグイン。こちらも普通のHTML文のものは問題なく表示されました。

問題が起きたプラグインと対処

Shortcodes Ultimateを使ったコンテンツの表示

WordPressを使い始めて右往左往していた頃に「こんな便利なプラグインあったんだ！！」と感動してほぼ100%どのサイトでも使っているプラグインですが、実は使っているのは一部のボタンや表、アコーディオン（開閉式）コンテンツだけだったことに気づきました。

ボタンや表はこのプラグインでなくてもHTMLで書けば済むので確認して修正することにしました。問題はアコーディオンコンテンツの扱い。何かの説明を入れるのに本文へ入れてしまうとすごーく長くなってしまうものを「詳細はクリックしてね」として端折ることができるのでこれだけは使い続けたい！ということで現状と対処をしました。

まずアコーディオン表示させている部分はAMPにするとすべて展開した状態で表示されます。これで問題ないものはそのままにしておけばOK。

AMP表示では要らないなと判断したものはclassを付与してAMP時には非表示にするという方法で対処しました。

※前述した本文先頭の「これは簡易表示・・」というお断りと通常のモバイルページへのリンクを付けることである程度不親切にならなくなると思います。

Contact Form 7の不具合

これも前項で出てきたフォーム入力の問題。動作チェックするとこのプラグインで作ったフォームは表示されるのですが、やはり送信前の検証（バリデーション）部分が動作しない、送信ボタンを押しても何も反応しないというスクリプトが動かない現象が発生しました。ただそれでもきちんとメール送信はされるという不思議な動作をしました。

そのままでもいいかな・・とも考えましたが、やはり何もリアクションがなければ不親切になってしまうので、AMP時だけ非表示（Contact Form 7のフォームにもCSSクラスが付与できます）に、逆にAMPの時だけ「パソコンからアクセスして投稿ください」または「ページ上部のリンクから入力可能なページへ移動し、そちらから送信してください」などというのを加えるという対応にしました。

ブログ村のパーツとボタン設置

一生懸命探しましたが、見つけられたのはブログ村のパーツが表示できなかったからAMP止めたというものばかり。実際にやってみましたがやはり難しいようです。

でもここでくじけては何にもならない！！ということでやってみたら・・・見事に表示できました。

問題となるのはPVアクセスランキングに参加するためのブログ村のパーツ。これを表示させようと

Google Adsense & Banner Ads by AdsforWP

というプラグインを使ってみました。広告コード挿入用のプラグインではありますが、同じJavaスクリプトやHTMLを挿入するんだから一緒でしょ！という単純発想。結果は・・・見事に撃沈しました（ダメでした）。

そして投稿本文に挿入したらどう？で前述した「モバイルページへのリンクを文頭に挿入する」のと同じ要領で直接テンプレートに入れたらどう？でやってみたら、うまくいきました！！

と言ってもそもそもAMPはカスタムスクリプトの使用を許可していないので、Javaスクリプト版の設置は不可能に近いですから、通常のHTMLパーツを貼ります。コード自体はブログ村で取得してください。

コードの挿入場所は「モバイルページへのリンクを文頭に挿入する」と同じ場所、文末に入れた方がいいと思いますので110行目あたりにある

</div>

の下へ入れるといいでしょう。画像が小さくて左寄りになってしまうので、気に入らない方はCSSで調整してください。
※私の場合はPVアクセス数がカウントされればラッキー程度に考えてますので特に編集はしませんでした

※パーツの画面に表示されるブログ村の説明によれば、HTMLでもPV数には反映されるようですが、きちんと参入されるかについては特に確認していませんので、ひょっとすると参入されないかも知れません。

Google Adsense AMP対応自動広告タグの挿入

【Better AMP – WordPress Complete AMP】のテーマカスタマイザーにある「カスタムHTML」へAMP用のコード（２つ）を追加したところ、きちんとタグ出力されていましたので、そのうち広告が表示されると思います（表示されるまでに時間がかかるようです）。

１つ懸念事項があるとすればAdsenseの画面でAMPを有効にすることでAMPでないサイトの自動広告はどうなるの？ということ。すべてのドメインに適用するなんて書いてあるのでちょっと・・・。これも時間が経てば結果が分かると思うので、また追記します。

アイコンフォント（Font Awesome）を使う方法

AMPの仕様では外部CSSからの読み込みはできないと冒頭の方で紹介しましたが、いろいろ調べた結果アイコンフォントは外部から読み込めるようです（個人的には何か恣意的なものを感じるとか感じないとか・・・）。

いろいろなサイトでは読み込み用のコードが紹介されていますが、テーマが使用しているバージョンによって記述も引用元も違いますので、コピペしても動かないという方もいると思います。

一番手っ取り早いのは今使っているテーマの「header.php」に記述されているものを見つけ、【Better AMP – WordPress Complete AMP】のヘッダーに追記することです。

ちなみに私の自作テーマ（ha-Basic）ではバージョン5を使用していますので

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

というコードが適切ということになります。先ほど書いたようにパソコン表示で使えるということは、どこかで読み込まれたもの（ほとんどがheader.php）が適用されているわけですから、頑張って見つけてコピーしましょう。

更に【Better AMP – WordPress Complete AMP】のFont Awesomeはバージョン4.xを使用していて、私のように5.xを適用すると、ヘッダーのメニューアイコンとフッターのアイコンが□表示になってしまいますから以下のようにして対応しました。

まずメニューアイコンについては

.fa-bars:before {font-family: "Font Awesome 5 Free";content: "\f0c9";font-weight: 900;}

をCSSに加えることで表示されるようになります。これは4.xでは必要なかったfont-familyとfont-weightの記述が5.xでは必須になったためです。

次にフッターのアイコンについてですが、これはテンプレートにiタグで直接書かれていますのでプラグイン編集から「Better AMP」を開き、「templatefooter」と展開したコードの37行目付近にある

<i class="fas fa-bars"></i>

を

<i class="far fa-caret-square-right"></i>

に変更すれば表示されます（変更前のアイコンは5.xでは削除されました。上記コードで表示される新しいアイコンは四角の中に→が表示されるものですので、Font Awesomeの公式ページで気に入ったものへ変更すればいいでしょう）。

構造化データに足りないものがあった

AMPテンプレートには必須の構造化データ。【Better AMP – WordPress Complete AMP】で自動出力されるものなのですが、項目が足りないという指摘をチェックツールから受けました。

足りない項目はテンプレートファイル内を追って行って「better-amp/includes/libs/class-bf-json-ld-generator.php」にあることが分かったので足して警告はなくなりましたが、プラグインなんだから・・・とちょっと意気消沈しちゃいました。

以上が記事公開段階で見つけたAMP化の手順、問題、解決策になります。今後徐々に稼働サイトへも導入していき、問題発生都度追記していこうと思いますので、よかったらブックマークに追加して時折覗いてやってください。

さいごに

長々とお付き合いいただきありがとうございました。やりながらの記事でしたのでお見苦しい点が多く申し訳なく思っていますが自身の備忘録というニュアンスが強いので、内容の整理をする予定はありません（笑）。

さて、AMPへの対応を一言で言わせていただくと
とってもとってもめんどくさい
というのが私の総評です。

基本的にWordPressのサイトをAMP対応にするには

AMP化するためのプラグインを導入する
今使っているプラグインや機能がうまく動かない場合の処置を考えて対処する

ことで、きちんとAMP化はできます。

でも・・・やっぱりとってもめんどくさい！！です。

実は案外簡単にできたら、ココナラの出品に加えようかなーと思っていたのですが、AMP化するためのプラグイン追加以外はほぼワンオフ対応、しかも非表示にさせたりする振る舞いについてお客様に説明して理解してもらうのが多分困難（そういうのを理解している人であれば恐らく自身でやってみようとされるハズ）ですから、しばらく見送ることにしました。

逆に個人的にはそれが分かっただけでも収穫でした。自身の作ったサイトなら「ああここ問題になるかも・・」と何となくつかめる部分もよそ様のサイトでは全く未知の世界ですからね。

AMP化することでSEOに有利になるのか？ということについて、現状ではGoogleの検索順位に影響はないとはしているものの、スマホからのアクセスが高速になる＝次のページを見たり再訪したりする人が増える＝全体のアクセス数がアップするということになるのですから、当然検索順位に影響するでしょ！と私は考えています。

またAMPページはGoogleのサーバー内にキャッシュされるので、アクセスされた時に自サーバーでデータを処理する必要がないので、サーバーの負荷軽減につながるのも大きなメリットです

AMPはまだまだ駆け出し？のプロジェクト。ひょっとしたら未来的にAMPがなくなってしまうかもしれませんが、そうなったら元に戻せば済む（今回の場合はプラグインの削除とパソコン側のテーマへAMP用に記述した内容の削除）のですから、設定しておいて損はないかなと思います。

追記　試しに１つ公開サイトをAMP化してみた

ここまで書いたテストサイトの設定を踏まえ、公開しているもののあまり更新していない（いわゆるプチ放置状態）サイトをAMP化してみました。

特に問題の出そうな表現はしていないことと、テストサイトでさんざん悩んで設定したこともあり、スピーディにAMP化できました。ちなみにサイトはこちらです。よかったらモバイルでアクセスしてみてくださいね。

このサイトのSSL化にあたって１つやっておくべきことが分かりました。それは、独自のCSSを適用して作成しているコンテンツの記述をAMPテーマのCSSへコピーしなければならないこと。テーマが別なので当たり前といえば当たり前のことですが、AMP化する際に抜けそうなことなので、忘れずに行いましょう。ただし、そのCSSでアニメーション効果のあるものはAMPの規格外のようでエラーが出ますので注意が必要です。