AMPが表示されない？AMPエラーチェックの仕方

サイトをAMPに対応させたのですが、最初Googleの検索結果にAMPのマークがついていたのですが、その後、エラーが表示されてAMP表示されなくなってしまいました。

最終更新日:2017-01-09 12:08

ようやく当サイトもAMPに対応させてみました。当サイトは静的なページなので、まだ一部分のページしか対応させていませんが、AMP対応化はそれほど大変ではなかったのですが、どういうわけかGoogleの検索結果に「このページにはAMP実装エラーがあります」と表示され、AMP表示されなくなってしまいました。
今回は、同じような悩みを抱えている人に、AMPのチェックツールの使い方やAMPが表示されなかったり、エラーにならないためのポイントなどを紹介します。

AMPエラーチェックツールの使い方

AMPのエラーをチェックするには、いくつか公開されているAMPチェックツールを使うのがベストです。今回は4つのツールの使い方を紹介しますが、できれば4つでそれぞれチェックした方がいいでしょう。

The AMP Validator

最も手軽で使いやすいのが、The AMP Validatorです。英語版しかありませんが、あとで日本語訳の仕方を紹介します。
ここで紹介するツールの中では最も軽く、手軽に使えるのでまずこのサイトでチェックすることをおすすめします。

The AMP Validatorを開いたら、URLと記載されている部分に、AMPのページのURLを入力します。

エンターキーを押します。

AMPで使用出来ないタグやタグのプロパティがあると、このようにエラーとエラー箇所が表示されます。

この場合、画像を表示する「IMG」タグがあった(AMPでは使用できない)ためですね。

なんかしらエラー箇所があると、結果(Validation Status)」に「FAIL(失格)」が表示されます。
ここが「PASS(合格)」になれば、一応エラーがないことになります。
一応と書いたのは、このツールで見つからないエラーもあるからです。

一番下にエラー原因の説明が英語で表示されます。
英語だからわかりにくいのですが・・・

Google翻訳を使うと、なんとなくエラーの意味がわかると思います。
この場合は使用が禁止されているIMGタグがあるってことですね。
※ NOSCRIPT内では使用可能

YouTube

YouTubeをブログ内で表示する「IFRAME」タグもAMPでは使用禁止されています。そこでYouTubeを表示させる場合は、
<amp-youtube data-videoid>
を使用するのですが、最近、

The tag 'amp-youtube' is missing or incorrect, but required by 'amp-youtube extension .js script'. This will sonn be an error.

というエラーが表示されるようになってしまいました。

これは <amp-youtube>タグを使用する場合は、外部ファイル

を読み込む記述が必要なのですが、ページ中にYouTube動画が無いのにこの外部ファイルを呼び出す記述があるとエラーになるようで、その場合は上の呼び出す記述を削除してください。

私の場合は本文にYouTubeがない場合は、この記述を出力しないような仕様に変更したらエラーが出なくなりました。

主なエラー

ここで代表的なエラーを取り上げておきます。

画像ファイルの幅と高さ

The mandatory attribute 'height' is missing in tag 'amp-img'.

――'amp-img'タグに必須の属性 'height'がありません。

普通のHTMLの場合、画像の幅(width)もしくは高さ(height)のどちらかが指定されていれば、それに合わせて指定されていない高さ(もしくは幅)で表示してくれます。が、AMPでは「width」も「height」も必須です。
また、

height="auto"

のように「auto」にしてもエラーが出るようです。

これはYouTubeの amp-youtube でも同じです。

リンクで新たにタブを開く場合

The attribute 'target' in tag 'a' is set to the invalid value 'new'.

―― 'a'タグの属性 'target'は無効な値 'new'が設定されています。

リンク先を新たなタブで開く場合に使用する「target」は、「 _blank 」しか使えなくなりました。

formを使う場合

The tag 'amp-form extension .js script' is missing or incorrect, but required by 'FORM [method=GET]'.

――'amp-form拡張子.jsスクリプト'タグがないか間違っていますが、 'FORM [method = GET]'で必要です。

AMPページでFORMタグを使う場合、

のような外部ファイルの呼び出しが必要です。

The mandatory attribute 'target' is missing in tag 'FORM [method=GET]'.

――タグ 'FORM [method = GET]'に必須の属性 'target'がありません。

また、FORMタグには、「target」属性が必要のようです。
例)

AMP Test

Google Search Consoleでは、AMP TestというAMPチェックツールを公開しています。
唯一日本語に対応しているチェックツールです。(エラーメッセージは英語ですが・・・)
少々時間がかるので、上のThe AMP Validatorですべてのチェックが済んでから使うほうがいいかも。

