スマートフォンで検索すると「トップニュース」というカルーセル枠が表示されることがあります。
表示されたリンクからページにアクセスすると、通常のWebページよりもシンプルなページが高速で表示されます。
これは、「AMP」と呼ばれる手法によって作成されているコンテンツです。
AMPは2016年2月からGoogleの検索結果にも導入されることになり、Webマーケティングに関わる方にとっては重要なキーワードとなっています。
この記事では、「AMPについて知っておきたい!」という方や、AMP導入を検討している方のために、AMPの概要や導入方法について説明します。
AMP(Accelerated Mobile Pages)とは?
AMPとは、GoogleとTwitterで共同開発されているモバイルでのWebページの表示を高速化する手法、またはそのためのHTMLフレームワークのことを指します。
AMPで策定された仕様に沿ってモバイルページを構築すれば、通常の約4倍の速さでページが表示され、データ量が約1/10になると言われています。
先述の通り、2016年2月からはGoogle検索結果画面にも表示されるようになっています。
AMPING UP IN GOOGLE SEARCH
お手持ちのスマートフォンでカルーセルが表示されるようなクエリで検索してみてください。
例えば、「台風」のような時事要素を含む検索クエリや、「朝日新聞」「毎日新聞」のようなAMP対応済のメディア名を含む検索クエリです。
雷マークとともに、「トップニュース」の枠内にアイキャッチ画像と記事へのリンクが横並びのカルーセル形式で表示されていませんか?
AMPに対応したページは、アイキャッチ画像の下に「AMP」と記載されています。
リンクからページにアクセスすると、読み込み時間がほとんどなくコンテンツが表示されることがわかります。
AMPの仕組み
AMPの基本構成
AMPを構成する要素として次の3つが挙げられます。
●AMP HTML
●AMP JS
●Google AMP Cache
「AMP HTML」はページを高速表示させるための制約が設けられたHTMLで、既存のHTMLを制限することでデータ量の削減を図っています。
AMP HTMLのレンダリングを高速化するのが「AMP JS」ライブラリで、取得したAMPページをキャッシュするのが「Google AMP Cache」です。
仕様を限定し、読み込みや描画の負荷を減らす
AMPでは、AMP JS以外のJavaScriptを許容しないことによって、高速化を図っています。
また、画像などの外部リソースのサイズをあらかじめ固定しておくことによって、スタイルの再計算・再描画の負担を減らしていることも高速化に寄与しています。
キャッシュの利用
AMPの仕様に沿って作成されたページは、GoogleやTwitter側にキャッシュとして保存されます。
検索結果画面からAMPページにアクセスするとGoogleドメイン内にあることになっていますが、これはGoogleが保存したキャッシュを表示しているためです。
キャッシュの利用により、ページの読み込み時間が短縮され、ページがこれまでより高速表示されるという仕組みになっています。
AMPの現状
AMPの課題点は?
上記のとおり、AMPに対応するには、GoogleやTwitterが策定した仕様に合わせる必要があります。そのため、デザインや機能を通常ページと同じようにうまく再現できない可能性があります。
AMPで使用できないタグも多数存在するため、あらかじめ確認しておきましょう。
また、AMP用ページの作成コストが掛かりますし、PC用ページやスマホ用ページとの多重管理が必要となり、ソースコードの管理が煩雑となることが課題として挙げられます。
モバイル検索結果画面でAMPを表示する実験を行っている
これまではAMPページは「トップニュース」として別枠のカルーセル内のみで表示されていました。
しかし、2016年8月からGoogleは通常の検索ページにもAMPページが表示する実験を行っています。
お手持ちのスマホから、下記の実験用ページにアクセスしてみてください。
g.co/ampdemo
実験用の検索ページでは通常の検索結果にAMP用ページと通常のスマホ用ページが混在して表示されています。
スマホ用ページとAMP対応したページの両方があるとき、通常のスマホ用ページに置き換わってAMP用ページが表示されるようになっています。
現在は通常の検索結果にAMP用ページを含める機能は実験段階ですが、年内の公開を予定しているようです。
今年の後半にはより広い範囲で私たちがより良い検索体験を提供できるよう、まずはプレビューとしてこの機能を公開します。Googleウェブマスター向け公式ブログ
AMPの導入手順
AMPを導入するには、AMPに対応した専用ページを作成しておく必要があります。
通常のHTMLとは異なる決まりのあるAMP HTMLの書式に沿ってHMLTを記述し、さらにGoogleに認識してもらうために構造化データの記述が必須となっています。
AMP HTMLの宣言
普通のHTML文書とほぼ同じように、AMP HTML文書の宣言をします。
<!doctype html>
<html amp lang="ja">
meta要素の指定
AMPはUTF-8のみに対応していますので、文字コードの指定が必要になります。
文字コードとビューポートの設定は必須で、どちらか一方でも欠けるとエラーが発生します。
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
正規のページをcanonicalにて指定
クローラーがオリジナルページ(PC用ページ)がどこにあるのかを認識できるようにlink要素のcanonical属性を使って明示します。
スマホ用ページからPC用ページにcanonicalを向けるのと似ていますね。
なお、AMPページだけしか存在しない場合、AMPページのURLを指定します。
<link rel="canonical" href="PCページのURL">
正規のページにもAMPページのURLを指定
クローラーがAMPページの存在を正しく認識できるように、正規のページ(PC用ページ)もAMPページの存在をlink要素のamphtml属性を使って明示します。
スマホ用ページの存在を明示するのに使用するのはalternate属性ですので、間違えないように気をつけてください。
<link rel="amphtml" href="AMPページのURL">
AMPに必須の”boilerplate”
“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を稼働させるためのJSライブラリを読み込む必要があります。
<script async src="https://cdn.ampproject.org/v0.js"></script>
AMPタグに変更
AMP HTMLでは通常のHTMLで使用されるタグが使用できないことがあります。
例えば、通常のHTMLでは画像挿入は<img>タグを使用しますが、AMP HTMLでは使用できず、<amp-img>タグに置き換える必要があります。
また、画像の大きさ(width,height)は必ず指定しておかなければなりません。
画像サイズをあらかじめ指定しておくことによってスムーズなレンダリングおよびAMPの表示速度向上に生かされています。
その他のAMPタグについては下記をご覧ください。
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags
JSON-LDの指定
schema.orgのJSON-LDを指定し、ページの構造をクローラーに正しく伝えることができます。
省略することできません。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "ページタイトル",
"datePublished": "2016-08-30T11:43:57Z",
"image": [
"sample.jpg"
]
}
</script>
AMPのSEO面での影響
AMP対応によって直接ランキングに影響を及ぼすことはないと、米Googleのジョン・ミューラー氏が公言しています。
“At the moment, it(AMP) is not a ranking signal.””Just AMP itself is not something that we have a ranking signal at the moment”English Google Webmaster Central office-hours hangout
しかし、ページ表示速度はランキング要因の1つであり、ページ表示速度アップによるユーザー満足度向上によって、間接的に検索順位に影響を及ぼす可能性はあります。
AMP対応範囲の拡大により、AMPページの利便性に対する認識が広まるにつれて、優先的にAMPページにアクセスするようになり、流入を獲得しやすくなるというようなことが起こりえます。
また、Googleはサーチコンソールを通じてウェブマスターに対してAMP対応を促すメッセージを送信したり、上記のとおりAMP表示を一般の検索結果にまで拡充するテストも行っており、将来的にAMPの実装を推奨・必須化し、AMP対応がランキング要因の1つになる可能性も十分に考えられます。
まとめ
AMPは流入数アップや売上向上を直接的に狙う施策というよりは、ユーザーフレンドリーな施策です。
AMPを導入するべきかどうかは、サイトの構造や種類、準備できるリソースによって結論が変わってきます。
例えばJavaScriptを多用しているサイトであれば、細かい対応が必要になり多くのリソースが必要になりますし、AMPへの造詣の深い技術者が必要になります。
現在はメリット・デメリットがともに存在するAMPですが、将来的にはGoogleがAMPの実装を推奨、または必須化することも十分に考えられます。
その時になってあわてて対応するのは大変なことです。
あらかじめAMPのノウハウや知見を蓄積しておき、最新の情報をチェックしながらAMP対応について検討しておくことをおすすめします。