Pinto!

企業のマーケティングを支援する「ピント!」

一歩先を行くSEO!今後の主流「AMP対応」とは?記事タイプ別に徹底解説!

Writerライター

五十嵐 和希

株式会社PLAN-B プロジェクト推進室 ビジネス開発ユニット

2013年中途採用でPLAN-Bに入社。東日本エリアの営業マネージャーを経て、2017年にビジネス開発ユニットを立ち上げ、各種アライアンス構築活動中心とした事業開発や、SFA/MAなどを駆使した営業支援業務に従事。

目次
    1. AMPとは?
      1. AMPの概要
      2. AMPの仕組み
    2. AMP導入のメリット
      1. 01. ページ読み込み待ちによるユーザー離脱を防げる
      2. 02. カルーセルに表示されることで、クリックされやすくなる
      3. 03. 今後、順位上昇に影響する可能性がある
    3. AMP導入によるデメリット
      1. 01. フレームワークの制約
      2. 02. 管理するページが2倍になる可能性が…
      3. 03. コンテンツ・デザインが変更になる可能性がある
    4. AMPの実装方法
      1. AMP HTML
      2. CSS
      3. Java Script
      4. 動画
    5. 構造化データマークアップについて
      1. ニュース記事(NewsArticle)の構造化データマークアップ
      2. 記事(Article)の構造化データマークアップ
      3. ブログ記事(BlogPosting)の構造化データマークアップ
      4. レストラン情報(Restaurant)の構造化データマークアップ
      5. レシピ情報(Recipe)の構造化データマークアップ
    6. 各種チェックツールのご紹介
      1. AMP対応のチェックツール
      2. 構造化データマークアップのチェックツール
    7. AMP対応の将来性
      1. Googleの動向
      2. ユーザーの認知度
    8. まとめ

現代のメディアでは「必須の取り組み」とされているSEO対策。SEOの知識は、長期的に安定したユーザーを獲得するために、必要不可欠です。

今回は数あるSEO対策の中でも、2016年の2月に導入された「AMP」の対応についてご紹介します。


AMPとは?

AMPの概要

「Accelerated Mobile Pages」通称「AMP」と呼ばれるこのフレームワークは、直訳すると「モバイルページの高速化」です。

普及が進むスマートフォンやタブレットでのユーザビリティ向上を図り、GoogleとTwitterが共同開発した「サイトのスピードをより高速化するため」のシステムです。

一説では表示速度が従来に比べて4倍近くのスピードになるとも言われており、よりユーザーを獲得しやすくなると言われています。

2016年11月時点で、AMPに対応しているページは下記の通りとなります。

  • ニュースページ
  • ブログ記事ページ
  • 記事ページ
  • レシピページ
  • レストランページ

AMPの仕組み

AMPは、コンテンツをキャッシュすることでデータ量が少なくなり、、アクセスにかかっていた時間を、大幅に短縮します。

そのため、ニュース記事など、定期的に更新される動的なコンテンツで大きな効果を発揮するフレームワークです。

現在では朝日新聞や日刊スポーツ、毎日新聞などメディアに導入する会社が増え、GoogleのカルーセルでもAMP対応のページを頻繁に見ることができます。

AMPに対応しているページには、検索結果画面上で稲妻マークが付きます。


AMP導入のメリット

AMP導入のメリットは下記の3点です。

01. ページ読み込み待ちによるユーザー離脱を防げる

まず、最初に挙げられるのはユーザビリティの向上です。サイトの表示速度が高速になるということは、ユーザーの利便性が大きく増すこととイコールです。高速でモバイルページが表示されるので、ページの読み込みが遅い事によるユーザーの離脱を防ぎます。

一説には、サイト表示速度が2秒違うと、サイト直帰率が50%も増加するという話もあります。ページの表示だけでなく、コンテンツ自体が保存されているため、ユーザーがストレスを抱える場面が圧倒的に少なくなり、よりユーザーの人気を獲得できるでしょう。

02. カルーセルに表示されることで、クリックされやすくなる

