フリーランスが在宅で稼ぐためのブログ【稼グッド】

只今サイト移行中のため、崩れやリンク切れが発生している可能性がございます。ご了承ください。

AMPが正しく表示できるか検証チェックする5つの方法

AMPが正しく表示できるか検証チェックする4つの方法

この記事では、AMPが正しく設定できているかを検証するための5つのチェック方法を説明します。

スポンサーリンク

アドオン「AMP Validator」で確認する

AMP Projectが公開するChromeの拡張機能「AMP Validator」を追加することで簡単にAMPチェックが行えます。

アドオン「AMP Validator」で確認する

アドオンをインストールしてページを開くと、ブラウザの右上に上記のようなアイコンが表示されます。AMP化されている場合は、青色マークが表示され、クリックすると緑色になりAMPページが開きます。一方で、AMP化されてない場合は、グレーのマークが表示されます。

「AMPテストツール」で確認する

https://validator.ampproject.org/」にアクセス。「URL」を入力し右側にある「VALIDATE」ボタンをクリックすると、AMPチェックを行えます。

「AMPテストツール」で確認する

正常にAMP対応されていれば「Validation Status:」が「PASS」と表示されます。一方エラーがある場合は「FAIL」と表示され、エラー箇所が表示されます。

Validation Status:PASS、Validation Status:FAIL

「Search Console」で確認する

Search Consoleにログインして、[検索での見え方] → [Accelerated Mobile Pages] の画面でAMP対応されているかを確認できます。

Accelerated Mobile Pages

このレポートからは、AMPページの「インデックス数」やAMPページに発生している「エラーの内容」を知ることができます。

Chromeの「デベロッパー ツール」で確認する

Google Chromeのデベロッパーツールの機能を使うと、AMP HTMLのバリデーションをチェックでき、AMPが定める仕様に従って正しくコーディング出来ているかを検証できます。

手順1「URLの末尾に#development=1を付与する」

AMPページのURLの末尾に「#development=1」を付与してアクセスします。

Chromeの「デベロッパー ツール」で確認する

例えばAMPページのURLが「https://example.jp/amp/index.html」であれば、「https://example.jp/amp/index.html#development=1」としてアクセスします。

手順2「デベロッパーツールを起動する」

次のいずれかの方法で「デベロッパーツール」を起動します。

  • マウス右クリックから [検証] をクリック
  • ショートカットで開く「Ctrl + Shift + i (Windows) / Cmd + Opt + i (Mac)」
  • [Chromeの設定(右上の3本バー)] → [その他のツール] → [デベロッパー ツール]

手順3「Consoleメニューを選択する」

デベロッパーツールで「Console」タブを選択します。

デベロッパーツールで「Console」タブ

1行目に「Powered by AMP ⚡ HTML – Version xxxxxxx」が表示していれば、AMPページとして認識されています。

また、AMPが定める仕様に従って正しいコーディングができていれば、続いて「AMP validation successful.」 と表示されます。記述に誤りがある場合には、ここにエラーが表示されます

構造化データ テスト ツールで確認する

構造化データテストツールでは、記事コンテンツにAMP用のschema.orgが正しく設定できているかを検証できます。

AMPページのURLを入力して「テストを実行」をクリックします。

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

すると以下のように、検証結果が表示されます。schema.orgがきちんとマークアップされていないと、AMP記事として検索結果のカルーセル上に表示されない可能性があります。そのため記事コンテンツはschema.orgも正しく設定しておく必要があります。

構造化データ テスト ツールで確認する

エラー修正後の対応

AMPチェックで見つかったエラーを修正した後は、Googleに認識してもらわなければなりません。以下のいずれかの方法で知らせましょう。

xml sitemapを送信する

エラーは複数のページに渡っていることが多く、修正も複数ページが対象になるでしょう。 そのため再クロールを促すためには、xml sitemap を送信すると効率的です。この時に、<lastmod> を設定しておくと優先的に再クロールしてくれます。

サイトマップの送信で気を付けたいのが、「AMPページのURL」ではなく「本体ページのURL」をサイトマップに記述することです。

※クロール頻度はページによって変わってきます。

Fetch as GoogleでURLを送信する

修正したページが少なければ、Fetch as Googleで「URLをインデックスに送信」すると良いでしょう。

再クロールを待つ

検索エンジンクローラーは、本体ページに記述されている rel=amphtml を発見すると対応するAMPページもクロールしてくれます。 そのため何もしなくても、元のページがクロールされるとAMPページも再クロールされます。

※掲載している情報については充分注意・確認をした上で掲載しておりますが、最新性や正確性を保証するものではありません。ユーザー様に、より有益な情報をお届けしたいと考えており、もし誤った情報がございましたら、当ブログまでご一報いただけますと幸いです。

ブックマーク&シェア ありがとうございます!

お役立ち情報をお届けします!

関連記事

カテゴリー

新着の記事