SEO関連のあれこれ：AMP特集【保存版】

AMPとは？

AMP（アンプ）とはAccelerated Mobile Pagesの略称で、加速化モバイルページを意味します。
文字通り、モバイル検索のユーザーがサイトをスムーズに閲覧する為のシステムです。
デスクトップ検索でも言える事ですが、モバイル検索を利用した際にサイトの表示速度が遅いと多くのユーザーはサイトを離れてしまいます。
検索エンジンは検索からサイトを訪れたユーザーを逃さない為にサイトを最速で簡単に見れる便利なシステムを作り、今年はじめに実装しました。
AMPはよく月末に起こる通信速度制限でサイトの読み込みが遅くイライラしがちな時でも高速で表示できるというメリットがあります。
ネット環境の通信速度に関係なく、モバイル検索ユーザーが素早くサイトを閲覧したいという願いを叶えたAMPですが一体どのような仕組みなんでしょうか？
ちなみに、基礎的なAMPの情報についてはこちらで紹介しているので見てみて下さいね。

AMPの仕組み

既に何度か記事に記述していますが、AMPはサイトの構造から違いがあり、今までのHTMLとは全くの別物です。
分かりやすい違いといえば、AMPの宣言とviewportが必須になり、AMP専用のタグや使用が制限されているタグなど様々なルールがある事などでしょうか。
まず、AMPは3つの構成容姿によって成り立っています。

AMPHTMLではAMP専用のJavaScript以外は認められていません。
動作をスムーズにし主に静的なコンテンツを想定している為、通常HTMLで用いられるHTML＋CSSでのJSは禁止されているんです。

上記のAMP JSを配信するCDN（WEBコンテンツを配信する為に最適化されたネットワーク）で、AMPを発信する全てのページはAMP CDNでAMP JSを読み込まれます。
AMP CDNで読み込まれる事で各AMPページのキャッシュが有効になります。

AMP専用のHTMLタグなど、AMPのルールに従ったHTMLです。
今回はこのHTMLについてすこし追加で紹介してみます。

AMP HTMLのルール

HTMLの宣言とcanonicalタグ、AMPであることを知らせるタグに関しては以前の記事で紹介していますので詳しくはそちらを見ていただけたらと思います。
その他のルールとしてAMP HTMLで指定できる文字コードを調べましたが、現在AMP HTMLではutf-8以外は許容されていないようです。
また、サイトを作成する上で画像や動画コンテンツを入れたい！となると思うんですが、実はそちらも様々なルールがあります。
よく使うであろうタグで、AMP専用タグへ置き換えが必要なものすこしだけ挙げてみました。

imgタグ→amp-imgタグへの変更が必要です。
width(横幅)、height(縦幅)、src(画像のパス)は必須の属性となり、imgタグにはなかった閉じタグも追加されています。

videoタグ→amp-videoタグへの変更が必要で、こちらも閉じタグが追加されています。
基本的には上記のamp-imgタグと使い方は同じですが、同様に必須の属性が存在します。
width、height、src属性と、追加でposter属性が必要になり、こちらには動画の表紙となる画像を指定しましょう。
（別途amp-youtubeタグなども存在しているようですが今回は省きます。）

このように、AMPには様々な専用タグが存在しています。
ページを高速化させるために、是非この他のタグもチェックしてみて最適化してみてください。

AMPで使用できる広告

AMPは発表、対応がされてから様々な展開を見せています。
いろんな企業やアプリ、サイトがAMP対応し始めているだけでなく、AMP内で使用できる広告なども種類が増えました。

AMPはもともと読み込み速度が遅くなるスクリプトの使用を厳しく制限したため、広告利用ができませんでした。
しかし、その後はAMPの利点を損なわないで使用できる広告配信が出来るようになりました。
標準的な広告はAMP展開当初から使用できていましたが、2016年6月には新たに3タイプの広告が導入される、と公言がありました。

よく見かける標準的な形式をとっている広告です。このサイトでは導入してないのでちょっと他のサイトさんからお借りしてきましたがこのような広告です。

配置やサーバーなども自分で選ぶことが出来ますし、効果測定も可能です。

画面を上下にスクロールしてもずっとついてくる形の広告です。スマホでもよく見かけると思いますが、ページ内のどこにいても広告が表示される仕様です。
例があればまた掲載します。

