悩めるWEB担当者様のための最新ノウハウをお届け

【AMP】Googleが推進するAMPとは?概要と対応方法まとめ

pexels-photo-63572

【無料eBookプレゼント中!】基礎からわかる!SEOの教科書

【11/2 更新】日本でのAMP正式公開や、AMPテストツールなどの関するニュースを追加しました!
追記した最新情報は、太字で記述しています。

こんにちは。SEO担当の半田です。

突然ですが、最近スマホで検索をした時にたまに⚡マークが付いたページが表示されるのをご存知でしょうか?

img_6209

【追記】10月21日に、Google Japan公式ブログで、日本のモバイル検索でもAMPが正式に導入されたことがアナウンスされました!
2016年11月現在では、トップニュース枠だけでなく通常枠の検索結果にも上記の画像のようにAMPラベルのついたページが掲載されています。

リンクをタップして見てみると、非常にシンプルな見た目のコンテンツが表示されます。
これらは「AMP(Accelerated Mobile Pages)」という、Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツです。

まだ発表されて間もない事もあり、「最近よく聞くけど、AMPってなんなの?」と疑問をお持ちの方も多いのではないかと思います。
SEO界隈で何かと話題のAMPについて、概要から対応方法までまとめてみました。

AMP(Accelerated Mobile Pages)とは?

AMP(Accelerated Mobile Pages)とは、ひとことで言うならば「モバイルページを高速に表示させるための手法」のことです。

2015年10月、AMPプロジェクトはモバイルユーザーのユーザー体験向上を目的としてGoogleとTwitterが協同し、オープンソースプロジェクトとして立ち上がりました。
「AMP」という言葉は当初、プロジェクト名として発表されましたが、団体が発表した「AMP HTML」というフレームワークを指す場合もあります。
むしろ最近では「AMP」といえばこちらのフレームワークを指している場合が多いかもしれません。

【追記】当初はトップニュースの枠内にだけ表示されていたAMP対応ページですが、2016年10月にはトップニュースの枠内だけでなく、通常の検索結果にも表示されるようになりました。

なぜAMPページは高速に表示されるのか?

AMPページは、

  • AMP HTML
  • AMP JS
  • AMP CDN

と、大きく分けて3つの要素から構成されています。

AMPページでは、AMP JS以外のJavaScriptを許容しない、全ての外部リソースの縦幅を固定させるなど、仕様がかなり限定的です。
これによって読み込みや描画の負荷を減らし、コンテンツを一瞬で表示させることを実現しています。

表示の高速化を実現しているのはこれらの仕様だけではありません。
AMPの仕様に従って作成されたページはGoogleやTwitter側にキャッシュとして保存されます。
ユーザーが検索画面からAMPバッジのついたリンクをタップすると、GoogleやTwitterが保存しているキャッシュからコンテンツを返します。
つまり、本来のページがあるウェブサイトへのアクセスが発生せず、いちいちサイトを読み込まなくても済むようになっているため、コンテンツを高速で表示することが可能になっているのです。

AMPに表示されるコンテンツ、AMPに向いているコンテンツ

【追記】現在、AMPに対応しているコンテンツは通常の検索結果にも表示されるようになっています。
AMPは現時点で「記事コンテンツ(article)」と「動画」がサポート対象であり、メディアから発信されるニュース記事や、キュレーションメディアから発信されるまとめ記事が多く表示されるようになっています。

IMG_5436

じゃあ記事コンテンツを発信していないメディアはやる意味ないじゃん!と思われるかもしれませんが、決してそんなことはありません。
先日、世界的な大手ECサイトであるeBayがAMPの導入を発表し、話題となりました。

グーグル「AMP」、eBayが導入–モバイルショッピング体験を改善(CNET Japan)

AMPページでは「カートに入れる」などの購入にまつわる動作は実行できませんが、ユーザーが商品をブラウジングするには十分な機能を持っているとして導入に踏み切ったようです。
欲しいと思っている商品を探している時や、あれこれ比べたい時に、いちいちサイトの読み込みが遅かったらとてもイライラしますよね。
eBay側も表示速度については課題として捉えており、ユーザーの体験を損なわない最適化されたページを提供できる技術としてAMPの導入を決めたということです。

