こんにちは！来客メディアコンサルタントの佐藤旭です。
去年からGoogleはモバイルファーストを謳い、スマホ対応がされているWebサイトを優遇する流れが強くなってきました。
『今やレスポンシブなんて当たり前』
『モバイルファーストありきのサイトじゃないと価値がない』
と言うのが今の流れです。
ハッキリ言って、PCサイトのモバイル版なんて、もう古いんです。
更にその流れを加速させているのが、AMPです。
WordPressの場合、プラグインで簡単にAMP化することが出来ますが、ここで問題になるのがエラーです。
僕も早速エラーが出たと、Googleから報告が来たので対応しました。
今回は、そのエラーの確認と対象方法について簡単にまとめました。
AMP化を検討されている方のお役に立てば嬉しいです！
エラーの確認方法
AMP化をした後に、エラーが発生するとこの様なメールが来ると思います。
Googleからのメールはドキドキします。
もしくは、Google Search Consoleの上でこの様に表示されているので、そのリンクから確認することが出来ます。
『詳細を表示』させると、この様画面が表示されますので『AMPエラーを確認する』をクリックしてください。
クリックをするとこのような画面が表示されます。『エラー』から詳細を確認します。
今回は『不明な構文エラー』をクリックします。
切り替わった画面の『AMP URL』から、エラーが発生しているページを確認できます。
URLをクリックしてください。
そうすると、このようにエラーの詳細を確認することが出来ます。
エラーの解消方法
AMPエラーの解消方法についてです。
エラーの詳細画面の下の方に赤枠で囲ったように、エラーがどこで発生しているのかが分かります。
実際に確認するには、『AMP URL』をクリックします。
『正規 URL』はPCから表示させたときの表示です。
今回、大きく分けて2つのタイプのエラーがありました。
1つ目はプラグイン由来のショートコードを使った事によるエラー。
2つ目は文章内のHTMLコードに不備がある場合です。
動画のレスポンシブ化プラグインが原因の場合
僕は、YouTube動画をレスポンシブ表示させるため、『Advanced Responsive Video Embedder』というプラグインを使っています。
しかし、今回このプラグインを使って記事内に動画を入れる時に生成されるコードがエラーの原因になっていました。
ここがエラーの原因でした。
クリックしてみると、このように表示がされません。
僕は、通常のYouTubeの共有を使う事で解消させました。
再度確認しなおしてみると、このように表示されていました。
これで大丈夫なはず。
AMP化に対応していないプラグインもあるって事なんですね。
尚、YouTube動画の埋め込みは『YouTube動画をブログにレスポンシブに埋め込む方法』で詳しく解説しています！
HTMLコードを指摘された場合
このように、表示されている場合は、記事の編集画面を開き『テキストモード』に切り替えてその文字を検索し削除しました。
細かい・・・。
エラー修正後にやる事
エラーを指摘された場所を修正出来たら実際に確認してくださいね。
実際に確認することは大事です！
Googleの公式によると、そのまま次のクロールを待つか、『Fetch as Google』をつかってお知らせくださいね。との事です。
⇒Search Console ヘルプ Accelerated Mobile Pages（AMP）レポートより
『Fetch as Google』の使い方は、『ブログのアクセスアップはこの3大ポイントを抑えるべし！』で詳しく解説しているので、使う方はお役立てください！
因みに、僕は修正後30分程度でクローラーが来てくれたようで、エラーは解消されていました。
まとめ エラーはこまめにチェックしておこう
と、いう訳でAMP化した後のエラーの確認・修正方法についてでした。
細かいところの差が積み重なると、大きな差になると思います！
これでアクセス増えないかなぁ・・・(笑)
