AMPに対応!Accelerated Mobile Pagesを自動生成

スマートフォンで高速表示を実現する規格「AMP(Accelerated Mobile Pages)」にまめわざが対応しました。
Googleが導入を推奨し、今後の方針によっては検索エンジン上での優遇が期待できるAMPを紹介します。

AMP(Accelerated Mobile Pages)とは?

背景

ネット回線やパソコン性能の向上により、動画などの大容量コンテンツをホームページに導入できるようになりました。
他方、スマートフォンが爆発的に普及、スマホユーザーにも同様に大容量コンテンツを提供するケースが増えています。
モバイル回線とスマートフォンの性能は、パソコンの環境に劣るため、ホームページの表示に時間がかかるなど、ユーザー体験を損なう結果となっています。

モバイルユーザー体験向上が目的

モバイル(スマホ)ユーザーの増加に伴い、Googleは一貫してモバイル検索に力を入れています。
ページの表示速度をランキング要因に追加するなど、モバイルユーザー体験に配慮しています。
今回のAMPもモバイル検索の向上を目的としてGoogleが新設した、大容量コンテンツをモバイル用に整理(取捨選択)して提供するための規格です。
これに適合したページを検索結果で優遇することで、GoogleはAMP導入促進を主導していくと見られます。

面倒の総量を減らす

これまでのモバイル(スマホ)環境は、いわば「ユーザーが面倒を負う」環境でした。
ページが表示されるまでに待たされる、通信容量が消費される、高速な通信に高いお金を払う、といった具合です。
AMPは逆に「開発者が面倒を負う」環境で、開発者がモバイル用の軽量なコンテンツを、一手間かけて作成する必要があります。
総数が少ない「開発者」が面倒を負うことで「面倒の総量」を減らせる、効率的な規格だと言えます。

ガラケー用ホームページ?

かつてモバイル用ホームページと言えばガラケー用サイトを指しました。
ガラケー用ホームページは、一定容量以上の場合は読込を中止する、一部のタグが使えない、など様々な制約があり、その結果として低速回線でも快適なウェブ環境を実現していました。
AMPの発想は、スマホの普及により陳腐化したガラケー用ホームページの哲学に類似しています。
世界が日本に追いついた、とは言い過ぎかも知れませんが、ガラケー用ホームページを作っていた開発者には既視感を覚える人もいると思います。

AMPの現在と未来

AMPがもうすぐ来る?

AMPのプロジェクトは2015年10月にGoogleで発表されました。
2016年春に北米などの一部で検索結果の上部の特別な枠に掲載がはじまり、2016年6月頃には日本でもニュースサイトの掲載がスタートしている模様です。

先日、弊社が運営するホームページ(まめわざ以外)宛に、Google Search Console上でAMP導入を促すメッセージが届きました。
この対象ホームページはニュース系のホームページではないため、これは現在ニュース系ホームページに限定されているAMPの優遇が、近々一般のホームページにも広げられるサインではないかと判断しています。

この他にも、GoogleがスタートしたAMPデモや、構造化データのルール変更など、非ニュース系ホームページへの拡張のサインが随所に見られるようになりました。

現在の効果

ニュースサイトの記事は次のように検索結果の上部に特別枠を設けて表示されます。

ニュースサイトではない弊社の管理サイトでは、現時点では変化がありません(2016年8月29日時点)。
Google Search Console上では、このようにインデックス数や、問題のあるページのエラーが表示されます。
クロール頻度が高く、GoogleがAMPに力を入れていることが伺えます。

Googleは、AMPを一般のホームページに拡張した場合のデモを公開しています(スマートフォンでアクセスする必要があります)。
http://g.co/ampdemo
ここで検索をすると、AMP対応したページに「AMP」マークが付いているのが分かります。
このデモが将来実装時にどのようにチューニングされるのかは分かりませんが、大きく変更されるとは考えづらいです。

未来の効果

