AMPページ用HTMLの書き方を調べてみました

wordpressの方では「AMP」というプラグインを入れて対応したのですが、wordpress以外のサイトでAMP対応をする必要があったため、書き方を調べて対応しました。自分で書くと結構大変だったので、備忘録的に書いていきます。

AMPページ用HTMLを書くときの注意点

AMPは今も日々進行中のプロジェクトで、途中で仕様が変更される場合があります。ネット上でもAMP対応HTMLのサンプルがありますが、中には記述が古いものも存在するので注意が必要です。

最新情報を知るには、AMPプロジェクトの公式サイトを見るのが一番良いです。

AMPページHTMLの注意点など

AMPページHTMLでは、多くの注意点がありますが、主に以下のような点に注意する必要があります。
・必須となる要素やルールがある
・禁止されているタグがある
・CSSはインラインで記述
・Javascriptは使えない

それでは、順番に見ていきましょう。

必須となる要素やルールがある

マークアップをするにあたり、守らなければいけないルールがあります。

  • <!doctype html>で書き始める
  • <html ⚡>または<html amp>と記述する
  • <head>内の初めに<meta charset=”utf-8″>を記述する
  • <head>内に<meta name=”viewport” content=”width=device-width,minimum-scale=1″>を記述する
  • canonicalの設定をする
    <link rel="canonical" href="オリジナルページのURL" />
    ※基本的に通常のwebページがあり、それのAMPページを用意するという形が一般的だと思いますが、AMPページ単独で公開することも可能です。そのには、hrefにAMPページ自身のURLを記述します。
  • boilerplateを記述
    <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>
    以上のコードはAMPページのお決まりとして記述する必要があります。なお長いですが改変するとエラーになりますので、そのままコピペで問題ありません。
  • JSON-LDの指定が必須。クローラーに正しく情報を伝えるためにschema.org構造化データの記述が必須となっています。
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "BlogPosting", //BlogPosting または NewsArticle
        "headline": "サンプルタイトル", //タイトル
        "image": {
          "@type": "ImageObject",
          "url": "https://www.hogehoge.com/hoge.jpg",
          "height": 800, // 696px以上
          "width": 800
        },
        "datePublished": "2016-01-01T18:00:00+00:00", //記事公開時間 ISO8601フォーマット
        "dateModified": "2016-01-01T18:00:00+00:00",  //記事更新時間 ISO8601フォーマット
        "author": {
          "@type": "Person",
          "name": "サンプルさん" //著者名
        },
        "publisher" {
          "@type": "Organization",
          "name": "SAMPLE SITE", //サイト名
          "logo": {
            "@type": "ImageObject",
            "url": "http://www.hogehoge.com/logo.png",
            "width": 400, // 600px以下
            "height": 40 // 60px以下
          }
        }
      }
    </script>
  • <head>内の一番最後に以下を記述
    <script async src="https://cdn.ampproject.org/v0.js">

禁止されているタグがある

AMP HTMLでは使用が禁止されているタグがいくつかあります。

Tag AMP HTMLでのステータス
script application/ld+jsonのみ使用可能(但し、AMPランタイムを読み込むには必須)
base 使用禁止
img amp-img に置き換え
video amp-video に置き換え
audio amp-audio に置き換え
iframe amp-iframe に置き換え
frame 使用禁止
frameset 使用禁止
object 使用禁止
param 使用禁止
applet 使用禁止
embed 使用禁止
form 使用禁止。将来的にサポートされる予定
input elements input, textarea, select, option 使用禁止
button 使用可能
style boilerplateで必要なものを除き、一つだけ使用可能
使用の際はamp-customが必須
link rel=”canonical” は使用可能。外部スタイルシートファイルの読み込みは禁止
meta http-equivは使用禁止。
a javascript: で始まるものは禁止。target属性は _blankのみ使用可能
svg ほとんどのSVG要素が使用可能

CSSはインラインで記述

CSSはlink属性を使った外部ファイルの読み込みが禁止されています。その為、すべてをインラインで記述します。style タグはと書き、その中に必要なもの書いていきますが、以下のルールに従う必要があります。

  • 容量は50KBまで
  • @font-face, @keyframes, @media, @supports は使用可能
  • @charset, @import は使用禁止
  • !important は使用禁止
  • ユニバーサルセレクタ(*)は使用禁止
  • :not() セレクタは使用禁止
  • amp-で始まる要素に疑似要素の使用禁止
    a:hover, div:last-of-type は使用可能
    amp-img:hover, amp-img:last-of-type は使用禁止
  • behavior、-moz-binding は使用禁止
  • filter は使用禁止

それほど強い規制があるわけではないので、ある程度自由に書けそうですね。

Javascriptは使えない

