AMPページに発生しているエラーを発見し修正する方法

by 

[レベル: 上級]

英語版のGoogle公式ヘルプフォーラムで、Google社員のTOMO T氏が、AMPページに問題が発生していないかどうかを検証し、問題が発見されたときの対処手順を包括的に解説しました。
僕からの補足を交えながら、この記事で紹介します。

なおTOMO T氏の説明のなかのリンク先は、対応する日本語ページがなかったのですべて英語です。

AMPエラーの発見と対処手順

1. AMP記事をいくつか選び、プレビューと有効性をチェックするAMP HTML バリデーターでそのページを検証する

  1. ブラウザ (Google Chrome) でそのページを開く
  2. URLの終わりに #development=1 を追加する。
    例: https://ampbyexample.com/#development=1
  3. Chromeのデベロッパーツールを開き、モバイルデバイスモードのエミュレーションを有効にし、有効性エラーをチェックする
  4. 有効性エラーを修正する

#development=1でのAMP有効性チェック
有効なAMP HTMLだと「AMP validation successful.」とメッセージが出る

#development=1 を付加したURLでAMPページを表示させ、Chromeのデベロッパーツールを用いてAMP HTMLの有効性を検証する方法は以前に解説しました。
詳細な手順はそちらの記事で確認できます。

AMP HTMLのエラーは、Search ConsoleのAccelerated Mobile Pagesレポートでもチェックできます。
エラーの発見と対処にあたってはこのツールも活用しましょう。

2. AMP記事用のschema.orgの設定を構造化データテストツールでチェックする

  1. NewsArticle、またはArticle、VideoObjectのリッチスニペットを構成する
  2. 「AMPの記事」でエラーや警告があってはいけない
  3. ロゴを指定する image プロパティが 600×60 に収まるようにする
  4. カルーセルに表示するロゴに対するUIのガイドラインにロゴが準拠しているかを確認する

AMP記事のschema.orgを構造化データテストツールで検証
AMPページに記述したAMP記事向けのschema.orgを構造化データテストツールで検証したところ

TOMO T氏は、NewsArticle と Article のschema.orgタイプにしか言及していませんが、BlogPosting もAMP記事の構造化データの対象に含まれます（上のキャプチャは、BlogPosting）。
動画の場合は、VideoObject のschema.orgを設定します。

トップニュース枠のカルーセル掲載に必要なschema.orgの設定については先日解説しました。
詳細な内容はそちらの記事で確認できます。

構造化データテストツールを使った、AMP記事向け構造化データの検証方法もこのブログで解説済みです。

3. AMPページのリンク要素をチェックする

  1. rel=amphtml のリンク要素が正規ページに設置されているか？
  2. rel=canonical のリンク要素がAMPページに設置されているか？
  3. rel=amphtml のリンク要素がモバイル向けページに設置されているか？（当てはまる場合）

AMP設定に必要なlink要素については、Web担のコラムで解説しました。
別URLのモバイル構成でAMP対応するときのlink要素についても、同じくWeb担コラムで解説しました。

なお通常は、モバイル向けページに rel=amphtml は不要です（記述してはダメということではない）。
3つ目の「当てはまる場合」はどんな場合なのでしょうか？

4. 外部リソースをチェックする

  1. iframeや動画、カスタムフォント、pixel、解析ツール、広告、そのほか類似した埋め込みコンテンツはすべてHTTPSスキームで取得されるようにする
  2. 「プロトコル相対URL」を使ってはいけない。Google AMPキャッシュ経由で記事が読み込まれるときに問題を引き起こすかもしれない。cdn.ampproject.orgのような別のキャッシュからドキュメントが配信される場合、相対URLだと意図している正規URLを指し示さない。完全なURLを必ず使うこと。

プロトコル相対URLとは、http: や https: を付けないURLのことです。
// から始めます。
//www.suzukikenichi.com/relativeurl.html のような記述になります。

そのページのURLが http: なら http: が使われ、https: なら https: が使われます。

AMPページでの外部リソースを読み込ませる際は、必ず完全なURLで指定します（通常は、httpsのURL。詳細は次に説明）。

AMPページで外部リソースを読みこませる場合は、すべてHTTPSで読み込ませなければなりません。
理由の1つは安全性を確保するためです。
またAMPページを配信するCDNはHTTPSでホストされていることが多いので、埋め込んだコンテンツもHTTPSで配信される必要があります。

ただし画像だけは例外です。
プロキシ機能で代理取得されるので、外部の画像であってもHTTPの利用が可能です。

以上です。

AMPエラーがある状態では、AMPコンテンツとしてGoogleの検索結果に掲載されません。
この記事での説明を参考にして、エラーフリーのAMPページを公開してください。