AMPメモ

このエントリーを Google ブックマーク に追加
LINEで送る
Pocket

AMPを導入したいのでAMPについて書かれた記事を読んだ。

YAMAGUCHI::weblog
AMP対応 2016.02版
http://ymotongpoo.hatenablog.com/entry/2016/02/25/224159

そもそもAMP化するという場合、既存のモバイル向けページを置き換えるというイメージを持たれる方がいますが、そうではなく、そのページは残したままAMP HTMLの仕様に従ったページを追加で作成するという形になります。

と書いてありわかりやすい。詳細な実装手順も書かれている。ありがたい。
この記事を読んだ後だと他サイトのAMP記事も頭に入りやすい。

Google Developers Japanブログ
Google モバイル検索が Accelerated Mobile Pages に対応しました
http://googledevjp.blogspot.jp/2016/02/google-accelerated-mobile-pages.html

大まかな実装手順が書かれている。以下引用。
AMP ページの実装手順

  1. AMP ページと正規版のページの URL の対応を検討する
    • 正規版の URL にパスを追加する 例) https://foo.com/article/amp/index.html
    • ファイル名に文字を追加する 例) https://foo.com/article/index.amp.html
    • URL パラメータを追加する 例) https://foo.com/article/index.html?amp
  2. AMP ページ設置予定の URL に Google のクローラーがアクセスできるようにする
    • robots.txt を確認する
    • 正規版のページのメタタグに nofollow 等がないようにする
  3. AMP HTML の仕様にしたがい、AMP ページを作成する
    • Required Markup の項目がすべてあるか確認する
    • Google の検索結果に表示されるためには schema.org に準拠したメタデータの付与が必要
  4. validator を用いて AMP ページが正しくマークアップされているかいずれかの方法で確認する
    • URL に #development=1 というフラグメントをつけて Google Chrome の開発者ツールで確認
    • node.js 製の validator をコマンドラインで実行して確認する
  5. Structured Data Testing Tool を使ってメタデータが正しく記述されているかを確認する
  6. Search Console の AMP レポートツール を使って AMP ページがインデックスされているか確認する
    • Google のクローラー側でエラーを検出した場合はこちらでレポートされるのでよく確認する