Webサイトを運営している方にとって、表示速度が遅いのは致命的です。GoogleのPage Speed InsightでWebサイトの表示速度を見てみると、パソコンは高速表示できていても、スマホの表示速度は遅いといったことが多いのではないでしょうか。

そこでAMP(Accelerated Mobile Pages)対応のページを作成しようと考えている方も多いはずです。

ページの高速表示はGoogleからの評価も高く、WebサイトのAMP化はSEOにも効果的なことが見込めます。スマートフォンの普及により、現在はパソコンよりもスマートフォンでWebページを閲覧することが多く、取得できるデータのほとんどはスマートフォンからのアクセスです。

しかし、AMP対応は正しい方法で導入しなければ、効果が反映されない場合があります。おそらくこの記事をご覧になられている方は「WebサイトをAMP導入できたかテストしたい」方がほとんどでしょう。

この記事では、AMPページが正しく導入されているかテストするツールを紹介します。これから紹介するツールを用いて、Webサイトのスマホ表示速度をAMPで改善しましょう。

AMPページが正しく設定されているかテストできるツール4選

AMPページが正しく導入されているかテストできるツールは、無料で利用できるものばかりです。

AMPテスト

amptest.png

画像引用:AMPテスト

「AMPテスト」は、Googleが提供しているAMP導入テストツールです。自身の運営するWebサイトのAMPページURLを入力するだけで、数十秒で確認することができます。

正しく導入されている場合は、数秒後に「有効なAMPページです」という文言が表示されます。そのすぐ下にある「Googleに送信」をクリックすれば、インデックスを送信することが可能。その横にある「検索結果をプレビュー」をクリックすれば検索結果を確認できるようになっています。

AMPが正しく導入できていない場合は「AMPページではありません」と表示され、AMPのコードに誤りがある場合は、「有効なAMPページではありません」という文言とともに、修正箇所を表示されます。

間違っている場合は、すぐに修正箇所を確認し、再度AMPテストを行いましょう。

Google Search Console

searchconsole.png

画像引用:Google Search Console

Googleが提供しているWebサイトのアクセス管理ツール「Google Search Console」でもAMPページが正しく導入されているかテストすることができます。

まずはSearch Consoleにログインし、AMPページを導入したサイトを表示しましょう。そのあと、「検索の見え方」から「Accelerated Mobile Pages」をクリックします。

エラーページがある場合は「重大な問題のあるAMPページ」という箇所に、エラーのあるページ数が表示されるので、修正内容に従ってコードを書き換えましょう。

ただ、Search Consoleは仕様が変わったために、現在は「AMP ステータス レポート」という名前に変わっています。

AMP ステータス レポートはSearch Consoleに標準搭載されていないので、右上の「はてなマーク」のアイコンをクリックし、検索窓にAMP ステータス レポートと入力しましょう。

下にスクロールすると「AMPレポートを開く」という項目が表示されるのでクリックしてください。すると、AMPレポートが表示されますが、すぐ結果が反映されるのではありません。一日後にデータの取得を行います。

WebサイトすべてのURLからAMPの導入テストを一括で行ってくれるので、導入したページURLを入力する必要はありません。

デベロッパーツール

デベロッパーツールは、Chromeに搭載されている機能でAMP HTMLページソースを確認できるツールです。

まずはAMPページURLに「#development=1」をつけて「デベロッパーツール内」で対象となるページを表示します。

Chromeを利用している方は右上にある3本の線の入った設定画面を開き、「その他のツール」から、「デベロッパーツール」を起動しましょう。

それ以外のWebを使用している場合は「Ctrl+Shift+i(Windowsパソコン)」「Ctrl+Opt+i(MacBookパソコン)」のショートカットキーを入力すれば起動できます。

デベロッパーツールで対象のページを開き、画面上部にある「Console」を選択してください。

正常にAMPページが導入されていれば、「Console」の一行目に「Powered by AMP」が表示されます。しかし、AMPページの導入に何らかのエラーがあった場合には、1行目に注意を促すアイコンが表示され、エラー部分が表示されるので修正を行いましょう。

AMP Validator

ampvalidator.png

画像引用:AMP Validator

AMP Validatorとは、AMPプロジェクトが提供しているツールです。上記のAMPテストのようにGoogleが提供しているわけではありませんが、Chromeでも利用できます。

ただ、Web版もあるので、普段お使いのブラウザに合わせたツールを選びましょう。

Chrome版はインストールが必要です。インストールが完了したらAMP Validatorにアクセスし、AMPページを確認したいURLからアクセスします。

すると、

  • 灰色/AMP未対応
  • 青色/AMP対応
  • 緑/AMP HTMLが有効
  • 赤/エラーのあるページ

赤色のアイコンをクリックすると、それに応じた情報が表示されるので修正すべき箇所がすぐに見つかります。

Web版はインストールの必要はありません。まずはAMP Validatorの公式サイトへアクセスし、確認したいURLページを検索窓に入力しましょう。入力し終えたら、VALIDATEをクリックしてください。

するとページソースが表示され、エラー箇所があればソースコードの行に赤色のアイコンが表示されます。それを元にAMPページの修正を行いましょう。

AMPページにこだわる必要はあるのか

AMP対応ページを導入する必要はあるのか、というと「対応したほうがいい」という見解です。Webサイトの表示速度について以下のように記されています。

「サイトの速度」カテゴリのレポートには、コンテンツの読み込み速度や応答速度が表示されます。
「サイトの速度」カテゴリのレポートでは、以下の 3 種類の反応時間を測定します。
・サイト上でサンプルに設定したページビューの表示時間。
・トラッキングの対象にしている個々のクリック、イベント、ユーザー操作の実行速度または読み込み時間(画像の表示時間やボタンのクリックの反応時間など)。
・ブラウザがドキュメントを解析し、ユーザーの操作が可能になるまでの時間。


引用:サイトの速度について|アナリティクス ヘルプ

表示速度に関する評価は上記の通りです。Googleではモバイルサイトの読み込みに30秒以上かかる場合は、訪問ユーザーの53%が離脱するという結果が出ています。

SEO評価にも関わるWebサイトの表示速度をあげることはサイトの離脱率を下げ、コンバージョン率のアップにつながるのです。

また、スマートフォンの表示速度はパソコンよりも遅くなってしまいがちなので、対策が必要になります。その対策となるのが、WebサイトのAMPページ導入です。

初心者の方がAMPページを導入してもうまく反映されないことが多く、正しく表示されているかを確認する必要があります。

そのためには上記で紹介したサービスを活用してください。ツールを活用すれば、エラー箇所を指定してくれるので、修正作業が簡単です。

AMPを導入してサイト改善に努めよう

この記事では、AMPページが正しく導入できているかテストできるツールを紹介しました。

AMPページを作成したにもかかわらず、何らかのエラーで表示されない場合はかえってSEOの評価が悪くなる可能性があります。

AMPページを導入する場合は、表示されていることを確認した上でWebサイトに表示しましょう。

AMPの他の情報を知る

Google、検索結果のニュース表示を変更、コンテンツにはAMP対応が必要に

Google、検索結果のニュース表示を変更、コンテンツにはAMP対応が必要に

GoogleがGoogle検索結果の表示を改善したと発表。ユーザーがユースを検索する際、それに関連する記事のカルーセルが表示され、関連記事の確認もできるようになった。まずは英語版でリリースし、その後他の言語にも拡大していく予定。