使い方は他のツールと一緒。指定された箇所にAMPのURLを代入しエンターを押します。

このように日本語である程度表示してくれるのでわかりやすいです。
ただし、肝心のエラー内容が英語でしかも見にくいのが欠点・・・。

AMPBench AMP Validator

The AMP Validatorよりも細かくチェックしてくれるツールが、AMPBench AMP Validatorです。チェックする項目が多いので少し重いので、The AMP Validatorで全てエラーが出なくなったあと使用するといいでしょう。

使い方はThe AMP Validatorとほぼ同じ。
「AMP URL」と記載されている右側に、AMPのURLを入力し、エンターキーを押します。

するとしばらく時間がかかりますが、このような審査結果を表示してくれます。

①～④
元ページやAMPページは、お互いにリンクしあっていないといけないのですが、きちんとリンクしあっているか。また、リンクの記述が正しいかどうかチェックします。
URLの記述は、「 // 」もしくは「 // 」からはじめないとエラーになるようです。
⑤
AMP用の構文チェック・・・らしいのですが、間違った記述があってもエラーが出ません。この項目が何を示しているのかちょっと今のところ、不明です。。。

⑥
GoogleでAMPがキャッシュされているか。基本的にGoogleクローラーが訪問すると、数分でサーバー上にAMPが作成(キャッシュ)されます。
キャッシュがあるかどうかを調べます。

⑦
各ページのレスポンス(反応速度)です。
「WARNING」でもOKです。

⑧～⑩
robots.txtでAMPページのアクセスが許可されているか。
各検索サイトのクローラーの制限を記述する「 robots.txt 」で、GoogleクローラーがAMPページへのアクセス・キャッシュが許可されているかをチェックします。

⑪
スマホからのアクセスで専用ページへリダイレクトされるか・・・の調査のようです。

⑦の「Response Times」以外が「PASS」になっていればOKです。
サイト上に「robots.txt」がない場合、⑧～⑩でエラー表示になる場合があります。その場合は無視して構いません。

Google Chrome Consoleでチェック

あまりおすすめしませんが、Google Chromeのデベロッパーツールを使ってもエラーチェックが出来ます。
あまりおすすめしませんと書いたのは、セキュリティーソフトやChromeの機能拡張を使っていると、勝手にページ上にタグを追加してしまうためです。
そのため、上記で紹介したAMPチェックではすべてエラーが出なかったのに、Chromeのデベロッパーツールだとエラーが出るということがままあります。

ChromeのデベロッパーツールでのAMPチェックは以下。

AMPのURLに、#development=1をつけてGoogle Chormeで開きます。

AMPページを開いたら、Chromeの右上のメニューボタンをクリックし、①「その他のツール」をクリック。

②「デベロッパーツール」を選択します。

このように右側にAMPのエラー箇所とエラーメッセージを表示してくれます。

この画像だとたくさんエラー(赤い文字の部分)が表示されていますが、私はPCのセキュリティソフトとして、カスペルスキーを使っているのですが、勝手に外部ファイルを読み込むタグを記述されているのに気が付かず、なかなかAMPエラーが消えずに半日悩みました。
また、Chromeの機能拡張でも、ページ上に勝手にタグを埋め込むものがあるので、セキュリティーソフトや機能拡張をオフにしてから使ってください。

Google 構造化データテストツール

今のところAMPには「構造化データ」は必須ではなくなったようです。なので構造化データは記述しなくてもOKです。
ところが、Google Search Consoleでは、「AMP構造化データを追加」と言った重大でない問題が指摘されることがあります。
今のところは無視してしまってかまわないようです。

私の場合は一応貼り付けていますけれど、ニュースサイトではないので今のところ構造化データによる恩恵みたいなものは全く無いです。

構造化データを加えると、意外と面倒なので必要がなければ省略してしまったほうがいいかもです。

構造化データのチェック

もし、構造化データを加えたい。というのであれば、構造化データテストツールでチェックできます。

①URLを入力したら、②の「テストを実行」をクリックしてください。

ロゴ画像のサイズの指定

構造化データには、サイトのロゴが必要なのですが、ロゴの幅と高さを「"(ダブルクォーテーション)」で囲まないと、このようなエラーが表示されます。が、実際にはダブルクォーテーションは必定ないようなので、このエラーは無視して構いません。

Google Search Console

Google Search Consoleでは、自サイトのAMPのGoogleの扱いを調べることが出来ます。ただし、時差(反映されるのに2～3日かかる)があるので、APMページ公開後、GoogleがどのようにAMPページを扱っているか参考にしたいときに利用してください。

