あとで読む
画像：Pixabay
AMPの導入とはすなわち<html amp>というフォーマットのHTMLを用意することです。
ところが、<html amp>の規格は表示スピードを速くするために画像やJavaScriptなどに大きな制約があるため、例えばGoogleアナリティクスなどはそのまま入れても動かないなどの現象があります。
そこで、AMPの導入は下記２ステップで進めましょう。
以下にAMPの制約と記述方法について簡単にまとめますので、まず概要を理解しておきましょう。
※GitHubにはAMPのサンプルHTMLが公開されています。
github.com/ampproject/amphtml/tree/master/examples/metadata-examples
AMPページは一般的に元データのコピーなので、オリジナルのページを指し示す必要があります。
以下のように記載します。
<link rel="canonical" href="オリジナルページのURL" />
もしオリジナルページがないならば、今回作成しているAMPページ自身のURLを指し示します。
以下２つのタグを必ず入れます。あとhttp-equivは使えません。それ以外は自由です。OGPタグなどは普通に記載してOKです。
<meta charset="utf-8">
を<head>タグの直下に入れます。つまりUTF-8限定です。
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
を<head>タグ内部に入れます。
CSSファイルの外部読込はできないので、AMP HTMLのhead内に全てのCSSを
<style amp-custom></style>
の中にべた書きで記載する必要があります。また50KB以内のテキスト量にする必要があります。
それ以外は、使えないルール（importantやセレクタ）がいくつかあるものの、基本ルールはCSSのままなので特に問題ないと思います。
▼Supported CSS -AMP Project公式ページ（英語）
www.ampproject.org/docs/guides/responsive/style_pages.html
AMP HTMLでは<img>タグを使うことができません。
<amp-img>
に置き換える必要があります。また、画像の大きさ（width, height）は必ず指定しておく必要があります。
AMPではそのままiframeを使うことができず、amp-iframeを使います。
amp-iframeには以下３つの制約があります。
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>formがあるようなページをAMP化することは少ないと思いますが、もし対応する場合は、下記の制約があります。
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<form method="post" action-xhr="https://example.com/subscribe" target="_top">
▼amp-form -AMP Project公式ページ（英語）
www.ampproject.org/docs/reference/components/dynamic/amp-form
JavaScriptは使えないと思った方がよいです。
<script>タグで使えるものは、JSON-LDを記述するための<script type=”application/json”>と、AMP用に特別に用意されたいくつかの非同期処理のみです。
なぜ非同期処理かというと、表示を早くするためです。AMP用に特別に用意されたいくつかの非同期処理を使って、通常JavaScriptを使わないと動かないGoogle アナリティクスなどの解析ソフトや、YouTubeなどの動画埋め込みなどに対応できるようになっています。
用意されている非同期処理の一覧はこちらです。
▼Components / Tags -AMP Project公式ページ（英語）
www.ampproject.org/docs/reference/components
ここでは良く使われる以下について解説します。
AMPページでは通常のJavaScriptが使えないため、そのままではGoogleアナリティクスを設置することができません。
詳しくはAMP導入手順「Googleアナリティクスのプロパティ作成など事前準備をする」でお伝えしますが、ざっくり言うと以下３ステップで導入が可能です。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script><amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-*****-*" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>JavaScriptを使う広告表示もそのままではやはり動きません。
そのため多くの広告主側でAMP対応を進める必要がありますが、アドセンス（Google Adsense）は既にAMP対応しています。以下の２ステップで対応可能です。
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script><amp-ad width=300 height=200 type="adsense" data-ad-client="ca-pub-***************" data-ad-slot="**********">広告素材</amp-ad>参考：amphtml/amp-ad.md at master ・ ampproject/amphtml ・ GitHub
YouTubeもJavaScriptが使えないため普通には埋め込めません。以下の２ステップで導入が可能です。
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"><amp-youtube> data-videoid="zuq7RQ3P8zk" layout="fixed" width="xxx" height="yyy"> </amp-youtube>参考：amp-youtube – Accelerated Mobile Pages Project
vimeoもJavaScriptが使えないため普通には埋め込めません。以下の２ステップで導入が可能です。
<script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script><amp-vimeo data-videoid="27246366" layout="responsive" width="500" height="281"></amp-vimeo>参考：amp-vimeo – Accelerated Mobile Pages Project
AMP HTML内にFacebookの投稿を埋め込む際にはamp-facebookタグを使います。以下２ステップで対応可能です。
<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をコピー＆ペーストで取得が可能です。
AMP HTML内にTwitterの投稿を埋め込む際にはamp-twitterタグを使います。以下２ステップで対応可能です。
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script><amp-twitter width=486 height=657
layout="responsive"
data-tweetid="836818327880224768"
data-cards="hidden">
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【プレミアム】Tableauを業務で使うと便利になること(1) ?ウェブ通でトップリーダーとして講師をしていただいている寳さんのコラムです。「Tableau」はどんなツール？業務で使うと何が便利になるの？全3回の1回目です。<a href="https://t.co/xRqM2c5VbT">https://t.co/xRqM2c5VbT</a></p>— ウェブ担当者通信 (@webtan_tsushin) <a href="https://twitter.com/webtan_tsushin/status/836818327880224768">2017年3月1日</a></blockquote>
</amp-twitter>data-tweetidは、twitterの投稿IDです。
Twitter投稿IDについて
PCにて投稿の日時をクリックすると以下のようなURLになります。URLの最後の数字部分がIDです。
twitter.com/webtan_tsushin/status/836818327880224768
blockquoteの部分は、投稿内容を記載する部分です。Twitterの投稿で「ツイートをサイトに埋め込む」を選択すると、blockquoteが表示されるので、そちらをそのままコピーして貼り付けます。
AMP HTML内にTwitterの投稿を埋め込む際にはamp-instagramタグを使います。以下２ステップで対応可能です。
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script><amp-instagram
data-shortcode="fBwFP"
width="400"
height="400"
layout="responsive">
</amp-instagram>data-shortcodeは、インスタグラムの投稿IDです。
PCにて投稿の日時をクリックすると以下のようなURLになります。URLの/p/の後が投稿IDです。
www.instagram.com/p/BRisEe8glIU/
ソーシャルシェアは<amp-social-share>タグを用いることでシェアボタンを設置することができます。
ソーシャルシェアボタンのサイズはDefaultでheight=44px、width=60pxです。
参考：amp-social-share -AMP Project公式ページ（英語）
ここでは良く使われるであろうFacebookとTwitterについて例を用いてご説明します。
以下２ステップで対応可能です。
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>シェアボタンを設置したい場所に以下のコードを入れる。
<amp-social-share type="twitter"></amp-social-share>
Twitterの場合は自動的にページのタイトルなどを取得してくれるので上記で問題なく動きます。
Facebookは一手間かかります。ひょっとするとFacebookはAMP Projectに参加していないからかもしれません。
手順は下記です。
<amp-social-share type="facebook" data-param-app_id="*********"></amp-social-share>では、いよいよここからAMPページを作成していきます。
AMP導入手順としては、下記５ステップになります。
では早速ページの作り方を見ていきましょう。
チェックリストを作りましたので、参考にしてください。
<!doctype html><html ?><html amp><script async src="https://cdn.ampproject.org/v0.js"></script><script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.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>前述している制約を意識して作っていきましょう。
構造化データについてよくわからない人は、こちらの記事を参考にしてください。
あなたのサイトで構造化データを導入すべきか否かの判断基準について(1)
また作成の参考になるように、AMPProjectページの公式サイトも記載しておきます。こちらはステップバイステップで記載されていてとてもわかりやすいと思います。
▼初めての AMP ページを作成する
www.ampproject.org/ja/docs/get_started/create
こちらに掲載されているサンプルコードは参考になります。以下に引用します。
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>タイトルです</title>
<link rel="canonical" href="http://example.com/original-html.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "タイトル",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- CSS -->
<style amp-custom>
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
<!-- Google系のスクリプト準備 -->
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<h1>AMPページのサンプルです。</h1>
<amp-img src="headline.jpg" alt="ヘッドライン" height="400" width="800"></amp-img>
<p>AMPページのサンプルコードが入っています。</p>
</body>
</html>
AMPページが完成したら、Chromeディベロッパーツールで検証することができます。
AMPページを表示しているタブで右クリック→検証でデベロッパーツールを起動します。
※キーボードショートカットはCtrl + Shift + i (Windows) / Cmd + Opt + i (Mac)
次にディベロッパーツールでConsoleメニューを表示します。
最後にAMPページを表示しているURLのお尻に#development=1をつけてアクセスします。Successと出れば成功です。
今までのおさらいにもなりますが、AMPサイトは下記２点でGoogleアナリティクスにとって厄介です。
上記２点の問題により、GoogleはAMPサイトを「別（サイト）として管理」することを推奨しています。つまり、もう一つAMPサイト用にGoogleアナリティクスを新設するということです。
従って、推奨どおりに行うのであれば、GoogleアナリティクスのプロパティをAMP用にもうひとつ作って、その新しいトラッキングコードを取得しなくてはいけません。
Google アナリティクスのトラッキングコードはJavaScriptでできており、そのままでは動きませんので、下記の対応をする必要があります。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script><amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-*****-*" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>この作業を行った場合、注意事項は下記２点になります。
したがって、AMPを導入する場合は、現在の計測をやめて新たに計測を始めるのだという意識を持つのが良いと思います。
ここまでを読んで「新設したGoogleアナリティクスを、既存サイトとAMPサイトの両方に設置すれば合算されるのでは？」と思った人もいるかも知れません。
しかし、そもそも既存サイトとAMPサイトは別サイトなので（一般的にクロスドメインといわれる状態です）、同じトラッキングタグを張っても、そのままでは数値の信頼性に問題が発生しますし、それぞれ別サイトと認識されます。
残念ながら、現在のところAMPに関わる様々な計測問題を回避する簡単なベストプラクティス（※）は存在していません。
※APIを作成できるレベルのプログラミング知識およびGooglアナリティクスの知識を持ち合わせる人は、下記の記事のように既存のGoogleアナリティクスのままAMP対応することができます。ポイントは「_ga」Cookieに保存されているClientIDを共通にすることです。
▼Google Analytics Client ID In AMP Pages（英語）
www.simoahava.com/analytics/google-analytics-client-id-amp-pages/
英語なので概要をお伝えすると、下記の内容となっています。
ここまで来たら、あとは既存ページからAMPページへリンクのようなものをはります。
具体的には既存ページの<head></head>の中に下記を記載します。
<link rel="amphtml" href="作成したAMP用HTMLのURL" />
これでGoogleがAMPページを認識できるようになります。
最後に、既存ページとAMPページの２つをアップロードして完成です。
なお一般的に、AMPページは/amp/というディレクトリ配下におかれることが多いです。
静的なページの場合、例えば、トップページ/index.htmlのAMPページは/amp/index.htmlとなり、/service/1.htmlの場合は/amp/service/1.htmlとなります。
WordPressなど動的なページの場合は、記事のURLの後ろに/amp/とつけることも多いです。 例えば/service/myservice/というページの場合、AMPページは/service/myservice/amp/というURLになります。
完成したら、Googleの用意したAMPのチェックツールで正しくAMPの実装がでてきるかチェックすることができます。
▼AMPテスト
search.google.com/search-console/amp
AMPの場合、致命的なエラーがあるとGoogleがインデックスすらしてくれません。 ちゃんとエラーを潰しておきましょう。
なお対応ページ数が多い人は、今後お伝えするサーチコンソールや先にお伝えしたChromeを使ったチェック方法もあります。
次回はWordPressでのAMP導入方法についてお伝えします。
「ムダな情報で頭脳を消耗することなく考える時間を確保する」
ウェブのノウハウだけに限らず、広告やマーケティング全般の知識、時には組織論や時事に至るまで、最先端や未来予測などみなさんにとって本当に必要な情報だけをお届けします。
