CodeZine(コードジン)

特集ページ一覧

ついに始まった、Google AMP(Accelerated Mobile Pages)を試してみよう!

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/04/15 14:00

目次

AMPの検証

AMP HTML

 それでは、最低限のAMPページができたので、これを検証してみます。AMPページのURLに#development=1を付けることで、「Chrome DevTools Console」で検証することができます。「AMP validation successful.」と表示されればOKです。

画像
Chrome DevTools Console

JSON-LD

 構造化データテストツールで検証します。AMPページのURLを入力して「問題ありません」と表示されればOKです(※JSON-LDは、必須要素が多くありますので、記事に合わせて指定してみてください)。

各CMSで試してみよう

 続いては、WordPressなどのCMSでAMPを試してみましょう。

WordPress.com

 レンタルブログサービスのWordPress.comは、AMPパートナーでもあり、既にAMPをサポートしています。特に設定は必要ありません。URLは下記のようになります。

  • 通常版:http://example.com/article
  • AMP版:http://example.com/article/amp/

WordPress.org

 インストール型のWordPressでは、AMPに対応するためのプラグイン(WordPress.comと同じ開発元)を利用する必要があります。下記プラグインをインストールおよび有効化すると対応できます。URLは上記と同じになります。

Movable Type

 Movable Typeは、記事執筆時点では、AMPに対応していません。オリジナルのテンプレートを作成すれば対応することができます。詳しくは下記サイトなどを参考にしてください。

検証結果

 下記(右)が、WordPress(.com、.org)のAMPページです。デザインはAMP専用のデザインになります。

画像
WordPress(左:通常HTML、右:AMP HTML)

 検証したところ、AMPのバリデーションはクリアしましたが、JSON-LDの構造化データテストでは一部エラーがありました(記事執筆時点では、プラグインのバージョンが0.3.2です)。

Google Search Console

 サイト運営者は、Google Search Console の「Accelerated Mobile Pages」メニューで、AMPページのインデックス数やエラー数などを確認することができます。

画像
Accelerated Mobile Pages

 AMPページにエラーがあると、アラートも届きます。

画像
AMPページ エラーのアラート

まとめ

 まだ全てのサイト運営者にメリットがあるわけではありませんが、

Google 検索結果での AMP 対応ウェブページの表示開始は、本プロジェクトにおいて、まだ一歩にすぎません。(Google Japan Blogより)

と発表されていることから、今度さらにAMPの重要度が高くなる可能性はありそうです。今度の動向にも注目したいところです。

参考資料

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5