【プレミアム】AMPは効果があるのか?実際の事例と導入方法は?(3) FavoriteLoadingあとで読む

: 事務局
AMP導入について迷っている人へ。AMPについての導入基準をお伝えしています。3回目はAMP導入の手順と制約および記述方法についてまとめています。

AMP

画像:Pixabay

目次

AMPページの作成方法

AMPの導入とはすなわち<html amp>というフォーマットのHTMLを用意することです。

ところが、<html amp>の規格は表示スピードを速くするために画像やJavaScriptなどに大きな制約があるため、例えばGoogleアナリティクスなどはそのまま入れても動かないなどの現象があります。

そこで、AMPの導入は下記2ステップで進めましょう。

  1. AMPの制約の全体像を知る
  2. AMPページ導入手順を知る

1.AMPにかかる制約の全体像を知る

以下にAMPの制約と記述方法について簡単にまとめますので、まず概要を理解しておきましょう。

※GitHubにはAMPのサンプルHTMLが公開されています。

github.com/ampproject/amphtml/tree/master/examples/metadata-examples

AMPページの制約

・canonicalタグ

AMPページは一般的に元データのコピーなので、オリジナルのページを指し示す必要があります。

以下のように記載します。

<link rel="canonical" href="オリジナルページのURL" />

もしオリジナルページがないならば、今回作成しているAMPページ自身のURLを指し示します。

・metaタグ

以下2つのタグを必ず入れます。あとhttp-equivは使えません。それ以外は自由です。OGPタグなどは普通に記載してOKです。

1.文字コード指定

<meta charset="utf-8">

を<head>タグの直下に入れます。つまりUTF-8限定です。

2.viewport

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

を<head>タグ内部に入れます。

・css

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)は必ず指定しておく必要があります。

・iframe

AMPではそのままiframeを使うことができず、amp-iframeを使います。
amp-iframeには以下3つの制約があります。

  • ページの下の方に配置する。具体的にはページ上端600pxより下か、ページサイズの75%より下に配置する。
  • フレーム内に配置するリソースはHTTPS形式で取得する。
  • 以下コードを<head></head>ブロックの中に記載する。
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

・form

formがあるようなページをAMP化することは少ないと思いますが、もし対応する場合は、下記の制約があります。

・<head>タグ内部に記載。

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

・formの記述とルール

<form method="post" action-xhr="https://example.com/subscribe" target="_top">

  • postメソッドを使う場合はaction-xhrを指定する
  • targetを入れる(Googleのキャッシュサーバーに設置されるので、どの画面に遷移するか指定する必要がある)
    • _blankは新しいウィンドウ。_topはページトップに遷移する
  • 使えるのは<text><textarea>, <select>, <option>, <fieldset>, <label>のみ

▼amp-form -AMP Project公式ページ(英語)

www.ampproject.org/docs/reference/components/dynamic/amp-form

・JavaScript

JavaScriptは使えないと思った方がよいです。

<script>タグで使えるものは、JSON-LDを記述するための<script type=”application/json”>と、AMP用に特別に用意されたいくつかの非同期処理のみです。

なぜ非同期処理かというと、表示を早くするためです。AMP用に特別に用意されたいくつかの非同期処理を使って、通常JavaScriptを使わないと動かないGoogle アナリティクスなどの解析ソフトや、YouTubeなどの動画埋め込みなどに対応できるようになっています。

用意されている非同期処理の一覧はこちらです。

▼Components / Tags -AMP Project公式ページ(英語)

www.ampproject.org/docs/reference/components

ここでは良く使われる以下について解説します。

– Googleアナリティクス

AMPページでは通常のJavaScriptが使えないため、そのままではGoogleアナリティクスを設置することができません。

詳しくはAMP導入手順「Googleアナリティクスのプロパティ作成など事前準備をする」でお伝えしますが、ざっくり言うと以下3ステップで導入が可能です。

1.AMPページ計測専用の別プロパティを用意する。
今までのGoogleアナリティクスのタグではなく、新規にタグを取得することが推奨されています。理由はAMPページはまだ発展途上の技術ですし、Google社のキャッシュサーバーなどにも設置されるため、Cookieの管理が複雑になり、専門的な対応をしないと正しい計測が難しいからです。

▼アナリティクス 日本版 公式ブログ: Google アナリティクスが AMP (Accelerated Mobile Pages)のサポートを開始
analytics-ja.blogspot.jp/2016/02/google-amp-accelerated-mobile-pages.html
2.<head>タグ内部に以下コードを挿入。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
3.<body>タグ内部に以下コードを設置。
<amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-*****-*" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>
※ “UA-*****-*”の“*”の部分は、1で作成したアナリティクスプロパティのコードに置き換えます。
– 広告表示

JavaScriptを使う広告表示もそのままではやはり動きません。

