AMPとはAccelerated Mobile Pages の略で、GoogleやTwitterなどが共同で参加しているAMPプロジェクトが構築した仕組み、もしくはそのためのHTML規格のことです。
AMPはその名のとおりモバイルユーザーのユーザー体験向上を目的として、WEBページの表示速度高速化が図られています。（ですのでAMP HTMLは基本的にモバイル端末で閲覧することが想定されています）
Google検索ではすでに2016年2月24日からAMPで作成されたページが検索結果画面に表示されています。
ここではHTMLをAMPに対応させるための書き方の基本やAMPを取り巻く環境の変化についてまとめました。
update
この記事はもともとGoogleのAMP実装に合わせて作成した記事でしたが、8月に大きく追記・修正しました。
AMPの現状
冒頭で触れたとおり、AMPはGoogleほか複数のプラットフォームが参加しているプロジェクトです。
すでに検索結果画面に取り入れ始めたGoogleのほか、はてなブックマークやTwitterがAMPをサポートし始めています。
それぞれのプラットフォームのAMP対応状況をまとめました。
Googleが2016年2月にAMPを取り入れたのは、AMPページのニュース系が含まれる検索結果へのカルーセル部分への表示で、その後カルーセルのないニューストピックに表示されるようになっています。
カルーセル部分は特に、AMP対応をしているページしか表示されなくなったのではないかと思われます。
ですが、AMPについて実装されているのは執筆時現在ではこれだけです。
とはいえ、GoogleはすでにAMPページを一般の検索結果画面に表示させるためのテストをおこなっています。
（http://googlewebmastercentral-ja.blogspot.jp/2016/08/amp-your-content-preview-of-ampd.html）
またSearch Consoleを通じて、AMPの導入を促すメッセージを送信し始めています。（トラフィックの多いWEBサイト管理者に限られているようです。）
今後もGoogleはAMPを強く進めていきたいという意思が伝わってきます。
はてなブックマーク
はてなブックマークアプリでは、エントリー一覧においてAMP対応されているページがあれば従来のスマホページではなく、AMPページを表示するようになっています。
AMP対応しているページについてはサイトのアイコンの脇に稲妻マークが表示されています（赤枠部）。
なお、はてなブログの有料プランのユーザーはブログ記事をAMP化できるようで、エントリー一覧にははてなブログのAMPページをたびたび目にします。
ただしAMP対応されたページであっても、AMPページが表示されて遷移できるのは新着エントリーや人気エントリーだけで、マイブックマークから遷移する際はAMPページではなく、通常のスマホページになるようです。
なかでもWEBサイト運営者にとって最も関心が高くトラフィックへの影響が大きいのはやはりGoogleでしょう。
Google AMPの仕組み
AMPの仕組みについてGoogleのがどのようにAMPを活用しているかみていきましょう。
まずはAMPについて紹介されている動画などを見てみてください。（たとえばgoogle公式ブログ）
検索結果画面から読み込み時間ほとんどなしにページ遷移している上に、異なるサイトの記事をスムーズに渡り歩いているのがわかるでしょう。
Googleで検索した際にカルーセルと呼ばれる、アイキャッチ画像と記事へのリンクが横並びに表示されることがあります。
このカルーセルから記事へ遷移した際、記事の表示が非常に高速化しています。
手持ちのスマートフォンなどで試してみるとよりわかりやすいと思います。（ブラウザのデバイスエミュレーション機能を使っても試せるのですが、スマホを使ったほうがより実感できるかと思います。）
まずはカルーセルが表示されるような検索語で検索します。例えば「朝日新聞」「マイナビニュース」といった、すでにAMPに対応しているメディア名や、「大谷」「ジカ熱」といった時事要素を含む検索語です。（この記事をお読みになっている時に話題となっているワードに置き換えてください）
カルーセル表示が出ないようなら、ブラウザをアップデートしたり別のブラウザにする、もしくは検索語を変えてみてください。
カルーセル表示が出たら、記事のアイキャッチ画像の下に稲妻のようなマークとともに”AMP”と書かれているはずです。これはタップした先がAMP用のページであることを示しています。
次に示す記事はカルーセル表示からたどりついた朝日新聞の記事の例ですが、タップ先のURLを見てみるとgoogleドメインの中にあることになっています。
https://www.google.co.jp/amp/www.asahi.com/amp/articles/ASJ2S5TH4J2SUTQP01C.html#fpstate=amp_viewer
(※閲覧にはスマホでアクセスする必要があります。)
この記事について朝日新聞はもともと下記のようなスマホに最適化されたページを持っています。
http://www.asahi.com/sp/articles/ASJ2S5TH4J2SUTQP01C.html
（※閲覧にはスマホでアクセスする必要があります）
２つのページを比べてみると、AMPで表示されたページの表示速度や、広告など含まれるコンテンツに大きな違いがあることがわかります。
これは、AMPではページの表示速度を上げるために、それを妨げるようなコンテンツ（外部cssやjavascriptなど）を基本的に許容していないためです。
では、表示されていたAMPページはgoogleドメイン内にあることになっていますが、このページはどこから来ているのでしょうか？
実はここに表示させるために、朝日新聞は次のようなページを作成しています。
http://www.asahi.com/amp/articles/ASJ2S5TH4J2SUTQP01C.html
Googleはこのページをキャッシュしたものを表示していたのです。
つまりAMP対応を進めるにあたってはこのようなページを作成しておく必要があります。
どれくらい表示が速くなっているのか、これらのページをGoogleのページスピードインサイト（https://developers.google.com/speed/pagespeed/insights/?hl=ja）で比べてみました。
点数は、朝日新聞spページ41点、AMPキャッシュページ81点という結果でした。
同じ記事のページを表示しているにもかかわらず、圧倒的にスコアが改善しています。
このように表示速度の速いAMPですが、現状ではその恩恵はスマホでカルーセル表示されるという点にとどまっています。
また、アプリインデックスではアプリで開くかブラウザで開くか選べましたが、AMPの場合はAMPページに遷移するか従来のSPに遷移するかどうかは現状選べず、AMPページに遷移するリンクしか設置されていません。
AMPの実装方法
GoogleのAMPに対応できるようにするためには、さきのようなAMPに対応したページを作成しなければなりません。
検証したわけではありませんが、Googleに対応したAMP HTMLになっていれば、Google以外のプラットフォームにもそのままAMP対応できるはずです。
ここでは管理しているサイトにどのようにAMPを実装していくか、主にコードの書き方をまとめています。
端的に言ってAMPに対応させるためには、<html amp>というフォーマットのHTMLを用意する必要があります。
現在スマホに最適化されたページがあるサイトは、ほとんどの場合PCに最適化されたHTMLとスマホに最適化されたHTMLを使い分けているか、同じHTMLで対応している（レスポンシブ）かのどちらかでしょう。
AMPに対応する際は、AMP HTMLを新規で作成するか、現在スマホに対して見せているHTML（レスポンシブならPCも含めて）をAMP HTMLに修正するかどちらかが必要です。
ただしAMP HTMLには制約があり、これまでのHTMLで使用してきたタグが一部使えないなどするため、AMPに対応できるようにHTML上非対応のコンテンツを書き換えたり削る必要があります。
そういうわけで既存のスマホページをAMP化するのはあまり現実的ではなく、AMPページを新規で作る必要があるわけです。
（逆に、既存のPCページやスマホページからAMP非対応の要素を取り払ってAMPに対応できるように再構築（もしくは置換）、なんてこともできるんでしょうか？）
今回のAMP実装にあたって私はAMP HTMLの概要理解のために、テスト的にAMP対応ページを静的に作ってみました。
そこからわかった実装方法について流れに沿ってご紹介します。
AMP対応HTMLに求められる条件
ざっくり言うと下記の2点です。
- AMP HTMLの書式に沿ってHTMLを記述すること
- そのHTMLにschema.orgで構造化マークアップをすること
AMP HTMLには基本的なきまりがあったり、通常のHTMLとの記述の違いがあったり、通常できることができなかったりします。
たとえば、AMP HTMLで使えるjavascriptは仕様上、非同期のもののみが許容されているため、現在使っているjavascriptの多くがそのままでは使用できません。
また、Googleに認識されるために構造化データの記述が必須となっています。
ただし検証していないのですが、Google以外のプラットフォームには必ずしも構造化データは必要とされないと考えています。
GITHUBにはAMPのサンプルHTMLが公開されています。
https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples
なかでも私は、JSON-LDを使った記事HTML例を参考に試してみました。
AMP対応HTMLの記述方法
いくつかAMP HTML特有の仕様やきまりがありますので、それに沿った書き方をしていきます。
まずはhead内に記述するポイントで、特に従来のHTMLと異なる点についてまとめています。
- HTMLは<!doctype html>から始めます
- <html amp>を記述します。
- 文字コードを指定します。<meta charset=”utf-8″>以外は許容されていないようです。
- タイトルを設定します。<title></title>で記述するのは通常のHTMLと変わりません。
- <head>内にはcanonicalを設置します。
記述方法は従来のHTMLと変わりありませんが、正規のPCページをロボットに認識させるために記述が必須です。
canonical先はPCページを指定しますが、私のテストではPCページは作成しなかったため自身のページを指定しました。
<link rel=”canonical” href=”PCページのURL”> - 次の一文を記述します。
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″> - AMP HTMLではcssをlink=relで読み込んでくることができません。
そのためhead内に書きますが、<style>タグもそのままでは使うことができないため、代わりに<style amp-custom>を使用し、その中にcssを記述します。
cssについては後述します。 - AMP JS libraryを読みこむための次の一文を記述します。
<script async src=”https://cdn.ampproject.org/v0.js”></script> - 長いのですが、下記を記述します。
<style amp-boilerplate>
body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}
@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
</style>
</noscript>
必須事項ではありませんが、head内にはFacebookのOGP(Open Gragh Protocol)やtwitter cardの設定もしておきましょう。
PCページといいねやツイート件数を合算するためにも、URLはPCページのものを記述しておきましょう。
これらについも後述します。
残りの必須事項は構造化データです。
今回のAMPページはニュース記事またはブログ記事を例に説明していますので記事の構造化マークアップに必要な要素を確認します。
構造化データのマークアップはJSON-LDでもmicrodataでもいいようですが、JSON-LDを使うのが楽なのかなと思います。
JSON-LDであれば、構造化データはhead内に記述してもbody内に記述してもかまいません。
（構造化データ全般やマークアップの基本ルールについては構造化データとは？～HTMLを構造化する前に知っておきたいこと～をご覧ください。）
以下のような項目がschema.org/BlogPostingに必須または推奨項目となっています。
構造化データに記述した項目は本文中にも記載し、ユーザーに対しても表示できるようにしましょう。
（なお、ユーザーに見せない文字列を構造化マークアップすることは基本的にガイドライン違反になります。悪質なマークアップをしてしまわないよう注意しましょう）
- mainEntityOfPage：必須項目です。ページのカノニカル先URLを記述します。
- headline：必須項目です。ページタイトルと同じでいいでしょう
- 画像：アイキャッチとなる画像のURLに加えて、サイズ（width, height）も必須です
- publisher：記事発行元の名称に加えてロゴ画像も求められています。ロゴ画像にはサイズ指定も必須です。
- 記事投稿日：必須項目です。ISO 8601フォーマットで記述します。
- 記事修正日：こちらは必須でなく推奨項目です。記述は投稿日と同じ要領です。
- 著者：必須項目です。
以上のマークアップ例はさきほど紹介したGITHUBのサンプルURLにも書かれています。
基本的にはサンプルをもとに各項目を置き換えるだけでよいでしょう。
構造化マークアップは以下も参考にしてみてください。
schema.org/BlogPosting
Articleの構造化データ（Google公式）
AMP HTMLの通常のHTMLとの違いと注意点
AMP HTMLに必須の項目はすでに述べたとおりです。
body内にテキストしかないのであればそのまま公開して問題なく認識されるのですが、通常のWEBページはテキスト以外のコンテンツも多く含んでいます。
AMP HTMLではテキスト以外のコンテンツの多くに制約が存在します。
使えるタグ等の違いは下記をご覧ください。
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags
上記のうち、よく使いそうなものについて、既存のコンテンツをどうAMP対応させていけばよいかについてご説明します。
画像
画像挿入は既存htmlでは<img>タグで行いますが、AMP HTMLでは<img>タグを使うことができません。
<amp-img>タグに置き換える必要があります。
また、画像の大きさ（width, height）は必ず指定しておく必要があります。
毎回サイズを指定するのはやや面倒ですが、これはあらかじめリソースサイズを決めておくことでスムーズなレンダリングを可能にしてAMPの表示速度向上に生かされていると考えられます。
ですので<amp-img>に限らず多くのオブジェクトでサイズ指定が必須となっています。
css
すでに軽く触れていますが、cssについてはlink rel=で読みこむことができません。
そのためスタイルシートはAMP HTMLのhead内に<style amp-custom>タグを用いて書きます。
とはいえ、linkにて呼び出すことができないのであって、<style amp-custom>の中にphpなどでcssファイルの中身を書き出してしまうのであれば問題ありません。
私は次のようにphpを記述することで実質的にcssを外部化することができました。
<?php echo file_get_contents("cssのファイルパス");?>なお、amp-custom内でcssをインポート(@import)してしまうと有効なAMP HTMLと認識されないので注意が必要です。
加えて、通常のHTMLで使えるcssと比較して、!(important)が使えないなどいくつかの制約があります。
詳しくは公式ページをご覧ください。
https://www.ampproject.org/docs/guides/responsive/style_pages.html
javascript
AMP HTMLではjavascriptが許容されていません。これはかなり痛いかもしれませんね。
<script>タグで使えるものは基本的に、AMPページのために設計された非同期スクリプト（例とともに後述していきます）やJSON-LDを記述するための<script type=”application/json”>です。
そのためAMP対応されたjavascriptが開発されていない限り、表示できるコンテンツやユーザーとのインタラクションに制限を受けます。
動画
youtubeであればまず、次のjavascriptコードをhead内に記述します。
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js">
これで設置の準備は完了です。
あとは、動画を設置したい場所にamp-youtubeを用いて次のようなコードを記述すれば完了です。
<amp-youtube>
data-videoid="zuq7RQ3P8zk"
layout="fixed"
width="320" height="180">
</amp-youtube>
data-videoidの値は、youtubeの動画idを指します。
動画のURLがhttps://www.youtube.com/watch?v=zuq7RQ3P8zkであれば、値はzuq7RQ3P8zkとなります。
layoutの値は他にもnodisplayやresponsiveなどを設定することが可能です。
詳しくは以下を参照ください。
https://github.com/ampproject/amphtml/tree/master/extensions/amp-youtube
https://www.ampproject.org/docs/reference/amp-video.html
AMPへの広告の追加
AMP用のHTMLでは、通常のPCやスマホ用に表示していたような形では広告も掲載できません。
各広告ネットワークともAMPに対応した広告開発を進めているようですが、アドセンス（Google Adsense）がいち早く対応していました。
広告を表示したい部分に以下のコードを貼り付け、clientとslot内の”*”の部分に自身のアドセンスからコードを取ってきて置き換えればOKです。
<amp-ad width=300 height=200
type="adsense"
data-ad-client="ca-pub-***************"
data-ad-slot="**********">
</amp-ad>
2016年2月時点では、アドセンスを設置すると後述するディベロッパーツールによるバリデーションでエラーが表示されるようになってしまいました。それでも”AMP validation successful”とは表示され、またGoogleのAMP仕様のページにも表示できたことが確認できていました。2016年8月現在では、同じコードをチェックしてエラー項目も表示されなくなったことを確認しています。
また、amp-adには次のコードをhead内に入れることが推奨されています。
（記述がなくてもエラーにはなりません）
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
今後のamp-adが最適化された時のために必要だそうです。
手間がかかるわけではないのでamp-adを使っているサイトであれば入れておきましょう。
https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad/amp-ad.md
AMPページへのgoogleアナリティクス設置
AMPページではjavascriptが使えないため、通常のように解析ソフトを設置することができません。
AMPに対応したGoogleアナリティクスの設置方法がありますのでご紹介します。
ただしその前に、AMPページのトラフィック解析には、別のプロパティを作ることが推奨されています。（ページやそのキャッシュをさまざまな方式で配信するために、適切にユーザーを識別することができずダブルカウント等が起こってしまう、というのがその理由のようです。）
http://analytics-ja.blogspot.jp/2016/02/google-amp-accelerated-mobile-pages.html
プロパティを作成したらAMP HTMLの編集作業に戻ります。
まずはhead内に以下を記述します。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
次に以下をbody内に設置します。
“*”の部分は、作成したアナリティクスプロパティのコードに置き換えてください。
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-*****-*"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
これでアナリティクスの設置は完了です。
実際にアクセスしてみてリアルタイムレポートでトラフィックが計測されているか見てみました。
注意点として、多少のラグが発生するようで、数分は待ってみたほうがよさそうです。
上記は以下の2ページにアクセスしてみた結果です。
https://www.brain-solution.net/test/amp-test.html
https://www.google.co.jp/amp/www.brain-solution.net/test/amp-test.html#fpstate=amp_viewer
Googleのキャッシュページへのアクセスもしっかり計測できていました。
キャッシュページのほうは/v/で始まるページとして記録されているようです。
AMP対応することでサイトへのアクセスが記録されないのではないかという懸念は解消されました。
AMPページをシェアしてもらったり、ページ内にFacebook投稿を埋め込んだりする際の記述をまとめました。
中にはAMP HTMLに特別なことではないことも含んでいます。
なお、Facebookはインスタントアーティクル(Instant article)を進めているためか、AMPプロジェクトには参加していないようです。
OGP(Open Graph Protocol)
OGPの設定方法については通常のHTMLに記述する場合と変わりません。
ただし、og:urlにはPC用ページのURLを記述しておきましょう。
OGPとして設定するのは以下のようなものです。
<meta property="og:title" content="AMPとは～対応HTMLを作ってみてわかったこと～ - Webマーケティングのブレインネット">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.brain-solution.net/blog/seo/amp-html/">
<meta property="og:image" content="https://www.brain-solution.net/image.jpg">
<meta property="og:site_name" content="Webマーケティングの株式会社ブレインネット">
<meta property="fb:app_id" content="141151856317748">
ただ、AMPページと別のURLにPC用ページがあって、そのPC用ページにしっかりOGPが設定されているのであれば、AMPページに記述するのはog:urlだけでもいいみたいですね。
多少話は逸れますがfb:app_idを初めて見た、という方は見なかったことにしてメタタグを削除するか、facebookの開発者登録をしてアプリIDを取得しましょう。
fb:app_idは記述がなくても動いてくれます。fb:app_idはAMP HTMLだから必要というものではなく、PC用ページであっても記述が推奨されているものですが、これまで記述がなくても動作していたのでしたらAMPページにも記述がなくても動いてくれるはずです。（私はいまだに何のためにあるのかよくわかっていません）
Facebookいいねボタン
AMP HTMLでは公式プラグインを設置することができません。
残念ながらFacebookいいねボタンをAMPページに設置する方法については私にはわかりませんでした。
設置されたAMPページを見かけたこともなく、現状ではできない可能性があります。
代わりにシェアボタンであれば問題なさそうです。
Facebookシェアボタン
シェアボタンは実質的には単なるaタグです。
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?app_id=141151856317748&u=http%3A%2F%2Fwww.brain-solution.net%2Fblog%2Fseo%2Famp-html%2F">シェア</a>ここでもu=のあとのURLにはAMPページのURLではなく、PC用のページURLを吐き出すのがよいでしょう。念のためURLはエンコードしておくのがいいかもしれません。
app_idを取得していない場合は該当部分を削除してしまいましょう。
これで問題なくシェアできます。
「シェア」というテキストはamp-imgを用いたアイコンにするのが一般的になるでしょうか。
他にも<amp-social-share>タグを用いることでシェアボタンを設置することもできます。
使う前にはあらかじめ以下の一文をhead内に追加しておきます。
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>なお、amp-social-shareはtwitterやgoogle+にも対応していて、それらを埋め込む場合でもhead内には1度だけ記述しておけばOKです。
その後シェアボタンを設置したい場所に以下のコードを入れます。
<amp-social-share type="facebook"
data-param-app_id="*********">
</amp-social-share>これだけで設置したページのカノニカル先URLをシェアするボタンを設置してくれますので、アイコンを用意する必要もありません。（ボタンはSVGを使って自動的に作成されます）
ここでも可能であればapp_idはいれておきましょう。
Facebookの投稿埋め込み
AMP HTML内にFacebookの投稿を埋め込む際にはamp-facebookタグを使います。
使う前に例によって次のコードをhead内に記述しておきます。
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>投稿を埋め込みたいところに以下のようなコードを設置します。
<amp-facebook width=324 height=438
layout="responsive"
data-href="https://www.facebook.com/BrainNet.jp/posts/1183950314989431">
</amp-facebook>
amp-facebookのdata-hrefにはfacebook投稿のURLを記述します。
投稿のURLの調べ方は、PCブラウザにてFacebookのタイムラインやニュースフィードを開き、埋め込みたい投稿の投稿時間をクリックすると遷移するのでそのURLをコピー＆ペーストで取得が可能です。
なお、通常のHTMLであれば投稿埋め込みにはiframeが用いられていますが、iframe-ampに置き換えるだけではエラーになってしまうので注意が必要です。
ツイート（シェア）ボタン
これも基本的にaタグです。
<a href="https://twitter.com/intent/tweet?text=AMP%E3%81%A8%E3%81%AF%EF%BD%9E%E5%AF%BE%E5%BF%9CHTML%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%A6%E3%82%8F%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8%EF%BD%9E%20%7C%20BRAIN%20NET&url=http%3A%2F%2Fwww.brain-solution.net%2Fblog%2Fseo%2Famp-html%2F" target="_blank">ツイート</a>URLがエンコードされていてわかりづらいですが、以下のようなパラメータをつけておきました。
text：ツイート内のデフォルトテキスト。タイトルとか記載しておくといいのかな。
url：ツイートするURL。PC用のページを記載しておく。
amp-social-shareを使う場合は以下のようにします。
<amp-social-share type="twitter"></amp-social-share>ツイートの埋め込み
ツイートの埋め込みもFacebookの場合と同様です。
まずは次の1行をhead内に記述します。
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>埋め込みコードはこんな感じです。
<amp-twitter width=390 height=330
layout="responsive"
data-tweetid="747256194906001408"
data-cards="hidden">
</amp-twitter>data-tweetidというのは、twitterの投稿IDのことです。
やはりFacebookと同じように、PCにて投稿の日時をクリックすると以下のようなURLになります。
URLの最後の数字部分がIDです。
https://twitter.com/Brainnet/status/747256194906001408
その他のソーシャルシェアボタン
その他のソーシャルシェアボタンも同様に設置できます。
aタグを使って設置するのであればAMP HTMLかどうかは関係ないのですが一応のっけておきます。
Google+ボタン
amp-social-shareタグに対応していますので以下のように記述すればOKです。
<amp-social-share type="gplus"></amp-social-share>はてぶボタン
はてなブックマークはAMPプロジェクトに参加しているプラットフォームですが、<amp-social-share>は使えないようです。
そのためaタグにて記述します。
<a target="_blank" href="http://b.hatena.ne.jp/add?mode=confirm&url=https://www.brain-solution.net/blog/seo/amp-html/">はてブ</a>Lineボタン
Lineで送るボタンもaタグベースで作成できます。
テキストボタンは適宜アイコン等に変更してください。
<a target="_blank" href="http://line.me/R/msg/text/?AMPとは～対応HTMLを作ってみてわかったこと～ - Webマーケティングのブレインネット https://www.brain-solution.net/blog/seo/amp-html/">Lineで送る</a>WordPressプラグインを使ったAMP実装
CMSにWordpressを使っているならば、AMP対応はプラグインを入れることで簡単にできてしまいます。
まずはプラグインを検索してダウンロードします。
AMPで検索すれば出てくるはずです。
ダウンロードできたら有効化して終わりです。
このようにWordpressならわずか数分でAMP対応が完了です。
AMPプラグインは、既存のHTML仕様に沿って作成した記事の本文部分をAMP対応できるように変換してくれるとともに、その他の<body>や<head>部分のテンプレートを合わせて出力することで、既存のページに追加で新たにAMP対応したページを作成してくれるプラグインです。
デフォルトでは既存の記事URLの最後に”/amp/”を付与することでAMPページを確認できます。
とはいえ、このままでは寂しいAMPページです。
たとえば以下のようなことを設定しておきましょう。
（私はプラグインを編集してしまったのですが他にも方法あるのかもしれません）
- アナリティクスタグの挿入
- OGP, twitterカードの挿入
- ソーシャルシェアボタンの挿入
- 関連記事の挿入
- 広告の挿入
- レイアウト・cssの修正
- その他カスタマイズ
プラグインを用いたWordPressへのAMP導入について詳しくは以下もご覧ください。
簡単！WordPressのサイトを一瞬でAMP対応する方法
AMP HTMLの確認方法（バリデーション）
AMP HTMLが正しく記述・設定されているかチェックする際に助けになるツールを紹介します。
chromeのディベロッパーツールを使う
クロームブラウザにて有効なAMP HTMLとなっているかどうかをチェックすることができます。
AMP用に作成したHTMLをクロームにて表示し、URLの最後に”#development=1″を付与します。
ctrl+shift+I（もしくはf12）を押してディベローパーツールを起動し、タブから”Console”を選択します。
HTMLがAMP用にうまく記述されていれば”AMP validation successful”と表示されます。
そうでない場合はエラー項目が表示されます。
各エラー項目はAMP projectのサイトにも公開されています。こちらを参考に修正してください。
構造化データテストツール
chromeのディベロッパーツールでは構造化データが記述されているかどうかはチェックしてくれませんので、こちらは独自に行います。
チェックのためには以下にアクセスして、AMPページのURLを打ちこむか、HTMLのコードスニペットを貼り付けてチェックしましょう。
構造化データテストツール
エラーや警告がなく構造化データが認識されていれば正しくマークアップされています。
JSON-LDを使った場合カンマの有無1つで認識されなかったりエラーになってしまうので注意が必要です。
実際にgoogleを通してAMP表示してみる
URLの頭に”https://www.google.co.jp/amp/”をつけることでページがインデックスされていなくてもAMP仕様での表示が見られるようです。
調べたいURLから、あたまの”http”などの通信プロトコルを除いた部分をくっつけます。
今回私が作ったテストページの場合以下のようになります。
https://www.google.co.jp/amp/www.brain-solution.net/test/amp-test.html#fpstate=amp_viewer
（スマホでアクセスする必要があります。）
うまくAMP対応できていなければエラーメッセージが表示されてしまいます。
クロームのディベロッパーツールと違って、詳細なエラー項目を出してくれるわけではないのですが、設定がうまくできていることを視認できるという点で達成感がありますね。
PCページからAMPページへの紐付け設定
AMP用のHTMLが作成できたら、PC用のHTMLからの紐付けを行います。（AMP用のHTMLからはcanonicalによって紐付け済みです。）
PC用のHTMLのhead内に以下を記述します。
<link rel="amphtml" href="作成したAMP用HTMLのURL" />(私のケースではAMPもPCも同一のHTMLにて対応するため、この作業は行っていません。)
この1行があることで、GoogleがPC用のHTMLをクロールした際にAMP用HTMLの場所を認識してくれるようです。
PCにもAMP HTMLを見せている場合は、直接HTMLに記述した<html amp>を認識するはずです。
記事公開後にPCページをクロールしてもらうためにxmlサイトマップにページを記載し、googleに送信するのがよいでしょう（Google search consoleからできます）。
すぐにでもクロールしてほしければfetch as googleでPC用のURLを送信してもOKです。
これで基本的な設定は終わりです。
AMPページの管理
AMPページが正しく記述され、クロールされていればAMPページはインデックスされます。
ただ、AMPページがPC用のページと兼用でないのであれば、インデックスされているかどうかはsite:検索では調べることができません。
どれだけクロール、インデックスされているのかを知るためにはSearch Consoleを見る必要があります。
GoogleがどれだけAMPページを認識しているかはSearch Consoleの「検索での見え方」→「Accelerated Mobile Pages」にあります。
インデックス数やAMPエラー項目が出ていますのでチェックして、エラーがあれば修正しましょう。
ただし、AMPページをクローラーが認識してからSearch Consoleに表示されるまでに数日要する可能性があります。
AMPページを作成したにもかかわらず、Search ConsoleにAMPページが表示されない場合には以下を確認してみてください。
- PCページにrel=”amphtml”が挿入されていない
- 作成したAMPページが有効なAMP HTMLではない
- AMPページにrobot.txtなどでブロックがかかっている
また、どれだけAMPページに流入があったかは、Search Consoleの「検索トラフィック」→「検索アナリティクス」の検索での見え方からAMPでフィルタすることで確認が可能です。
AMPはSEOに効くのか
AMPの実装がSEOに大きな変化をもたらした点として、特にニュース系の検索クエリに対して、カルーセルでAMP対応の検索結果ページを返すようになったことが挙げられます。
カルーセル部分以外でAMP非対応のニュース記事を表示しているケースも散見されますが、画像つきのカルーセル表示のほうがインパクトが圧倒的です。
新聞社の例で言うと、この記事の執筆時点でAMPに朝日、産経、毎日が対応済み、読売と日経は非対応です。
現在カルーセル表示されるような検索クエリでは、多くのユーザーがAMPページにたどりついていることが予想され、対応済みのメディアと非対応のメディアでは検索トラフィックが大きく変わったのではないでしょうか。
逆に言えば、もともとニュース系記事を公開していないサイトの場合、今のところAMP対応しても恩恵は限定的なのではないでしょうか。
とはいえ、はじめに軽く触れたとおり、GoogleはすでにAMP表示を一般の検索結果に拡充するテストを行っていますし、AMP対応を促すメッセージを送信し始めています。
対応範囲の拡大により、スマホユーザーの間に「AMPマークがついたページは表示が速い、使いやすい」という理解が進めば、AMP対応ページを優先してクリック（タップ）するようになり、（検索順位が上がるかどうかは別として）AMP対応しているほうが流入を獲得しやすくなることが予想されます。
さらに、AMP対応の有無が直接ランキング要因に加わる可能性もありますし（今のところランキング要因にはならないと明言されています）、Googleが検討していると言われている、検索結果ページへの表示速度ラベル”Fast”, “Slow”などの表示によって、非対応のページと差別化されることも考えられます。
AMP実装事例と実績
弊社が運営しているメディアでAMPを実装したサイトの事例をご紹介します。
なお、本ブログを公開しているサイトとは別もので、具体的な数字はここでは伏せさせていただきます。
上のグラフはSeach Consoleからすべての検索流入と、AMPページへの流入を取得してプロットしたものです。
このサイトはもともとSEOにも力を入れていて、タイムリーな話題を取り入れた記事投稿も行っていることで、カルーセルにAMP表示され、AMPページへの流入も確認されています。
グラフからわかるとおり、AMPには当たりはずれも多く、１つの記事が非常に多くの流入を獲得することもあれば、ほとんど流入のない日もありました。
検索クエリを見てみると、月間検索数が数百万もあるようなキーワードを含めて、ビッグワード・単体ワードが多く見られました。
通常であればこのようなキーワードでは上位表示しておらず、それゆえ流入を獲得することもないようなワードばかりです。
つまり、AMPは既存のページの代替ではなく、新たな流入の獲得源になっていたことから、AMP導入はメリットがあったと考えています。
一方で、AMPページは非常に短命で、同じ記事はせいぜい3日ほどしかカルーセルに表示されず、それゆえ以降の流入はありません。（もちろん既存のPCページやスマホページはその限りではありません）
タイムリーな話題を含めて継続的な記事投稿を行っていなければ、AMP流入の恩恵にはあずかれなかったでしょう。
AMPに対応すべきかどうか
では今すぐAMPに対応すべきかどうかというと難しいところです。
確かに上記のようにSEOや流入面でのメリットは見えており、Google AMPも対応範囲が拡充されることがすでに明らかになっています。
とはいえ、課題や問題点もあることのが事実です。
AMP実装に向けての課題と問題点
ざっくり挙げるだけでも下記のようなことが考えられます。
- AMPは継続中のプロジェクトでプラットフォームの対応状況が今後どうなるかが不確定要素が多い
- AMPの仕様自体が追加・変更される可能性がある
- PCページ、スマホ用ページに加えて、AMP用ページが必要となり、作成・運用・管理コストが増大する
- AMP HTMLにできないことがまだ多くあり、ユーザーのアクション・コンバージョンが制限される
まとめ
スマホをはじめとするモバイルユーザーは増え続けており、Googleもモバイルファーストの姿勢を崩していません。
AMPは今後Googleを始めtwitterなど利用できるプラットフォームが増えていきますので、AMPはSEOだけでなくモバイルユーザー体験の向上に占めるウェイトが大きくなっていくことが予想されます。
将来的にはAMPは実装することが推奨、もしかすると必須項目となる日が来るかもしれません。
そのときになって慌てて実装するのは大変なことでしょう。
AMPに対応するタイミングをうかがうなり、ミニマムで実装してみてノウハウ・知見を重ねるなり、あらかじめAMPについての情報を収集しておくなり、どのようにAMP対応していくか考えておきましょう。
自社サイトの現状が気になる方は無料相談会へのお申込みを！
・うちのサイトにはAMPを入れるべき？
・どうやったらサイトの流入が増える？
こんなお悩みをお持ちであれば是非無料相談会へお申込みください！
弊社のコンサルタントが貴社サイト運営のお悩みを解決いたします！