Javascriptは使用禁止です。使えない替わりに、拡張コンポーネントが幾つか用意されています。この拡張コンポーネントを使うことにより、Google Analiticsや、カルーセル表示など、通常Javascriptで実装するようなものが使用できるようになります。

拡張コンポーネントの使い方

Javascriptが禁止されているAMPページで、カルーセル表示などリッチなUIを実現するために、拡張コンポーネントが用意されています。まずは使いたい拡張コンポーネント用のscriptを内で読み込み、その後amp-から始まる独自タグで実装します。

youtubeの場合

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

<head>内に上記のタグを設置し、

<amp-youtube
    data-videoid="mGENRKrdoGY"
    layout="responsive"
    width="480" height="270"></amp-youtube>

でyoutubeのIDと縦横の幅を指定します。layout=”responsive” を付けておくと、解像度に合わせて自動的にアスペクト比を保ったまま拡大・縮小してくれます。

カルーセル表示の場合

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

<head>内に上記タグを設置し、

<amp-carousel width=300 height=400>
    <amp-img src="my-img1.png" width=300 height=400></amp-img>
    <amp-img src="my-img2.png" width=300 height=400></amp-img>
    <amp-img src="my-img3.png" width=300 height=400></amp-img>
</amp-carousel>

で画像を指定します。とても簡単ですね。
これ以外にも、twitter、facebook、instagramなど沢山用意されているので、公式サイトでチェックしてみましょう。

アクセス解析(Google Analytics)の設置方法

AMPページでは前述した拡張コンポーネントを使えばアクセス解析の設置が出来ます。
Google Analytics以外にも、Adobe Analyticsなども使えるようですが、一般的にはGoogle Analyticsだと思うので、そちらの設置方法を見ていきます。

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

<head>内に、お決まりのscriptを記述します。

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

と書きます。UA-XXXX-Yは自分のanalyticsプロパティIDに変更してください。
これでpageviewは取れますが、イベントトラッキングにも対応しています。

<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      }
    }
  }
}
</script>
</amp-analytics>

上記例だと、#header 要素をクリックしたら、「header-click」というイベントの値が計測されます。詳しくはanalyticsのガイドに書いてあります。

広告の設置方法

AMPページでは拡張コンポーネントを使えば、Adsenseに代表される広告の設置も可能です。
<head>内に以下のコードを挿入します。

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

Adsenseの場合は表示したい箇所に以下のコードを設置すればOKです。「data-ad-client」と「data-ad-slot」をそれぞれ変更してください。

<amp-ad width=300 height=200
    type="adsense"
    data-ad-client="ca-pub-8125901705757971"
    data-ad-slot="7783467241">
</amp-ad>

当初は海外のアドネットワークが多かったですが、現在は「Nend」「i-Mobile」など日本のアドネットワークにも対応しています。

<amp-ad width="320"
  height="50"
  type="nend"
  data-nend_params='{"media":82,"site":58536,"spot":127513,"type":1,"oriented":1}'>
</amp-ad>

対応しているアドネットワーク一覧は公式サイトにて確認できます。

エラーチェック方法

一通りマークアップが終わったら、エラーがあるかどうかをチェックします。いくつかの方法でチェックできます。

Chromeのデベロッパーツールを使う

Chromeのデベロッパーツールで、AMP対応が正しく出来ているかどうかをチェックが可能です。

Chromeのデベロッパーツール

Chromeを開き「表示 > 開発/管理 > デベロッパーツール」を選択し、デベロッパーツールを表示させます。

エラーがない状態

AMPページを開き、URLの最後に#development=1を付ければエラーチェックができます。
上記画像のようにAMP Validation Successfulと出ていれば問題ありません。

CHROMEのエクステンションを使う

またしてもChromeですが、ウェブストアでAMP Validatorというプラグインが公開されています。

AMP Validator

これを使えば#development=1を付けなくても、AMPページのエラーチェックができます。

WEB版の公式バリデーションツールを使う

最近、web版の公式バリデーションツールが公開されました。

The AMP Validator

こちらは、AMPページのURLを入力するだけで、エラーチェックが出来るので、Chrome以外のブラウザでも使うことができます。

構造化データ(schema.org)のエラーもチェックしよう

上記で紹介したエラーチェックツール類は、AMPに対応したマークアップが出来ているかどうかのチェックは出来ますが、構造化データにエラーがあるかまではチェックしてくれません。AMPのチェックが終わった後には構造化データのチェックもしておきましょう。

AMPを取り巻く環境について

今まではニュースやブログ記事が中心となって進んできたAMPですが、ECサイトまでその波が押し寄せてきました。大手ECサイトeBayで商品一覧ページのAMP対応実験を行っているとの事で、今後はECサイトでも対応が必須になってくるかもしれません。