AMP導入により、次のような効果(重複可能性もあり)が将来期待できます。

  • 検索結果で代替表示
    一般ページとAMP対応ページがある場合は、検索結果で後者を代わりに優先表示する可能性があります。
    上記のデモで既に実装されているので高確率です。
  • 検索順位の加点要素
    ランキングアルゴリズムで加点要素になり、上位表示に有利になる可能性があります。
    ページの表示速度をアルゴリズムに加えていることから推測すれば、こちらも高確率と思われます。ただし、表示速度の件と同様、効果は薄いかも知れません。
  • 特別枠の拡張
    前述したニュースサイトのように、検索結果の最上部に表示される特別枠(左右にスライドする枠)を一般のホームページにも拡張する可能性があります。

AMPの対応方法(まめわざユーザー向け)

まめわざでページを作成すると、AMP対応ページが自動生成されます。
まめわざユーザーのホームページは、何もしなくてもAMPに対応できます(ただし、最近更新していない場合は、ホームページ内の何かを1度更新する必要があります)。

AMPの作成方法(技術者向け情報)

何をすれば良いのか

ざっくりと言えば次の2ステップです。

  • あるページに対応したAMPページ(圧縮版のページ)を作る
  • 元のページにAMPページの存在を知らせるタグを設置する

例を上げてもう少し具体的に見てみます。

あるページ
http://〇〇.jp/arupage/
をAMP対応する場合、
http://〇〇.jp/arupage/amp.html
というAMPページを用意し、
元ページに
<link rel="amphtml" href="http://〇〇/arupage/amp.html">
のタグを設置してAMPページの存在を知らせます。 

AMPのURLの名付け方

AMPページのURLの決め方は自由なので、例えば
〇〇.jp/index.html
〇〇.jp/page1.html
〇〇.jp/dir/index.html
〇〇.jp/dir/page2.html
というページ構成の場合、

  • 全部をampディレクトリに入れる設計
    〇〇.jp/amp/index.html
    〇〇.jp/amp/page1.html
    〇〇.jp/amp/dir/index.html
    〇〇.jp/amp/dir/page2.html
  • 各ディレクトリ内にampディレクトリを設置する設計
    〇〇.jp/amp/index.html
    〇〇.jp/amp/page1.html
    〇〇.jp/dir/amp/index.html
    〇〇.jp/dir/amp/page2.html
  • ファイル名に接頭語・接尾語をつける設計
    〇〇.jp/index.amp.html
    〇〇.jp/page1.amp.html
    〇〇.jp/dir/index.amp.html
    〇〇.jp/dir/page2.amp.html

といったように自由に設計ができます。

その1)雛形を用意する

定型の入れ物を用意し、title/bodyタグ内とcanonicalだけをページ毎に変更する、という作り方効率的です。
まずは、amp-template.htmlのような雛形ファイルを用意しましょう。

HTMLの構造には厳しい制限があります。まずは以下のようなHTMLをコピーします。

<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル(ページ毎に変更)</title>
<link rel="canonical" href="元ページのアドレス(ページ毎に変更)" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
自由スタイル(ほとんどが各ページ共通。ページ毎に一部追記)
</style>
<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>
<!--アナリティクスが必要な場合↓-->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
ページ内容(ページ毎に変更)
<amp-analytics>
    <script type="application/json">
    {
        "vars": {
            "account": "UA-0000000-1"
        },
        "requests": {
            "pageview": "AMPページのアドレス(ページ毎に変更、ただし非SSLの場合はhttp:なしの//)"
        },
        "triggers": {
            "trackPageview": {
                "on": "visible",
                "request": "pageview"
            }
        }
    }
    </script>
</amp-analytics>
</body>
</html> 

高速化を目的としているため、styleをHTMLに直書きしており、一見すると難解ですが、よく見るとシンプルです。
Analyticsが不要な場合は、headとbody内にあるanalytics用のタグを除去してください。

その2)デバッグ環境を整える

デバッグはGoogle Chromeで行います。利用経験がない場合は、無料なのですぐにインストールしましょう。

  • Google Chromeを立ち上げてキーボードのF12を押す。
    下部か別ウィンドウで「デベロッパーツール」が立ち上がるので、「Console」タブをクリックします。
  • Google ChromeのアドレスバーにチェックしたいAMPのURLを貼り付けて、末尾に「#development=1」を書き足してから開きます。
  • デベロッパーツールのConsoleにエラーが表示されます。

