Google AMP HTML とは？:検さぽ！

AMPとは？

AMP（Accelerated Mobile Pages）は、 2015年にGoogleが中心となって策定した、静的コンテンツを高速にレンダリングするための技術です。 AMPプロジェクトはオープンソースの取り組みで、多くのパブリッシャーがパートナーに参加しています。

Google公式ブログでは高速にページ遷移するデモ動画が公開されています。

引用：https://googleblog.blogspot.jp/2015/10/introducing-accelerated-mobile-pages.html
公式サイト：https://www.ampproject.org/

AMP HTML

サンプル

公式サイトによるAMP HTMLのサンプルです。
ほとんどはHTMLですが、一部がAMPのプロパティで拡張されています。 <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>

AMP HTML の特徴

タグ	AMP HTML
script	application/ld+json 以外NG
img, video, audio, iframe	AMPタグに置き換え
frame, frameset, object, param, applet, embed, form, input elements	NG（buttonはOK）
style	headタグ内OK、amp-custom属性が必要、opacity調整が必要
link	canonical 以外NG、一部ホワイトリスト登録OK
meta	http-equiv のみNG
a	javascript の使用はNG
svg	ほとんどOK

AMP HTML フォーマット

amp-html-format https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md

AMP 検証方法

AMPをValidate（検証）する方法が用意されています。
URLに #development=1 を追加することで、Chrome DevTools console でログを出力し、チェックすることができます。 http://localhost:8000/released.amp.html#development=1

今後の展望

AMPプロジェクトに参加を表明したパブリッシャーの数は4500社以上にのぼります。また、ブログプラットフォームのWordPressも、AMP対応ページを希望するパブリッシャーのサポートを開始すると発表しています。

また、Facebookは、独自のInstant Articlesを発表しています。 Facebookのニュースフィード上でパブリッシャーの記事をホストするもので、モバイルアプリのユーザーが記事の読み込みに掛かる時間を10倍速くするとしています。

Googleは、2月後半までに Google Analytics などの自社のツールをAMP対応することや、 Google検索からのトラフィック送信を開始することを発表しています。

今後、Google検索ではモバイルフレンドリーのように、AMP対応ページに「Fast」ラベルを表示する可能性などもあり、モバイルページの高速化について今後の動向が注目されています。 参考：http://japan.zdnet.com/article/35074737/

Webマーケティング基礎講座

基礎知識

プロモーション

自社サイト施策

便利ツール

サービス

Webマーケティングコンサルティング無料！コンサルティング資料請求

最新情報をチェックする！

参考になったらぜひ「いいね！」してください！

SEO検索エンジンのことなら検さぽ！

Google AMP HTML とは？