TOP > SEO > Google AMP HTML とは?

Google AMP HTML とは?

このエントリーをはてなブックマークに追加

AMPとは?

AMPAccelerated 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
scriptapplication/ld+json 以外NG
img, video, audio, iframeAMPタグに置き換え
frame, frameset, object, param, applet, embed, form, input elementsNG(buttonはOK)
styleheadタグ内OK、amp-custom属性が必要、opacity調整が必要
link canonical 以外NG、一部ホワイトリスト登録OK
metahttp-equiv のみNG
ajavascript の使用は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-development.png

今後の展望

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

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

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

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

関連リンク

Movable Type 対応方法

2015/12/11
おすすめ記事

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

最新情報をチェックする!
参考になったらぜひ「いいね!」してください!

検索

トピックス

人気記事