自然検索ではなくカルーセル形式で大きく表示されるため、クリックされる確率が圧倒的に高くなると考えられます。 ※自然検索形式の表示も確認されています。

03. 今後、順位上昇に影響する可能性がある

現在AMP対応はランキングシグナルには導入されていませんが、Googleはモバイルでのページスピードを重要視しており、今後AMP対応しているページが、検索結果の上位に表示される可能性があります。


AMP導入によるデメリット

しかし、現段階でAMP対応を導入することに対してデメリットも何点か挙げられます。

01. フレームワークの制約

まずは、今までのフレームワークに比べて制約が多すぎること。Java Scriptがほとんど使えないことは、大きな弱みとも言えるでしょう。

Java Scriptに対応できるようGoogleが開発を進めていますが、現段階ではまだ大幅な仕様変更の可能性が無いと言い切れないため、知識を得るコストを考えると、現段階での導入はリスクもあります。

02. 管理するページが2倍になる可能性が…

通常のHTMLページと、AMP用HTMLページの両方の管理が必要になる可能性があります。 ※一括で管理できるCMSも存在しております。

03. コンテンツ・デザインが変更になる可能性がある

AMP用HTMLでは使用を禁止されているタグが複数存在しております。これにより、従来のコンテンツやデザインのままでは表示できないものが出てくる可能性があります。


AMPの実装方法

では、実際にAMPの実装方法を代表的なプログラムごとに紹介していきます。


AMP HTML

AMP対応のHTMLは、テキスト以外のコンテンツに制約が課されています。上記でも触れましたが、Java Scriptはほとんど使えないためimgやvideoなどは、カスタムエレメンツでコードを書かなければなりません。

また、普通のHTMLと記述の方法が異なる場合もあるため、チェックが必要です。さらにGoogleでは、構造化データのマークアップが必須となるので気を付けておかなければなりません。

AMP要素の記述例

<head>
<meta charset=”utf-8″>
  <meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui”>
  <title>ページタイトル</title>
<link rel=“canonical” href=“通常版のURL”>
  <script src=”https://cdn.ampproject.org/v0.js” async></script>
</head>

※<meta charset=”utf-8″>
 文字コードはutf-8を指定します

※<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui”>
 ビューポートの設定を行います

※<link rel=“canonical” href=“通常版のURL”>
 AMPページのcanonicalタグでは、AMPではない通常版のページ(対応するPCページなど)のURLを記載します。
 対応するページが存在しない(AMPページのみが存在する記事)の場合はAMPページのURLを記載します。

※<script src=”https://cdn.ampproject.org/v0.js” async></script>
 AMP JSライブラリを読み込むための記述を行います


CSS

AMP HTMLでは外部ファイルのCSSを読み込む事は出来ません。CSSはheadタグ内で<style amp-custom>タグを使用して記述します。また、CSSでは総容量が50KBまでという点も注意が必要です。

<style amp-custom>

</style>


Java Script

Java Scriptについて改めて触れておきます。現段階ではAMPにおいて許容されていないため、ほとんどが使用できません。非同期スクリプトのみ使用することができます。ただ、あくまで現在は開発中ではあるので、将来的に許容される可能性においても言及しておきます。

使用出来るのはJSON-LDを記述するためのタグのみとなります。

<script type=”application/ld+json”>

</script>

AMPページをGoogle検索結果に表示させるためには、JSON-LDを使用した構造化データが必要になります。

<script type=“application/ld+json”>と</script>の間に、必要な構造化データマークアップを行います。


動画

AMP HTMLでは<video>タグの代わりに、<amp-video>タグを使用します。また、縦横の幅をピクセルで指定することが必須となります。

<amp-video src=”/sample.mp4″ poster=”動画の表紙画像” width=”画像の横幅” height=”画像の高さ” layout=”レイアウトの調整”>


構造化データマークアップについて

AMPページを検索結果に表示するには、@typeに合わせていくつかの構造化データが必須です。

【必須プロパティ】@typeがBlogPosthingの場合の例


ニュース記事(NewsArticle)の構造化データマークアップ

