AMPのやり方とエラーがGoogle Search Consoleで表示された時の対処方法

こんにちは!来客メディアコンサルタントの佐藤旭です。

去年からGoogleはモバイルファーストを謳い、スマホ対応がされているWebサイトを優遇する流れが強くなってきました。

『今やレスポンシブなんて当たり前』

『モバイルファーストありきのサイトじゃないと価値がない』

と言うのが今の流れです。

 

ハッキリ言って、PCサイトのモバイル版なんて、もう古いんです。

 

更にその流れを加速させているのが、AMPです。

 AMPとはAMP(Accelerated Mobile Pages)の略で、GoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。

 

WordPressの場合、プラグインで簡単にAMP化することが出来ますが、ここで問題になるのがエラーです。

僕も早速エラーが出たと、Googleから報告が来たので対応しました。

今回は、そのエラーの確認と対象方法について簡単にまとめました。

AMP化を検討されている方のお役に立てば嬉しいです!

エラーの確認方法

AMP化をした後に、エラーが発生するとこの様なメールが来ると思います。

amperror09

Googleからのメールはドキドキします。

 

もしくは、Google Search Consoleの上でこの様に表示されているので、そのリンクから確認することが出来ます。

amperror010

 

『詳細を表示』させると、この様画面が表示されますので『AMPエラーを確認する』をクリックしてください。

amperror

 

クリックをするとこのような画面が表示されます。『エラー』から詳細を確認します。

今回は『不明な構文エラー』をクリックします。

amperror012

 

切り替わった画面の『AMP URL』から、エラーが発生しているページを確認できます。

URLをクリックしてください。

amperror013

 

そうすると、このようにエラーの詳細を確認することが出来ます。

amperror05

 

スポンサーリンク

エラーの解消方法

AMPエラーの解消方法についてです。

 

エラーの詳細画面の下の方に赤枠で囲ったように、エラーがどこで発生しているのかが分かります。

amperror07

実際に確認するには、『AMP URL』をクリックします。
『正規 URL』はPCから表示させたときの表示です。

 

今回、大きく分けて2つのタイプのエラーがありました。

1つ目はプラグイン由来のショートコードを使った事によるエラー。

2つ目は文章内のHTMLコードに不備がある場合です。

 

動画のレスポンシブ化プラグインが原因の場合

僕は、YouTube動画をレスポンシブ表示させるため、『Advanced Responsive Video Embedder』というプラグインを使っています。

しかし、今回このプラグインを使って記事内に動画を入れる時に生成されるコードがエラーの原因になっていました。

amperror02

ここがエラーの原因でした。

amperror03

クリックしてみると、このように表示がされません。

 

僕は、通常のYouTubeの共有を使う事で解消させました。

amperror04

 

再度確認しなおしてみると、このように表示されていました。

これで大丈夫なはず。

amperror08

AMP化に対応していないプラグインもあるって事なんですね。

 

尚、YouTube動画の埋め込みは『YouTube動画をブログにレスポンシブに埋め込む方法』で詳しく解説しています!

HTMLコードを指摘された場合

このように、表示されている場合は、記事の編集画面を開き『テキストモード』に切り替えてその文字を検索し削除しました。

amperror014

細かい・・・。

 

エラー修正後にやる事

エラーを指摘された場所を修正出来たら実際に確認してくださいね。

amperror015

実際に確認することは大事です!

 

Googleの公式によると、そのまま次のクロールを待つか、『Fetch as Google』をつかってお知らせくださいね。との事です。

Search Console ヘルプ Accelerated Mobile Pages(AMP)レポートより

 

『Fetch as Google』の使い方は、『ブログのアクセスアップはこの3大ポイントを抑えるべし!』で詳しく解説しているので、使う方はお役立てください!

因みに、僕は修正後30分程度でクローラーが来てくれたようで、エラーは解消されていました。

まとめ エラーはこまめにチェックしておこう

と、いう訳でAMP化した後のエラーの確認・修正方法についてでした。

細かいところの差が積み重なると、大きな差になると思います!

 

これでアクセス増えないかなぁ・・・(笑)

メルマガ登録で今これをプレゼント!

集客用にブログを立ち上げて更新しているのになぜか全くお問い合わせが来ない…。」

「これから集客用のブログをWordPressで立ち上げたいけど、どうしたら良いのかがわからない…。」

とお悩みのあなたに!

2013年からブログを始め、8年以上集客し続けている”いますぐ押さえるべき3つのポイント”まとめたPDFをプレゼント!