AMP HTML まとめ

Accelerated Mobile Pages Project

AMPはGoogleが行っている、モバイル端末でのウェブページの表示を高速化するというプロジェクトです。

AMP HTML

  • 対応するとgoogleがモバイルの表示を速くしてくれる。
  • javascriptは使えない。
  • リッチコンテンツを表現したい場合は各種代替要素を利用する。
  • CSSは「<head>」内にインラインで記述する。
  • PCとモバイルのソースがディレクトリで分かれている場合は、普通にコーディングするだけ。
  • PCとモバイルがワンソースの場合は、システムでタグなどの記述を切り替える必要がある。
  • ソースをいじれない、プラグインがないレンタルブログのAMP HTML化は無理。
  • 完全な自動化は今のところ難しい。

記述方法

htmlに「⚡」か「amp」を記述する。

meta要素を指定する必要がある。

link要素のcanonical属性で指定する。

AMPを高速化させる「boilerplate」を記述する。

Twitterなど、AMP用のタグで表示する場合は専用のライブラリを読み込む。

AMPを動作させるためにライブラリを読み込む。

「img」は「amp-img」といったようにAMP用のタグがある。

基本的な書き方

AMP HTML source code, samples, and documentation.

モバイルの表示が爆速になるAMP(Accelerated Mobile Pages)
去年Googleが提唱したAMP(Accelerated Mobile Pages) が、最近また活発になってきたようです。 というわけで...
AMP HTMLの記述例
前回はAMP HTMLの概要をご紹介いたしました。今回は具体的な記述例をサンプルを交えてご紹介いたします。 AMP HTML a...

AMP HTML Built-in Components

代替が推奨されているタグは下記のようになる。

コンポーネント 概要
amp-ad 広告表示の代替。
amp-img imgタグの代替。
amp-pixel アクセス解析などのログの代替。
amp-video videoタグの代替。
amp-embed embedタグの代替。

HTML Tags

使用が禁止されているタグ、または代替する必要があるタグは下記のようになる。

タグ 概要
base 使用禁止。
img amp-imgで代替。
video amp-videoで代替。
audio amp-audioで代替。
iframe amp-iframeで代替。
frame 使用禁止。
frameset 使用禁止。
object 使用禁止。
param 使用禁止。
applet 使用禁止。
embed 使用禁止。
form 使用禁止。将来的に対応予定あり。
input 使用禁止

AMP HTML Extended Components

AMP専用のタグは下記のようになる。

コンポーネント 概要
amp-anim アニメーションGIFを表示。
amp-audio オーディオプレーヤーを表示。
amp-brightcove 「ブライトコーブ」の「Video Cloud」か「perform」の動画プレーヤーを表示。
amp-carousel カルーセルを表示。
amp-fit-text 内容にフィットするフォントを表示。
amp-font カスタムフォントを読み込んで表示。
amp-iframe インラインフレームを表示。
amp-image-lightbox 画像をライトボックス表示。
amp-instagram Instagramを表示。
amp-install-serviceworker ServiceWorkerをインストール。
amp-lightbox ライトボックスを表示。
amp-list 動的にリストアイテムを作成し、表示。
amp-twitter Twitterを表示。
amp-vine 動画ファイルを表示。
amp-youtube YouTubeを表示。

プラグイン

WordPressには「AMP」というプラグインがあるが、現時点では変換が完全ではない。

WordPress amp-plugin

AMP — WordPress Plugins

表示確認

Chromeブラウザでは、PCでもAMP HTMLの表示確認ができる「⚡️ Desktop AMP」という拡張機能がある。

desk-top-amp

⚡️ Desktop AMP – Chrome ウェブストア

バリデーション

URLの末尾に「#development=1」を記述

AMP HTMLのバリデーションを行いたい場合は、検証したいページのURLの末尾に「#development=1」を記述する。

例:http://www.pc-weblog.com/sample/amp/twitter.html#development=1

Chromeブラウザのコンソール表示で、下記のように「AMP validation successful.」という表示がされていれば、バリデーションはOK。

AMP HTML Validation

「The AMP Validator」サイトで検証する

AMPページのバリデーションをWeb上で行える「The AMP Validator」を使ってみた

「The AMP Validator」
テキストエリアにソースを張り付ける

Chrome拡張機能の「AMP Validator」で検証する

Chrome拡張機能の「AMP Validator」を使ってみた
以前にAMPページのバリデーションをWeb上で行える「The AMP Validator」をご紹介いたしました。 AMPページのバリデーシ...
「The AMP Validator」サイトとAMPプロジェクトのリファレンスページで確認
アイコンから検証できる

AMP HTMLを研究してるWebサイト

q-Az

AMP 用 schema.org をワードプレスで設定する方法 | q-Az

WordPressでのAMP用schema.orgなどの設定を行われてます。まるでロボットのように理路整然と記事を書かれています。

シンカー

AMPの対応方法まとめ (作成途中)

章立ててAMP HTMLをきれいにまとめています。ラーメン好きの管理人さんが運営されています。

Creator Clip

【WordPress】プラグイン無しでAMP(Accelerated Mobile Pages)に対応にする手順 | Creator Clip

かなり複雑なサイトですが、AMP HTML化に成功されています。ガジェット系のレビューをされているので、遊びに行ってみてはいかがでしょうか。

AMP HTMLってなに?サイトをAMP HTML化したい!自動化ってできないの?といった方は上記のWebサイトには訪れた方がいいでしょう。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

AMP HTML まとめ
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!