<script type=”application/ld+json”>
{
    “@context” : “http://schema.org”,
    “@type” : “NewsArticle”,
    “headline” : “記事見出し分”,
    “image” : {
        “@type” : “ImageObject”,
        “url” : “画像パス”,
        “height” : 画像の高さ,
        “width” : 画像の横幅
    },
    “publisher” : {
        “@type” : “Organization”,
        “name” : “企業名”,
        “logo” : {
            “@type” : “ImageObject”,
            “url” : “ロゴ画像のパス”,
            “height” : ロゴ画像の高さ,
            “width” : ロゴ画像の横幅
        }
    },
    “author” : {
        “@type” : “Person”,
        “name” : “記事の著者”
    },
    “datePublished” : “初回公開日時”
}
</script>

  1. @type属性には”NewsArticle”を指定します
  2. 初回公開日時は、ISO 8601形式の時刻表記例で記載します
    例)日本時間 2016年11月30日 午前10時の場合
    2016-11-30T10:00:00+09:00
  3. 画像の高さ・横幅は半角数字で記載します
  4. その他の赤文字部分に情報を記載して、</head>タグ直前に設置します。

記事(Article)の構造化データマークアップ

<script type=”application/ld+json”>
{
    “@context” : “http://schema.org”,
    “@type” : “Article”,
    “headline” : “記事見出し分”,
    “image” : {
        “@type” : “ImageObject”,
        “url” : “画像パス”,
        “height” : 画像の高さ,
        “width” : 画像の横幅
    },
    “publisher” : {
        “@type” : “Organization”,
        “name” : “企業名”,
        “logo” : {
            “@type” : “ImageObject”,
            “url” : “ロゴ画像のパス”,
            “height” : ロゴ画像の高さ,
            “width” : ロゴ画像の横幅
        }
    },
    “author” : {
        “@type” : “Person”,
        “name” : “記事の著者”
    },
    “datePublished” : “初回公開日時”
}
</script> 

  1. @type属性には”Article”を指定します
  2. 初回公開日時は、ISO 8601形式の時刻表記例で記載します
    例)日本時間 2016年11月30日 午前10時の場合
    2016-11-30T10:00:00+09:00
  3. 画像の高さ・横幅は半角数字で記載します
  4. その他の赤文字部分に情報を記載して、</head>タグ直前に設置します。

ブログ記事(BlogPosting)の構造化データマークアップ

<script type=”application/ld+json”>
{
    “@context” : “http://schema.org”,
    “@type” : “BlogPosting”,
    “headline” : “記事見出し分”,
    “image” : {
        “@type” : “ImageObject”,
        “url” : “画像パス”,
        “height” : 画像の高さ,
        “width” : 画像の横幅
    },
    “publisher” : {
        “@type” : “Organization”,
        “name” : “企業名”,
        “logo” : {
            “@type” : “ImageObject”,
            “url” : “ロゴ画像のパス”,
            “height” : ロゴ画像の高さ,
            “width” : ロゴ画像の横幅
        }
    },
    “author” : {
        “@type” : “Person”,
        “name” : “記事の著者”
    },
    “datePublished” : “初回公開日時”
}
</script> 

  1. @type属性には”BlogPosting”を指定します
  2. 初回公開日時は、ISO 8601形式の時刻表記例で記載します
    例)日本時間 2016年11月30日 午前10時の場合
    2016-11-30T10:00:00+09:00
  3. 画像の高さ・横幅は半角数字で記載します
  4. その他の赤文字部分に情報を記載して、</head>タグ直前に設置します。

レストラン情報(Restaurant)の構造化データマークアップ