また、Googleが記事コンテンツの次には「レシピ」コンテンツをサポートすると発表しており、今後もサポート対象のコンテンツは増えていくと考えられます。

【追記】2016年11月現在、米Googleにおいて、AMPカルーセルにレシピのリッチカードを掲載する試みがスタートしている模様です。詳細は海外SEOブログの「Google、AMPカルーセルでのレシピリッチカードを提供開始」の記事をご覧ください。

モバイルフレンドリーアップデートとは何が違うの?

ややこしいのですが、AMPとモバイルフレンドリーアップデートは全く別の考え方であり、異なるプロジェクトです。

AMP対応がモバイルフレンドリー化の一部になるとは言えますが、例えば今後、「AMP対応していなかったために検索順位が落ちる」ということはありません。

注意しなければならないのは、AMP対応の有無は検索順位に影響しませんが、モバイル対応の有無は検索順位に影響するということです。
モバイルフレンドリーアップデートにより、モバイルに最適化されているサイトが検索結果において優位に評価されるようになりました。
AMP対応していなくても順位は落ちませんが、モバイル化はしていないと順位が落ちてしまう危険性があるので注意が必要です!

AMPの対応方法まとめ

ここまで、「AMPとは何か?」という点についてご紹介させていただきました。
次に、AMPページを作成するには具体的に何をすればいいのか、ということについてまとめてみました。

AMP ページの基本のテンプレート

以下のソースは必要最小限のAMPに必要なタグや機能を記述したHTMLコードです。
AMPページは先述したように記述に制限があり、タグ内にある要素などはほぼコピペで済んでしまいます。

<!doctype html>
<html amp lang="ja">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
		<title>ページのタイトル</title>
		<link rel="canonical" href="PCサイトのページURL">
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22application%2Fld%2Bjson%22%3E%0A%09%09%09%7B%0A%09%09%09%09%22%40context%22%3A%20%22http%3A%2F%2Fschema.org%22%2C%0A%09%09%09%09%22%40type%22%3A%20%22NewsArticle%22%2C%0A%09%09%09%09%22headline%22%3A%20%22%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%22%2C%0A%09%09%09%09%22datePublished%22%3A%20%222016-01-01%2012%3A00%3A00%20%2B0900%22%2C%0A%09%09%09%09%22image%22%3A%20%5B%0A%09%09%09%09%09%22logo.jpg%22%0A%09%09%09%09%5D%0A%09%09%09%7D%0A%09%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20amp-boilerplate%3Ebody%7B-webkit-animation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%3B-moz-animation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%3B-ms-animation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%3Banimation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%7D%40-webkit-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40-moz-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40-ms-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40-o-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />

<noscript>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20amp-boilerplate%3Ebody%7B-webkit-animation%3Anone%3B-moz-animation%3Anone%3B-ms-animation%3Anone%3Banimation%3Anone%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />

</noscript>
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20async%20src%3D%22https%3A%2F%2Fcdn.ampproject.org%2Fv0.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
	</head>
	<body>

<h1>記事の大見出し(タイトル)が入ります</h1>

	</body>
</html>

かなりミニマムにまとまっていることがお分かりいただけたかと思います。
次に、AMPに対応するために必要なルールについて、上記のソースと対応させながらご紹介していきます。

AMP HTMLの宣言

<!doctype html>
<html amp lang="ja">

普段のHTML文書とほぼ同じです。
AMP HTMLがユニークなのは、の部分を絵文字で表現することも可能だという点です。 絵文字で表現した場合、以下の様なソースになります。

<!doctype html>
<html ⚡ lang="ja">

ソースコードの中に突如として現れる絵文字がめちゃくちゃかわいいです⚡

meta要素の指定

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

AMPはUTF-8にのみ対応していますので、文字コードには”utf-8″を指定しましょう。
文字コードとビューポートの指定は必須です。どちらが欠けてもエラーが出てしまいますので注意が必要です。

オリジナルのページを示す

<link rel="canonical" href="PCサイトのページURL">

