記事の詳細
「AMP」って何?簡単に実装できるの?少しだけ調査してみました!
月曜日担当になりました、網干です。
今回は、Web界隈で話題になっている「AMP」について少しだけ調べたので掲載します。
今回のブログの見出しはコチラです!
はじめに
AMPとはAccelerated Mobile Pagesの略称になります。
Googleが推進している取り組みで、モバイル環境で非常に速くページを見るための機能です。
実際にモバイル環境でAMP対応のページを見ると、下記のようになるそうです。
速いですね、読み込みの時間を一切感じませんでした。
こんな技術があるのならば、早めに対応すべきなのか…!?
ということで、まずは調査をしてみました。
どのようにして高速表示しているのか?
高速表示を実現している要因として考えられるのは…
1. AMP JS以外のJavaScriptを認めないことで、速度低下につながるScriptの使用を回避している。
2. 全ての外部リソース要素のサイズを明示的に固定させることで、再計算・再描画の負担を減らしている。
3. 画像はサイズによって読み込みの優先度を変更している。サイズの大きい画像ほど優先度を低くする。
4. AMP対応のページはGoogleやTwitterのサーバーにキャッシュして、GoogleやTwitterからアクセスした際にキャッシュを使用する。
この辺りが要因であると考えられます。
AMP対応の有無は検索順位に影響するのか?
googleのリチャード氏はインタビューにて「AMP対応は検索順位に影響しないが、対応したことでユーザーの満足度が向上する」と明言しています。(※下記は参考記事へのリンクです)
https://www.suzukikenichi.com/blog/how-does-amp-affect-rankings-in-google-search/
上記の内容から、AMPページの有無は検索順位に直接的な影響は与えないものと考えられます。
しかし、AMP対応することでユーザーの満足度が上がれば、アクセス数やリピート数が増える助けになり、
検索エンジンの評価が上がることにはなりそうです。
AMP対応はどのように行えばよいのか?
AMP対応のページは、いくつかのルールに則って作成しなければなりません。
私が調べた限りでは、下記のようなルールがあることがわかっています
1. meta要素の指定
head要素内のmeta要素で文字コードとビューポートを指定します。
この二つはどちらも必須の指定で、欠けるとエラーが発生します。
1 2 |
<meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> |
2. オリジナルページの指定
AMP対応のページは基本的にサブページとなるので、オリジナルページを指定する必要があります。
link要素のcanonical属性で指定してください。
この項目も省略するとエラーが発生します。
1 |
<link rel="canonical" href="http://……"> |
3. boilerplateの記述
AMPが高速化を実現するために、head要素内にboilerplateを記述する必要があります。
こちらも改変するとエラーが発生します。
1 |
<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> |
4. jsファイルの読み込み
指定したjsファイルをhead要素内で読み込みます。
1 |
<script async src="https://cdn.ampproject.org/v0.js"></script> |
5. CSSはすべてインラインで記述する
セレクタにも一部制限があり、「!important」は利用不可となっています。
6. CSSの総容量は50KBまでに制限
7. タグの制限
AMPページを作成する際には、利用できるタグ、利用できないタグが存在します。
タグについて綺麗にまとめたサイト様がありましたので、下記のリンクをご覧ください。
https://syncer.jp/amp#section-4
WordPressでプラグインとかないの?
あります。
WordPressのプラグイン検索でAMPと検索するとAMPのプラグインが出てきます。
プラグインを有効化したら、記事のURLの末尾に/amp/とつけるだけでAMP対応ページが表示されます。
ただ、上記のプラグインはAMP対応ページの障害となる要素を自動で変換するため、
期待通りのページになることはほとんどないと思います。
現状はどうなっているの?
実際にスマホを使ってグーグルで「ニュース」を検索すると、下記のように表示されます。
上記の画像はグーグルクロームのデベロッパーツールで縮小した画面になっていますが、スマホでも同じ表示になります。
AMP対応のページはカルーセル形式で表示されるので、おそらく画像が表示されている三つの項目がAMP対応ページなのでしょう。
実際にクリックをしてみると…あれ?普通にリンクでページに飛ぶ……?
どうやら、現状ではyoutubeの映像のように文章がスッと出てくるような仕様にはなっていないようです。
以上がAMP調査結果になります。
最後に
意外と制約が厳しいですね…。
凝ったサイトにしていると、そのままAMP対応ページとして使うのは難しそうです。
また、「AMP」と検索するとAMP対応ページを作っているサイト様がいくつもあるのですが、
カルーセル形式で表示されるページが確認できません。
このことから、仮にAMP対応のページを作ったとしても、
AMP対応ページとして表示されるには何か別の条件があるため、
AMP対応ページとして表示されない可能性が高そうです。
まだ実装から日が浅く、バージョンアップが大いに見込めるため、
注目すべき機能であることは間違いないので、今後も注目していきます。
記事の参考にさせていただいたサイト様は下記になります。
・いよいよ導入されるAMP(Accelerated Mobile Pages)の基礎知識から対応方法まで!まとめ
https://webkikaku.co.jp/blog/seo/accelerated-mobile-pages/
・Google検索、AMP対応を2月24日に開始、検索結果に表示へ
http://www.sem-r.com/news-2015/20160219092116.html
・Googleは2016年2月にAMPを検索で公開、ランキング要因になる可能性を示唆
https://www.suzukikenichi.com/blog/google-says-amp-may-be-a-ranking-factor/
・AMP(Accelerated Mobile Pages)ってなんで速いの。
http://qiita.com/daikiueno/items/e239bb0723bd97c55071
・AMPの対応方法まとめ (作成途中)
https://syncer.jp/amp
・WordPressのプラグインで簡単にAMP対応をする方法
http://www.aiship.jp/knowhow/archives/26304
・【WordPress】プラグイン無しでAMP(Accelerated Mobile Pages)に対応にする手順
http://creatorclip.info/2016/02/wordpress-accelerated-mobile-pages/
ではまた!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。