こんにちは!Web集客コンサルタントの佐藤旭です。

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

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

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

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

 

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

 

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

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

 

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

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

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

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

AMP化はプラグインで行うと楽

まずは、AMP化についてですが、僕はこちらの『WordPressサイトをモバイル端末での表示を高速化するAMP(Accelerated Mobile Pages)対応にしてみました』と言う記事を参考にさせていただきました。

ハッキリ言って、僕が解説する以上に詳しくて分かりやすいので、是非参考にしてみてください!

AMPエラーの確認方法

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

amperror09

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

 

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

amperror010

 

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

amperror

 

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

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

amperror012

 

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

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

amperror013

 

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

amperror05

 

スポンサーリンク

AMPエラーの解消方法

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

 

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

amperror07

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

 

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

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

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

 

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

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

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

amperror02

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

amperror03

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

 

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

amperror04

 

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

これで大丈夫なはず。

amperror08

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

 

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

YouTube動画をブログにレスポンシブに埋め込む方法

2014.09.25

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

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

amperror014

細かい・・・。

 

エラー修正後にやる事

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

amperror015

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

 

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

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

 

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

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

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

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

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

 

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