こちらはなかなか見かけないタイプの広告です。カーペットという名前のように、記事の下に敷いてあるようなイメージの広告です。
言葉で言っても伝わらないと思いますでの、画像をお借りしました。

この画像を見ると、なんとなくカーペットっぽいのがわかりますね。
ただし、これって見やすい…？

AMPページ向けの広告です。画像などが出ていないのでどうなっているかはまた導入されてから掲載しますが、AMP用ということで高速で表示されるようです。

様々な企業を対象にしたAMPページと、そうではない普通のページの広告検証では、おおむね良い結果が出ているようです。

AMPページで出来ること色々

様々な機能を省き最小限のHTMLなどで作成されているAMPページですが、読み込みが早いだけではユーザーが使いやすいサイトとは言えません。そこで、AMPプロジェクトはユーザーが使いやすいページになるような拡張機能をいくつか公開をしています。

記事の横にコンテンツを設置することが出来ます。 普段は記事の邪魔をしないように隠れていますが、特定の場所をタップをすることで横からぺろっ…っと出現します。もう一度タップをすることで隠れます。
これはスマホサイトなどでもよくメニュー表示などに使われていますね。

アコーディオン型にコンテンツを折りたたむことが出来る機能で、タップをすることで折りたたまれた中身を見ることが出来ます。
こちらもスマホサイトではよく見かけますね。

ソーシャルメディアへのシェアボタンを設置することが出来ます。これも、よく見かけますし、ユーザーとしても誰かに知らせたい時には非常に便利です。
現在設置が出来るSNSは下記のようです。

• Twitter
• Facebook
• Pinterest
• LinkedIn
• Google+
• Email(メール共有)

よく聞き慣れたSNSが軒を連ねています。
Twitter、Facebookは言わずとしれた大手ですが、PinterestとLinkedInはご存知でしょうか？
Pinterestはアメリカ発の写真、動画共有SNS。LinkedInはビジネス特化型SNSだそうです。使ってみたい方はぜひ検索してみてください。

CSSのクラスを動的に追加出来るそうです。
リファラーによってクラスを変更したりが出来るそうですが、いまいちピンときません。
例えば、Google検索からやってきたユーザーには特定のCSSを適応させる、といったようなことが出来るようです。
また用途等、情報が入り次第掲載したいと思います。

【2016/08/12追記】

モバイルの検索結果でAMPページを表示する実験が始まる

Googleが今月頭に、モバイル検索の通常検索結果にてAMPページを表示する実験を開始したとアナウンスしました。

これまでAMPは、トップニュースとして通常の検索結果ではないカルーセル部分に表示されているだけでした。しかし、今回の実験ではカルーセルではなく、通常の検索結果内にAMPページが表示されるのです。
今は実験段階ですが、年内に導入も考えているようです。

これはスマホ向けのページの代わりとしてAMPページが表示される仕組みのようです。
下記は従来までのPCページ、スマホページ、AMPページがどのように検索結果に表れていたかを図にしたものです。

しかし、今回の実験画面ではモバイルの検索結果に出ているスマホ向けページにAMP対応しているページがあった場合は、優先してAMPページが表示されるようになります。よって、通常にスマホ向けページが検索結果には出てこない事になります。それがこちらの図。

雰囲気は掴めたでしょうか？現在の開発画面を使ってみたところ、トップニュースを表示しているカルーセル部分にもAMP記事は相変わらず表示されるようですが、さらに検索結果部分にも同じ記事が上がってきているようでした。
もちろん今まで通りスマホ向けのページも表示されます。スマホ向けページなのかAMP向けページなのかはラベルで見分ける事が出来ます。

AMPラベルはこのラベルですね。テンション上がって自作してみました(笑)

ここで注意をしておきたいのが、今回のこの仕様実験は「アルゴリズムの変更に向けての準備」では無いことです。あくまでも表示を操作するだけであり、順位には関わりがありません。
それを考慮した上で、AMPページではコンテンツの良さを十分に伝えきれないページもたくさんあると思います。よって、現状ではやはり早急に対応をする必要もありません。
それぞれのページのメリットを考えた上で、最適な方法を選ぶべきでしょう。