そのため多くの広告主側でAMP対応を進める必要がありますが、アドセンス(Google Adsense)は既にAMP対応しています。以下の2ステップで対応可能です。

  • 1.<head>タグ内部に以下コードを記載。
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
  • 2.広告を表示したい部分に以下のコードを貼り付け、clientとslot内の”*”の部分にアドセンスからコードを取ってきて置き換える
    <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の埋め込み

YouTubeもJavaScriptが使えないため普通には埋め込めません。以下の2ステップで導入が可能です。

  • 1.<head>タグ内に記述。
    <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js">
  • 2.動画を設置したい場所に記述。
    <amp-youtube> data-videoid="zuq7RQ3P8zk" layout="fixed" width="xxx" height="yyy"> </amp-youtube>

    data-videoidの値は、youtubeの動画idを指します。layoutはfixedの場合xxxは幅、yyyは高さです。他にもnodisplayやresponsiveなどを設定することが可能です。

参考:amp-youtube – Accelerated Mobile Pages Project

– vimeoの埋め込み

vimeoもJavaScriptが使えないため普通には埋め込めません。以下の2ステップで導入が可能です。

  • 1.<head>タグ内に記述。
    <script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>
  • 2.動画を設置したい場所に記述。
    <amp-vimeo data-videoid="27246366" layout="responsive" width="500" height="281"></amp-vimeo>
    data-videoidの値は、vimeoの動画idを指します。layoutはfixedの場合xxxは幅、yyyは高さです。他にもnodisplayやresponsiveなどを設定することが可能です。

参考:amp-vimeo – Accelerated Mobile Pages Project

– Facebookの投稿埋め込み

AMP HTML内にFacebookの投稿を埋め込む際にはamp-facebookタグを使います。以下2ステップで対応可能です。

  • 1.<head>タグ内部に記述。
    <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
  • 2.投稿を埋め込みたいところに挿入。
    <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をコピー&ペーストで取得が可能です。

– Twitter投稿の埋め込み

