AMP HTML(Accelerated Mobile Pages)の導入方法について解説|おちゃカメラ。

本日限定

Amazonタイムセール開催中

セール商品を見に行く

AMP(Accelerated Mobile Pages) HTMLとは、モバイル端末で高速に表示するためのHTMLファイルです。

仕様で定められた軽量なウェブページ(=AMP HTML)を用意しておくと、専用のサーバーからキャッシュして配信してくれます。

ご存知のように、通常のウェブページでは、配信元のWebサーバーへアクセスするのですが、AMPの場合は予めキャッシュされたページを配信してくれます。だから表示が短時間で済むわけですね。

ということで、今回はAMP HTMLの導入方法を分かりやすく解説してみたいと思います。

AMP HTMLの導入方法

AMP HTMLを導入するにはCreate Your AMP HTML Pageに従ってAMP HTMLを記述していきます。通常のHTMLとの主な違いは以下の通りです。

通常のHTMLとAMP HTMLに互いのパスを追記する
AMP HTMLのheadタグにお決まりのタグを追加
カスタムエレメンツに置き換える

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

1.通常のHTMLとAMP HTMLに互いのパスを追記する

AMPを導入する際には、1つのページにつき、通常のHTMLとAMP HTMLをそれぞれ作成します。まずは通常ページ(例:./index.html)とAMP版ページ(例:./amp/index.html)を用意してみましょう。

次に、通常のHTMLのheadタグにAMP HTMLの場所を示すパスを追記します。更にAMP HTMLには通常のHTMLのパスを追記していきます。

パスの記述例としては以下のようになります。

通常のHTML

./index.html

<!DOCTYPE html>
  <html>
    <head>
      <!--AMPのパスを以下のように追記する-->
      <link rel="amphtml" href="./amp/index.html">
    </head>
    ...

AMP版 HTML

./amp/index.html

<!doctype html>
  <html ⚡>
    <head>
      <!--通常ページのパスを以下のように追記する-->
      <link rel="canonical" href="../index.html" >
    </head>
    ...

通常のHTMLに対して行う変更作業は、以上で完了です。AMP HTMLについては引き続き2をご覧ください。

2.AMP HTMLのheadタグにお決まりのタグを追加

headタグ内には以下のコードのようにgoogle AMPで定められたmetaタグやjsを記述する決まりとなっています。まずは大まかに見ていきましょう。

./amp/index.html

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <!--(必須)通常のhtmlファイルの場所を示すパスを指定する-->
    <link rel="canonical" href="../index.html" />
    <!--(必須)viewportの指定-->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <!--(必須。値は記事に応じて変化)構造化データ。検索結果として表示される情報をJSON形式で定義する-->
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "BlogPosting",
          "headline": "(記事のタイトル)",
          "description": "(記事の説明)",
          "mainEntityOfPage":{
              "@type":"WebPage",
              "@id":"(記事のURL)"
          },
          "datePublished": "(投稿日時)",
          "dateModified": "(変更日時)",
          "image": {
            "@type": "ImageObject",
            "url": "(アイキャッチとなる画像のURL)",
            "width" : "(アイキャッチとなる画像の幅。696px以上が必須)",
            "height" : "(アイキャッチとなる画像の高さ)"
          },
          "author": {
              "@type": "Person",
              "name": "(著者名)"
          },
          "publisher": {
              "@type": "Organization",
              "name": "(サイト名)",
              "logo": {
                "@type": "ImageObject",
                "url": "(サイトロゴのURL)",
                "width": "(サイトロゴの幅。600px以内が必須)",
                "height": "(サイトロゴの高さ。60px以内が必須)"
              }
          }
        }
    </script>
    <!--(必須)AMPデフォルトのスタイル指定-->
    <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>
    <!--(任意)googleアナリティクスのjavascript。下記のamp-analytics-0.1.js、v0.jsの順番で読み込む-->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <!--(必須)AMP ProjectからCDN配信されるJavaScriptランタイム-->
    <!--尚、AMPでは外部jsの読み込みは禁止されている-->
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!--(任意)オリジナルのcssをここで指定。AMPではCSSの外部読み込みは禁止されているので直接ここへスタイルを記述していく-->
    <style amp-custom>
      .example{font-size: 100%;}
    </style>
  </head>
  <body>
    <!--(任意)google analyticsのトラッキングコード-->
    <amp-analytics type="googleanalytics" id="google-analytics">
      <script type="application/json">
      {
        "vars": {
          "account": "UA-123456789"
        },
        "triggers": {
          "trackPageview": {
            "on": "visible",
            "request": "pageview"
          }
        }
      }
      </script>
    </amp-analytics>
    <!--(任意)以下、コンテンツの例-->
    <h1>Welcome to the AMP page</h1>
    <!--imgタグはカスタムエレメンツamp-imgで記述する。詳しくは後述-->
    <amp-img src="./sample.jpg" width="200" height="100"></amp-img>
  </body>
  ...

