WordPressのAMP対応をしてみた

AMP (Accelerated Mobile Pages) が話題になっているので、試しにこのブログ世界のウミウシブログを対応させてみた

1.プラグインの導入

WordPress の本体がAMP — WordPress Pluginsを出しているので、導入
設定画面などは今のところないので、インストールして有効にして終わり

設定、パーマリンク設定を再設定したほうがいいという日本語の記事が多かったけど現在必要なのかどうかは不明

2.プラグインの修正

GoogleアナリティクスやAdsenseも消されてしまうのでプラグインを直接修正して導入
フックポイントがあるので、functions.phpで対応可能

Automattic/amp-wp: WordPress plugin for adding AMP support

3.Google Search Console でエラーの確認

エラーが出ていないかチェック
すると対応しているページがありませんの一言・・・冷たい

4.developmentモードでエラーをチェック

amp/#development=1 をつけてアクセスし、chromeのコンソールをチェック
するとエラーがでる

無効なjavascriptがありますよというので見てみたらcloudflareが有効になっていることが原因っぽい・・ので page-rules を使って機能をOFFに

それでもまだエラーが出るのでよく見たらnewrelicのbeaconが原因っぽい
のでbrowserのSettingsをオフに・・・

そしたらエラーが消えました
その後Google Search Consoleを見たらエラーはありませんの文字も出た

これでめでたく対応完了ですね

5.追記

GoogleからAMP ページのエラーを修正してくださいという内容のメールがきました
見てみると必須項目が足りていなくてエラーになっていました
・[publisher]の[logo]が指定されていない
・[image]フィールドの値が必須だが指定されていない

プラグインを見てみると
・logoはsite_iconのようなので、管理画面からlogoを登録すればOK
・[image]フィールドはアイキャッチ画像、もしくは記事内の画像を取得している・・・。でも画像が1枚もない記事もあるのですよ。。。ということで画像がない場合はsite_iconを表示するようにしてみました

これでめでたくエラーが無くなったので、モバイル検索でAMP対応って出てくるんでしょうかね?
またしばらく待ちたいと思います

スポンサーリンク

シェアする

フォローする

コメントを残す

トップへ戻る