AMP HTML内にTwitterの投稿を埋め込む際にはamp-twitterタグを使います。以下2ステップで対応可能です。

  • 1.<head>タグ内部に記述。
    <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
  • 2.投稿を埋め込みたいところに下記コードを設置します。
    <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>&mdash; ウェブ担当者通信 (@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タグを使います。以下2ステップで対応可能です。

  • 1.<head>タグ内部に記述。
    <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
  • 2.投稿を埋め込みたいところに下記コードを設置する。
    <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について例を用いてご説明します。
以下2ステップで対応可能です。

1.<head>タグ内部に記述。
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
2.TwitterかFacebookかで下記作業を行う
【Twitterの場合】

シェアボタンを設置したい場所に以下のコードを入れる。

<amp-social-share type="twitter"></amp-social-share>

Twitterの場合は自動的にページのタイトルなどを取得してくれるので上記で問題なく動きます。

【Facebookの場合】

Facebookは一手間かかります。ひょっとするとFacebookはAMP Projectに参加していないからかもしれません。
手順は下記です。

1.Facebookのapp_idを取得する。
app_idとは、あなたの会社固有で割り当てられるIDです。このIDは主に開発で使うのですが、今回も必須です。
app_idの取得方法はこちらのページが詳しいです。
参考:【2017年版】Facebook App ID(アプリID)の取得方法 – Suzaku(朱雀)
2.シェアボタンを設置したい場所に以下のコードを入れる。
<amp-social-share type="facebook" data-param-app_id="*********"></amp-social-share>
1で取得したappi_idを*********のところに入れて完成です。

2.AMP導入手順を知る。

では、いよいよここからAMPページを作成していきます。
AMP導入手順としては、下記5ステップになります。

  1. AMPページの基礎を作成する
  2. Googleアナリティクスのプロパティ作成など事前準備をする
  3. AMPページにGoogleアナリティクスなどを導入して完成させる
  4. 既存ページにAMPページとの関係を記述する
  5. サーバーにアップロードして公開する

AMPページの基礎を作成する

では早速ページの作り方を見ていきましょう。
チェックリストを作りましたので、参考にしてください。

【必須の設定】

1行目のdoctype
<!doctype html>
2行目<html>は以下いずれか
<html ?>
<html amp>
<head>タグ内部
AMPであることを明示
<script async src="https://cdn.ampproject.org/v0.js"></script>
以下2行を追加
<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>
<meta>タグ
chasetとcanonicalとviewportを入れる。
参考:AMPの制約と記述方法 canonicalタグmetaタグ
CSS
CSSは<<style amp-custom></style>の中にベタで展開する。
参考:AMPの制約と記述方法 CSS
閉じタグ
通常のHTMLと一緒
画像は<amp-img>タグに置き換える。
画像の大きさ(width, height)は必ず指定する。
参考:AMPの制約と記述方法 画像

【やっておいたほうがいい設定】

  • 構造化データをJSON-LDでマークアップする
  • Googleアナリティクスを導入する
  • ソーシャルシェアボタンを導入する

前述している制約を意識して作っていきましょう。
構造化データについてよくわからない人は、こちらの記事を参考にしてください。
あなたのサイトで構造化データを導入すべきか否かの判断基準について(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>

完成したらChromeでチェック

AMPページが完成したら、Chromeディベロッパーツールで検証することができます。

AMPページを表示しているタブで右クリック→検証でデベロッパーツールを起動します。
※キーボードショートカットはCtrl + Shift + i (Windows) / Cmd + Opt + i (Mac)

次にディベロッパーツールでConsoleメニューを表示します。

最後にAMPページを表示しているURLのお尻に#development=1をつけてアクセスします。Successと出れば成功です。

Googleアナリティクスのプロパティ作成など事前準備をする

今までのおさらいにもなりますが、AMPサイトは下記2点でGoogleアナリティクスにとって厄介です。

  • Googleのキャッシュサーバーに設置される。つまり別ドメインになってしまう。
  • JavaScriptがそのままでは動かない。

上記2点の問題により、GoogleはAMPサイトを「別(サイト)として管理」することを推奨しています。つまり、もう一つAMPサイト用にGoogleアナリティクスを新設するということです。

従って、推奨どおりに行うのであれば、GoogleアナリティクスのプロパティをAMP用にもうひとつ作って、その新しいトラッキングコードを取得しなくてはいけません。

AMPページにGoogleアナリティクスなどを導入して完成させる

Google アナリティクスのトラッキングコードはJavaScriptでできており、そのままでは動きませんので、下記の対応をする必要があります。

<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点になります。

  • 既存のサイトとAMPサイトでアクセスを二分するので、既存サイトのアクセス数は減る。
  • 新設したGoogleアナリティクスはAMPサイトだけに導入されるので、既存サイトとの合算や行き来を分析できない。

したがって、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/

英語なので概要をお伝えすると、下記の内容となっています。

  • なぜGoogleが新しいGoogleアナリティクスの設置をおすすめするかというと、AMPはクロスドメインと同じ状態になってしまうのに、JavaScriptが動かないので簡単にクロスドメイン設定ができないため。
  • つまり多くのユーザーが誤った設定をしないように配慮している。
  • しかし上記の理由を知り、amp-analyticsの仕様を応用すれば対策はある。なお自社サーバーはhttps対応済みが前提。
  • 具体的には、まず自社サイトにAPIリクエストに答えるプログラムを設置する。このプログラムの主な目的は、ユーザーのブラウザを調査して、自社サイトの「_ga」Cookieに保存されたClientIDをJSONで返すこと。もし存在しない場合はanalytics.jsと同じルールで作成・保存した上で返すことである。
  • AMPのアクセス解析amp-analyticsの仕様で、jsonファイルをコンフィグレーションとして読み込めるため、上記のAPIへのリクエストを行い、ClientIDの入ったJSONを取得する。
  • もしAMPで公式サポートされたGoogleTagManagerを活用する場合は、先ほどの自作APIの中に、GoogleTagManagerに関するJSONも入れてマージして返すと良い。
  • どちらにせよ重要なポイントは自社サイトに保存されている_gaの中身(ClientID)をJSONとしてAMP側に渡すことである。

既存ページにAMPページとの関係を記述する

ここまで来たら、あとは既存ページからAMPページへリンクのようなものをはります。

具体的には既存ページの<head></head>の中に下記を記載します。

<link rel="amphtml" href="作成したAMP用HTMLのURL" />

これでGoogleがAMPページを認識できるようになります。

サーバーにアップロードして公開する

最後に、既存ページとAMPページの2つをアップロードして完成です。

なお一般的に、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になります。

AMPテストツールでチェック

完成したら、Googleの用意したAMPのチェックツールで正しくAMPの実装がでてきるかチェックすることができます。

▼AMPテスト
search.google.com/search-console/amp

AMPの場合、致命的なエラーがあるとGoogleがインデックスすらしてくれません。 ちゃんとエラーを潰しておきましょう。

なお対応ページ数が多い人は、今後お伝えするサーチコンソールや先にお伝えしたChromeを使ったチェック方法もあります。

次回はWordPressでのAMP導入方法についてお伝えします。

事務局
この記事を書いた人: 事務局

「ムダな情報で頭脳を消耗することなく考える時間を確保する」
ウェブのノウハウだけに限らず、広告やマーケティング全般の知識、時には組織論や時事に至るまで、最先端や未来予測などみなさんにとって本当に必要な情報だけをお届けします。


投稿アイコンを選んでください