それでは各コードについて詳しく見ていきたいと思います。

外部jsやCSSの読み込みは不可

AMPでは外部のjavascriptやcssファイルの読み込みが禁止されています。cssはheadタグの<style amp-custom></style>内で直接記述が可能ですが、javascriptに関しては記述できません。

構造化データについて

上記のHTMLヘッダに含まれる構造化データ(schema.org)とは、AMPが検索結果として表示される情報の塊です。構造化データは記述のルールが幾つかあります。海外SEO情報ブログさんが非常に詳しい内容をまとめていらっしゃいますので、参照してください。

2016年2月追記：構造化データが必須では無くなった

AMP HTMLの構造化データは必須条件から外れ、任意に変更されました。

海外SEO情報ブログ - AMPに構造化データはもはや不要、Search Consoleのエラーレポートからも外れる

ただし、検索結果のトップニュース枠に表示されるようなAMPカルーセル(後述)には、これまで通り構造化データが必要です。

構造化データは、いくつかのタイプがあります。AMPがサポートしている構造タイプは全部で３種類です。

前述したHTMLの記述例では、ブログの記事を意味するBlogPostingを指定してみました。

構造化データについて
Googleモバイル検索のAMPカルーセルに掲載させるために必要な構造化データ/schema.org

AMP向け構造化データの仕様
Top Stories with AMP | Structured Data | Google Developers

schema.org/BlogPostingの仕様
schema.org/BlogPosting | schema.org

AMPカルーセルで定めれた画像サイズの制約

googleの検索結果として表示されるAMP HTMLページをAMPカルーセルと呼びます。AMPカルーセルで定められているschema.orgの仕様については、Google AMP Projectの「Publishing AMPs for the Top Stories carousel」をご覧ください。決まりごとは沢山ありますが、特に注意すべき点はロゴ画像やアイキャッチのサイズです。以下のように画像の幅と高さに制約があります。

Markup specification
Articleの項目では、画像は幅696px以上と定められている
Logo Guidelines
ロゴ画像のガイドラインでは、ロゴ画像は幅600px以下、高さ60px以下と定められている

3.カスタムエレメンツに置き換える

bodyタグの内容については、一部、AMPで定められたカスタムエレメンツというAMP独自のタグに置き換える必要があります。

HTMLのタグ	AMP HTMLで使用するタグ
img	amp-img
video	amp-video
audio	amp-audio
iframe	amp-iframe

例えばimgタグは以下のような記述となります。

通常のHTML

./index.html

1	<img src="./sample.jpg" width="200" height="100" />

AMP HTMLでは以下のようになります。

./amp/index.html

1	<amp-img src="./sample.jpg" width="200" height="100"></amp-img>

入力必須の属性があることに注意

amp-imgではsrc、width、heightが必須となります。

カスタムエレメンツに置き換わっているもの

その他カスタムエレメンツに置き換わっているものはGithubのampprojectにサンプルがありますので以下をご覧ください。

一例を挙げますと、youtubeやvimeoなどはカスタムエレメンツamp-youtubeやamp-vimeoを使用する決まりになっています。サンプルコードのyoutube.amp.htmlやvimeo.amp.htmlをご覧ください。これらのカスタムエレメンツもやはりwidthやheight属性が必須となっています。

ampproject/amphtml - examples

AMP HTMLの記述を確認する方法

AMPの記述が完了したら、最後にAMP記述をチェックしていきます。手順は簡単にまとめると、以下３つの流れで行います。

Chrome Developer ToolsでAMP HTMLの検証
構造化データの検証
Google Search Consoleでクロールされたか確認

詳しくは下記記事をご覧ください。

当ブログ
Google AMP HTMLが正しく記述されたかチェックする方法

感想。AMPの導入でつまづいた所

画像や動画などを載せている記事では、AMP導入のハードルになるのではないかと思われます。なぜかというと、AMPの場合はwidth属性やheight属性の指定は記述必須となっているからです。特に画像をAPIやプラグイン経由で挿入している記事では、プラグインの見直しが必要になるケースもあるでしょう。