<script type=”application/ld+json”>
{
    “@context”: “http://schema.org”,
    “@type”: “Restaurant”,
    “name”: “店名”,
    “image”: “画像パス”,
    “address”: {
        “@type”: “PostalAddress”,
        “streetAddress”: “番地以下の住所”,
        “addressLocality”: “市区町村”,
        “addressRegion”: “都道府県”,
        “postalCode”: “郵便番号”,
        “addressCountry”: “JP”

    },
    “telephone”: “電話番号”,
    “priceRange”: “平均予算”,
    “servesCuisine”: “料理”,
    “aggregateRating”: {
        “@type”: “AggregateRating”,
        “ratingValue”: レビューのスコア,
        “ratingCount”: レビュー数
    }
}
</script>

  1. @type属性には”Restaurant”を指定します
  2. address , telephone , priceRange ,
    servesCuisine , aggregateRatingの記述は必須ではありません
  3. 郵便番号、電話番号、レビューのスコア、レビュー数は半角数字で記載します
  4. 平均予算は¥2,000 ~ ¥3,000のように範囲指定可能です
  5. その他の赤文字部分に情報を記載して、</head>タグ直前に設置します。

レシピ情報(Recipe)の構造化データマークアップ

<script type=”application/ld+json”>
{
    “@context”: “http://schema.org”,
    “@type”: “Recipe”,
    “name”: “レシピ名”,
    “description”: “ページ内容の概要”,
    “totalTime”: “調理にかかる時間”,
    “recipeIngredient”: [“材料1”, “材料2”, “材料3”],
    “image”: “画像パス”,
    “author”: “記事の著者”,
    “datePublished”: “初回公開日時”,
    “nutrition”:{
      “@type”:“NutritionInformation”,
      “calories”:カロリー
    },
    “aggregateRating”: {
      “@type”: “AggregateRating”,
      “ratingValue”: レビューのスコア,
      “reviewCount”: レビュー数
    }
}
</script>

  1. @type属性には”Recipe”を指定します
  2. 調理にかかる時間は、ISO 8601形式の時刻表記例で記載します
    例)50分の場合:PT50M
  3. 初回公開日時は、ISO 8601形式の時刻表記例で記載します
    例)日本時間 2016年11月30日 午前10時の場合
    2016-11-30T10:00:00+09:00
  4. nutrition , aggregateRatingの記述は必須ではありません
  5. カロリー、レビューのスコア、レビュー数は半角数字で記載します
  6. その他の赤文字部分に情報を記載して、</head>タグ直前に設置します。

各種チェックツールのご紹介

AMP対応のチェックツール

ページがAMPに対応されているかどうかは、AMPテストツールを使用して確認する事ができます。


構造化データマークアップのチェックツール

構造化データが正しく記載されているかどうかは、構造化データテストツールを使用して確認する事ができます。


AMP対応の将来性

Googleの動向

AMP対応について時期尚早だ、という意見も多いのが現状です。しかし、現在Googleでは拡充へ力を入れているのは紛れもない事実であり、SEOなどに関連してくる可能性も高く予想できるでしょう。

Googleのスポークスマンを務めるジョン・ミューラー氏の発言の中にも「すべてのサイトがAMPに対応するべきである」という趣旨のコメントが残っており、Googleとして全体が力を入れていることは間違いありません

ユーザーの認知度

AMP対応の影響を最も受けるのはおそらくWebコンテンツを使用するユーザーでしょう。高速化という極めてシンプルな問題解決ですが、それゆえに予想されるユーザビリティの向上は高いものが見込まれます。

AMP対応のページには青い稲妻のマークが表示されていますが、現時点では認知度が高くありません。しかし、AMPが今後認知されていくと、ユーザーが青い稲妻がついているサイトを優先して訪問することは容易に考えられます。

現在ではニュース系の一部メディアにしか恩恵がないと考えられているAMP対応ですが、今後ユーザーの認知が高まっていくことを考慮すると、現時点から対策を打つことも十分な恩恵があると言えるのではないでしょうか。


まとめ

  • AMPの概要
  • AMP導入のメリット・デメリット
  • AMPの実装方法
  • AMP対応のチェックツール
  • AMP対応の将来性

今回は上記5ポイントについてまとめました。

AMPは、現段階での認知度や影響度は限られているものの、今後加速していくフレームワークになる可能性が高いと言えるでしょう。

他のサイトよりも一歩先に対策を練っておくことは、大きな武器になり得るかもしれません。

SEOコンサルティングの最新事例 サービスページはこちら

関連する記事を読む