AMP(Accelerated Mobile Pages)とは?解析ツールが使えなくなる。

Google
スポンサーリンク

 

Googleモバイル検索がAMPに対応したと、2016年2月25日(木)にGoogleから発表がありました。

スポンサーリンク

AMP(Accelerated Mobile Pages)とは?

簡単に箇条書きにすると以下のようになります。

  • モバイルブラウザ用に早く表示される仕組みで、Googleが強く推奨している
  • 現時点では、SEOのシグナルとして扱わない。(あくまで現時点)
  • AMP対応のWEBにするには、AMPに準拠したHTMLを書く必要がある
  • AMPでは原則JavaScriptを利用できない
  • そのためアクセス解析で利用されるJavaScriptが利用できない
  • GoogleAnalyticsは対応、GTMは未対応

AMPが指定するHTMLで記載されたWEBページを、サーバーにキャッシュして、モバイルでグーグル検索する際に、そのキャッシュを読みにいく仕組みらしい。Googleだけではなく、ツイッターもキャッシュを利用できるようです。

AMP自体はAccelerated Mobile Pages Project というプロジェクトチームで動いているようです。

https://www.ampproject.org/

AMPを利用するには、AMPに準拠した形式のHTMLし、構造化データも正しく実装させる

正直通常のサイトで対応しようとすると、結構めんどくさいです。

メディアとかは収益に直結するので、頑張っても良いのでしょうが。

例えば、画像ファイルでであれば以下のように記載します。

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
参照
https://www.ampproject.org/docs/get_started/create/include_image.html
https://funnis.net/blog/knowledge/amp-html-procedure/
AMPをワードプレスにプラグイン無しで設定する方法 | q-Az
2月よりGoogleがAMP(AcceleratedMobilePages)のインデックスを始めるようで、SEO界隈ではそれなりの盛り上がりをみせています。AMPというのは簡単に言うと「スマホ高速表示技術」のようなものです。AMPとはモバイ...

 

WordPressを利用している人なら、AMPに対応してくれるプラグインがあります。

AMP対応プラグイン

https://wordpress.org/plugins/amp/

 

AMPの定める仕様にそって正しく記述が出来てるか確認する方法

 AMPページのURLの末尾に「#development=1」をつける

例)https://liapoc.com/mod_pagespeed_webp.html であれば、https://liapoc.com/mod_pagespeed_webp.html#development=1 にする
※上記のプラグインを使用した場合は、「/amp」をつけることで、AMPページ表示されます。
例)https://liapoc.com/mod_pagespeed_webp.html/amp

Google Chromeの検証を立ち上げ、consoleタブをクリック

以下の文言がでてれば、AMP対応されています。エラーがある場合、この後に赤くエラーが表示されます。

Powered by AMP ⚡ HTML – Version

 

 

 

構造化データが問題ないか確認する

Structured Data Testing Tool にアクセスし、対象のURLを入力します。

構造化データが問題ないか確認する

 

 

 

 

 

問題なければ、問題ありません と表示されます。

 

サーチコンソールで確認

問題なくGoogleにindexされれば、サーチコンソールから確認できます。

検索での見え方 ≫ Accelerated Mobile Pages から確認できます。

AMPで既存の解析ツールを使用する

AMPはJSONという形式でやり取りをするので、JavaScriptで作成されているGoogleタグマネージャーやGoogleアナリティクスは利用できません。

Googleアナリティクスは、別途AMP用のアナリティクスと記述をすることで対応可能です。

https://developers.google.com/analytics/devguides/collection/amp-analytics/
https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md

AMP対応のGoogleアナリティクスの設置方法

1.head内に、下記のコードを入れます。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

2.body内に以下のコードを入れる

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"  // Replace with your property ID.
  },
  "triggers": {
    "trackPageview": {  // Trigger names can be any string. trackPageview is not a required name.
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

 

 

 

 

コメント

タイトルとURLをコピーしました