その3)雛形のCSSを整理する

CSSを外部ファイル化しているホームページが多いと思います。
これらをstyle amp-custom内に一旦挿入します。
スタイルの絞り込みを行うので、styleのチェックができるように一部のコンテンツをbody内に仮設した上で以下の3点を行い、スタイルの記述を整理します。

  • デバッグ環境でページを開いて表示されるエラーを解消(!importantが使えない、など一部制限があるため)
  • モバイル用のスタイルなので、レスポンシブウェブデザインを使用している場合は、PC・モバイルの記述の統合や取捨選択を行う
  • 使っていないスタイルを除去する。
    使うかどうかわからないスタイルはひとまず残して、後から除去する。

以上で雛形が完成です。

その4)各ページの内容を置換しながら作成する

雛形を上書きしないようにコピーしてから各ページを作成します。以下の、ページ固有の部分を設定します。

  • タイトル
  • canonical(httpからはじまるURL)
  • コンテンツ(body内)

デバッグ環境で作成したページを閲覧した際に表示されるエラーを解消します。
特に置換や除去が必要になるコンテンツは以下です。

  • imgタグ
    amp-imgタグに置換します。
    <amp-img src="" height="360" width="480" layout="fixed" alt="説明"></amp-img>
    画像のlayout/width/height属性を次表のように設定する必要があります。 
  • scriptタグ
    あらゆるscriptタグを除去します。
  • Javascriptで描写していたコンテンツ
    除去するか、HTML化して静的に表示するかを選びます。
  • formタグとその中身
    除去します。
    問合せページのようにformが主役のページの場合は「AMP対応しない」という選択肢を検討します。
  • Youtube
    次のように置換します。

    <iframe width="560" height="315" src="https://www.youtube.com/embed/x2OE93pZtmg" frameborder="0" allowfullscreen></iframe>

    <amp-youtube data-videoid="x2OE93pZtmg" layout="responsive" width="560" height="315"></amp-youtube>

    また、次のscriptをhead内に挿入します。
    <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> 
  • style属性
    あらゆるstyle属性を除去します。
    Javascriptで表示・非表示を切り替えるようなコンテンツで、style="display:none"を使っている場合は、全て表示or1番目のみを表示のいずれかを決定します。
  • href="javascript:〇〇"
    あらゆるhref="javascript:〇〇"を除去します。
2016年8月29日時点でエラーの出ない画像のlayout/width/height指定例
layout属性widthheight
なしなし指定
指定指定
fixed指定指定
responsive指定指定
fillなし
(指定しても無視される)
なし
(指定しても無視される)
fixed-heightなし指定

その5)内部リンクのパスを変更する

内部リンクが相対リンクで設定されている場合は、AMPのURLの名付け方によっては変更が必要です。
内部リンク先を一般ページにするかAMP対応ページにするかは、特にルールはないようなので各自の方針に依ります。
AMP対応ページを、検索エンジンからのランディングページという位置づけにしたい場合は、内部リンク先は一般ページが適当でしょう。
一方、スマホ対応サイトの代わりにAMP対応ページを利用したい場合は、内部リンク先をAMP対応ページにするのが適当です。

その6)元のページにamphtmlをセットする

元のページのhead内に以下のlinkタグを設置し、対応するAMPがあることを知らせます
<link rel="amphtml" href="AMP対応ページ" /> 

番外)構造化データは無視

構造化データ(ホームページや各ページ内容が何かをschema.orgに則って記述する説明欄)は、AMPのルールで必須項目でした。
ニュース記事などを表示する特別枠にAMP対応ページを掲載するため、記事の概要・著者・出版社などの情報を構造化データとして提供させるためと思われます。
最近、この構造化データが「必須」から「推奨」に変更され(「エラー」は「警告」に変更され)、AMPを一般のホームページに適用するサインと考えられています。
我々一般のホームページは、もともと適合しないニュース記事用のルールは無視するしかありません。
2016年8月29日時点では、構造化データがないとGoogle Search Consoleで警告が表示されますが、これはいずれ是正されると思われます。

2016/8/29