SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事

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

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

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の重要度が高くなる可能性はありそうです。今度の動向にも注目したいところです。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

LIQUID DESIGN Ltd.(リキッドデザイン株式会社)

リキッドデザイン株式会社代表。Web/Appデザイナー。大手IT企業でポータルサイトやアプリのデザイン/企画に携わり、独立。https://lqd.jp/ http://blog.lqd.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9300 2016/04/15 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング