NISA SCHOOL

独学で資産形成を目指すブログ

AMPページのコアウェブバイタル改善に!AMP Page Experience Guideの使い方を解説

f:id:nisaschool:20201017113434j:plain

こんにちは、永松です。2020年5月にSEOの新しい指標として「コアフェブバイタル」が使用されることがGoogleから発表され、その改善が大切になってくると、SEO対策で重要!サーチコンソール「CLSに関する問題」の原因と対処法でお伝えしました。

 

このコアウェブバイタルの改善には、Googleサーチコンソール「ウェブに関する主な指標」や「PageSpeed Insights」などのツールが利用できます。

2020年10月、Googleから新しく「AMP Page Experience Guide」(AMPページのエクスペリエンスガイド)がリリースされました。

 

AMPページ(Accelated Mobile Pages)とは、モバイルでのウェブサイト閲覧を高速化して、ユーザービリティを高めたページです。

PC時代からスマホ時代の変化に伴い、注目されている技術です。

 

今後、ユーザビリティを高め、SEO対策したいというWEB担当者、ブロガーの方は、AMP Page Experience Guideを知っておいて損はありません。

そんなあなたのために、AMP Page Experience Guideの使い方を解説します。

 

 

AMP Page Experience Guideとは?

f:id:nisaschool:20201017122339j:plain

 

AMP Page Experience Guideとは、Google検索ページのエクスペリエンス・ランキングシグナルに対するAMP ページのパフォーマンスを計測できるツールです。

フィードバックとして、解析結果に基づく対応策が具体的に提示されます。AMP ページの改善方法について、チームが相談も承っているとのことです。

ツールの対応言語は、英語はもちろんのこと、すでに日本語にも対応しています。

 

AMP Page Experience Guideの使い方は超簡単!

使い方は超簡単です。

本ブログの「積立NISAで一括投資する方法を楽天証券とSBI証券で解説」の記事を例に解説します。

 

1.AMP Page Experience Guideにアクセスします。すると、次の画面が表示されます。

解析したいAMPページのURLを「URLを入力」欄に入力し、「解析」ボタンをクリックします。

注意点としては、AMPページのURLを入力します。

例の記事のURLは、https://www.nisaschool.com/nisa-ikkatsuですが、AMP用はhttps://www.nisaschool.com/nisa-ikkatsu?amp=1なので、こちらを入力します。

f:id:nisaschool:20201017122339j:plain

 

2.すると、コアウェブバイタルのフィールドデータと、ラボデータを確認できます。

フィールドデータは、十分なアクセスがある場合に表示されます。ない場合は、次のような画面が表示されます。

f:id:nisaschool:20201017124135j:plain

 

この場合は、ラボデータを参考にしましょう。

f:id:nisaschool:20201017124259j:plain

 

読み込み速度、インタラクティブ、視覚的安定性の3つのパフォーマンスが表示されます。

良好(緑バー)、要改善(橙バー)、不良(赤バー)の3段階で評価されます。

 

読み込み速度は、LCP(最大コンテンツの描画)の指標で、最初に表示される最大画像またはテキストブロックのレンダリング時間で評価されます。

インタラクティビティは、TBT(合計ブロック時間)の指標で、読込の応答性で評価されます。

視覚的安定性は、CLS(累積レイアウト変更)の指標で、画像要素の一のズレで評価されます。

それぞれ、値が小さいほど良いです。

 

3.下の方に移動すると、対応策が具体的に表示されます。

対応策は、分類ごとにタグがついていて、わかりやすいです。

f:id:nisaschool:20201017132627j:plain

 

例えば、LCPの対応策「次世代フォーマットによる画像の配信」では、JPGの代わりに、JPEG 2000、JPEG XR、WebPなどの利用が推奨されています。

検討すべき画像とそのリソースサイズ、対応策を取った際の減らせるデータ量などが確認できます。

f:id:nisaschool:20201017132732j:plain

 

このようにして、各ページのパフォーマンス評価と対応策を確認し、対応の要不要を検討しましょう。

 

その他のチェックとして、次の項目も確認できます。

f:id:nisaschool:20201017133927j:plain

 

セーフブラウジングは、Googleが安全ではないウェブサイトを特定し、ユーザーやウェブマスターにその有害性を知らせてくれるサービスで、サイトが安全かどうか確認できます。

HTTPSは、URLが「https://」とウェブサイトが保護されているか否かを確認できます。

モバイルフレンドリーは、モバイルからの閲覧に対応しているか否かを確認できます。

 

侵入型インターステイシャルは、下記のようにポップアップの広告のように、ユーザーがコンテンツにアクセスする際に、不満を与えるような表示です。

こちらのみ手動でチェックします。

侵入型インターステイシャル

 

あまり推奨はされない表示方法です。詳しくはウェブマスターブログ「Official Google Webmaster Central Blog: Helping users easily access content on mobile」で確認しましょう。

 

まとめ

AMP Page Experience Guideは、AMP ページのパフォーマンスを計測できるツールです。

各ページの読み込み速度(LCP)、インタラクティブ(TBT)、視覚的安定性(CLS)の3つのパフォーマンスを評価できます。

改善が必要な場合、分類別に対応策を確認できます。

AMPページ作成時や、AMPページのユーザビリティの改善に非常に役に立つツールです。ぜひ、一度使ってみてください。

 

ちなみにこのブログは、はてなブログProで作っています。はてなブログProは、AMPと搭載済みで、設定もチェックを入れるだけ、エラーもなく、簡単に設定できます。

ぜひ、SEOも重視したいブログを作りたい方は、詳細をみてみてください。

はてなブログPro - はてなブログ

© OpenJS Foundation and AMP Project contributors.