Google Search Consoleにログインしたら、左側の「検索での見え方」にある「Accelerated Mobile Pages」を開きます。

AMPページを公開し、一週間ぐらい経過すると、AMPのキャッシュ状況やエラーページがあるかどうか、が表示されます。

AMPで表示されないページは、「致命的エラー」が原因です。

AMPで表示されない！

意外と簡単にAMPページを作成できたので、さっそく公開してみました。(その後、原因不明のエラーで悩まされるのですが・・・)
あとでも紹介しますが、1日数十PVがあるページであれば、すぐにGoogleクローラーがやってきます。
クローラーが訪問すると、だいたい数分から数十分でAMPで表示されるようになります。が・・・

そのうち「このページにはAMP実装エラーがあります」という表示が現れて、AMPで表示されるページが激減。
全てではないのですが、殆どのページでこのエラーが表示されて、AMPでの表示が全滅。

上で紹介したAMPエラーチェックツールではすべて「PASS」でしたが、なぜだかGoogleの検索結果にはAMP表示されなくなりました・・・。

HTML構文エラーに注意

エラーの原因の1つは、HTML構文エラーでした。
先程のAMPエラーチェックツールでは、HTMLのエラーがあっても知らせてくれない場合もあります。
例えばこの画像の例の場合は、Pタグの閉じタグが2つ連続で並んでしまっています。

Wordpressなんかで、本文にタグを手書き入力している場合なんかはこうしたHTML構文ミス、ケアレスミスは起こりがちなので、よーく目を凝らしてチェックしたほうがいいかもしれません。

Google Search Consoleでは、致命的エラーが表示されていました。

原因が表示されています。Tableタグの属性の1つ、「bordercolor」がAMPでは使えない、ということです。

また、新しタブを開いてリンクを開く、Aタグの「target」属性の「_blank」を「_brank」としてしまっていました。

一度キャッシュされると反映されるのに時間がかかる

上のミスはすぐに気がついて治したのですが、一度クローラーが訪問してGoogleサーバー上にキャッシュされると、その後3日ぐらいは修正したデータが反映されませんでした。
なので、どうしてもAMPで表示されない。という場合は、3～一週間は様子を見たほうがいいかも。

AMPを公開してからどれくらいで検索結果に表示される？

AMPページへのリンクを元ページに貼り付けて公開したところ、さっそくGoogleクローラーが訪問してきました。
興味深いことに、Googleクローラーは10分に1度ぐらいの割合でAMPページへアクセスしてきます。
ただし、あまりアクセス数がないページにはほとんど来ません。

幾つかパターンがわかったのですが、

1日にGoogleの検索から数百回アクセスが有るページは、10分に1度ぐらいの割合でアクセスしてくる。

1日にGoogleの検索からほとんどアクセスがないページは、Googleクローラーのアクセスも殆どない。1度アクセスしてそれっきり、とか。1度も来ない場合も。

というわけで、どうもAMP用のGoogleクローラーは、検索結果からの流入が多いページには更新されていようがいまいが、10分に1度の割合でアクセスしてくるようですが、ほとんど訪問者がないようなページは、Googleクローラーもほとんどアクセスしてこないし、積極的にAMP化しないようです。

数分でAMP化される

それなりにアクセスが有るページは、Googleクローラーが訪問すると数分後にはAMP化され、修正した場合はすぐに反映されます。

こちらの画像は、検索結果からAMPのマークがついた検索結果をタップすると・・・
AMPのページが表示されました。
これは実際にはGoogleのサーバーにキャッシュ(保存)されたページで、実際にはサイトへのアクセスはありません。(ただし、画像などに関してはGoogleサーバー上に保存されない)

例えばAMPページのスタイルシートを変更した場合、15分後には検索結果のAMPでも反映されていました。
画像はH1タグの左サイドのボーダーの幅を狭くしたスタイルシートに変更したところ、15分後にはAMPのボーダーも狭くなっていました。なので割りとクローラーが訪問すれば直ぐに修正が反応されるはずなのですが・・・実際に検索結果には「このページにはAMP実装エラーがあります」というエラー表示が消えません。

ちなみに「このページにはAMP実装エラーがあります」という表示は、サイト管理者(Serach Consoleにログインした状態)のみが見えるメッセージです。

まとめ

2016年12月28日頃からはじめたAMP化でしたが、結局安定してAMP検索結果に表示されるのに、10日ぐらいかかりました。
依然としてAMP表示されていないページがありますが、ほとんどクローラーが訪問しない(つまりほとんどアクセスがない)ので、しばらく待たなければならないようです。