canonicalタグで、オリジナルページのURLを示します。
canonicalタグも省略してしまいますとエラーが出てしまうので必ず設置し、正しいURLをクローラーが認識できるように記述します。

JSON-LDの指定

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22application%2Fld%2Bjson%22%3E%0A%09%7B%0A%09%09%22%40context%22%3A%20%22http%3A%2F%2Fschema.org%22%2C%0A%09%09%22%40type%22%3A%20%22NewsArticle%22%2C%0A%09%09%22headline%22%3A%20%22%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%22%2C%0A%09%09%22datePublished%22%3A%20%222016-01-01%2012%3A00%3A00%20%2B0900%22%2C%0A%09%09%22image%22%3A%20%5B%0A%09%09%09%22logo.jpg%22%0A%09%09%5D%0A%09%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

schema.orgのJSON-LDを指定することでページの構造を正しくクローラーに伝えることができます。
省略してしまうとサーチコンソールでエラーが出てしまいます。
複雑ですが、上記のソースを参考に記述してみてください。

AMPに必須の”boilerplate”


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20amp-boilerplate%3Ebody%7B-webkit-animation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%3B-moz-animation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%3B-ms-animation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%3Banimation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%7D%40-webkit-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40-moz-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40-ms-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40-o-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />

<noscript>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20amp-boilerplate%3Ebody%7B-webkit-animation%3Anone%3B-moz-animation%3Anone%3B-ms-animation%3Anone%3Banimation%3Anone%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />

“boilerplate”とは鋳型を指す英単語で、そこから「決まり文句」「定型文」などの意味で使われるようになりました。

AMPが高速化を実現するために必要な記述ですので、省略せずに記述しましょう。

ライブラリの読み込み

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20async%20src%3D%22https%3A%2F%2Fcdn.ampproject.org%2Fv0.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

AMPがきちんと表示されるために必要なライブラリを記述します。ソースのパスなどを変えてしまうとエラーとなってしまいますので注意してください。

AMPの存在を知らせるタグをオリジナルページに埋め込む

<link rel="amphtml" href="./amp.html">

AMPの元となるオリジナルページの方に、「このページにはAMPページがあるんですよ!」とクローラーに伝える記述を差し込みます。

PCサイトのページとスマホサイトのページが別々にある場合にはアノテーションを行いますが、全く同じ考え方です。

【追記】AMPが正しく実装されているか確認できるGoogle謹製の「AMPテスト」ツール!

2016年10月13日に、GoogleはAMPが正しく実装されているか確認できる「AMPテスト」というツールを公開したことを発表しました。

使い方は非常にシンプルで、確認したいAMPページのURLを「テストするURLを入力」という欄に入力するだけです!

screencapture-search-google-search-console-amp-1478083328139

テストしたAMPページが構造化マークアップされていない場合、「AMPに構造化データを追加してください」というメッセージが出る場合があります。
AMPページを構造化マークアップしていると、AMPカルーセルに表示されるようになるため、ユーザーへの露出が高まります。
構造化マークアップしていない場合でも、通常の検索結果には表示されるため、カルーセルに表示させる必要がなければ対応せずとも問題はないでしょう。

まとめ

いかがでしたでしょうか?
AMPとは、

 

  • モバイルページを高速に表示させるための手法(フレームワーク)である
  • AMPに対応させるためには、AMP用のHTMLファイルが必要である
  • AMP HTMLの記述はシンプル!ルールを確認してきっちり記述すればOK

 

という事を覚えていただければ大丈夫かなと思います。

最後に、AMPプロジェクトのGithubのURLをご紹介してこの記事を終えたいと思います。
AMPはオープンソースプロジェクトですので、全ての開発の肯定やリポジトリ内のファイルを確認することができます。
AMPプロジェクトのサイトは英語ですが、FAQもまとまっていますのでぜひご覧ください。

AMP Project Github

Accelerated Mobile Pages Project

【無料プレゼント】基礎からわかる!SEOの教科書
ダウンロードはこちらから!
また、弊社では無料のSEO個別セミナーを実施しております!
事前にサイトを診断した結果に基づく個別セミナーなので大好評!詳細は下記URLから
https://digitalidentity.co.jp/service/seo/seminar.html

関連記事