スマートフォンで高速表示を実現する規格「AMP(Accelerated Mobile Pages)」にまめわざが対応しました。
Googleが導入を推奨し、今後の方針によっては検索エンジン上での優遇が期待できるAMPを紹介します。
ネット回線やパソコン性能の向上により、動画などの大容量コンテンツをホームページに導入できるようになりました。
他方、スマートフォンが爆発的に普及、スマホユーザーにも同様に大容量コンテンツを提供するケースが増えています。
モバイル回線とスマートフォンの性能は、パソコンの環境に劣るため、ホームページの表示に時間がかかるなど、ユーザー体験を損なう結果となっています。
モバイル(スマホ)ユーザーの増加に伴い、Googleは一貫してモバイル検索に力を入れています。
ページの表示速度をランキング要因に追加するなど、モバイルユーザー体験に配慮しています。
今回のAMPもモバイル検索の向上を目的としてGoogleが新設した、大容量コンテンツをモバイル用に整理(取捨選択)して提供するための規格です。
これに適合したページを検索結果で優遇することで、Googleは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に対応できます(ただし、最近更新していない場合は、ホームページ内の何かを1度更新する必要があります)。
ざっくりと言えば次の2ステップです。
例を上げてもう少し具体的に見てみます。
あるページ
http://〇〇.jp/arupage/
をAMP対応する場合、
http://〇〇.jp/arupage/amp.html
というAMPページを用意し、
元ページに
<link rel="amphtml" href="http://〇〇/arupage/amp.html">
のタグを設置してAMPページの存在を知らせます。
AMPページのURLの決め方は自由なので、例えば
〇〇.jp/index.html
〇〇.jp/page1.html
〇〇.jp/dir/index.html
〇〇.jp/dir/page2.html
というページ構成の場合、
といったように自由に設計ができます。
定型の入れ物を用意し、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用のタグを除去してください。
デバッグはGoogle Chromeで行います。利用経験がない場合は、無料なのですぐにインストールしましょう。
CSSを外部ファイル化しているホームページが多いと思います。
これらをstyle amp-custom内に一旦挿入します。
スタイルの絞り込みを行うので、styleのチェックができるように一部のコンテンツをbody内に仮設した上で以下の3点を行い、スタイルの記述を整理します。
以上で雛形が完成です。
雛形を上書きしないようにコピーしてから各ページを作成します。以下の、ページ固有の部分を設定します。
デバッグ環境で作成したページを閲覧した際に表示されるエラーを解消します。
特に置換や除去が必要になるコンテンツは以下です。
layout属性 | width | height |
---|---|---|
なし | なし | 指定 |
指定 | 指定 | |
fixed | 指定 | 指定 |
responsive | 指定 | 指定 |
fill | なし (指定しても無視される) | なし (指定しても無視される) |
fixed-height | なし | 指定 |
内部リンクが相対リンクで設定されている場合は、AMPのURLの名付け方によっては変更が必要です。
内部リンク先を一般ページにするかAMP対応ページにするかは、特にルールはないようなので各自の方針に依ります。
AMP対応ページを、検索エンジンからのランディングページという位置づけにしたい場合は、内部リンク先は一般ページが適当でしょう。
一方、スマホ対応サイトの代わりにAMP対応ページを利用したい場合は、内部リンク先をAMP対応ページにするのが適当です。
元のページのhead内に以下のlinkタグを設置し、対応するAMPがあることを知らせます
<link rel="amphtml" href="AMP対応ページ" />
構造化データ(ホームページや各ページ内容が何かをschema.orgに則って記述する説明欄)は、AMPのルールで必須項目でした。
ニュース記事などを表示する特別枠にAMP対応ページを掲載するため、記事の概要・著者・出版社などの情報を構造化データとして提供させるためと思われます。
最近、この構造化データが「必須」から「推奨」に変更され(「エラー」は「警告」に変更され)、AMPを一般のホームページに適用するサインと考えられています。
我々一般のホームページは、もともと適合しないニュース記事用のルールは無視するしかありません。
2016年8月29日時点では、構造化データがないとGoogle Search Consoleで警告が表示されますが、これはいずれ是正されると思われます。