AMP 公開チェックリスト
Important: this documentation is not applicable to your currently selected format email!
このチェックリストに従って、最大限の AMP エクスペリエンスを提供するサイトを実現しましょう!
AMP 仕様の検証を確保する
AMP には、AMP キャッシュからコンテンツをプリロードしてユーザーの待機時間を短縮するなど、ビルトインのメリットが豊富に備わっています。こういったメリットを活用するには、ページが有効な AMP ドキュメントである必要があります。AMP 検証ツールがエラーをレポートしたままページを公開すると、AMP キャッシュはインデックスを作成できない可能性があり、エラーページとして配信されてしまう可能性があります。
以下のツールを使用すると、無効な AMP ページを公開することはありあmせん。
キャッシュされた AMP ページにサーバーアクセスを許可する
良いニュースです。有効な AMP ページは自動的に既存の AMP キャッシュにオプトインされるようになっています!つまり、ユーザーは、安全かつ効率的に読み込むコンテンツを体験することになります。こういった最適化は素晴らしいことですが、ささやかな難点が伴います。一部のユーザーには、あなたのドメインに一致しないドメインの AMP ページが配信されてしまいます。このため、<amp-form>
や <amp-list>
などの動的な AMP コンポーネントを使用している場合は、ページがサイトデータにアクセスできなくなってしまう可能性があります。こういったエラーはクロスオリジンリソース共有または CORS 問題と呼ばれます。すべての利用可能な AMP キャッシュからの CORS リクエストを有効にして、安全性に対抗するのではなく、それに対応するようにしましょう!バックエンドで Node.js を使用している場合は、amp-cors ミドルウェアを使用できます。
サーバーアクセス権の付与について、以下を参照してください。
- AMP ページのキャッシュの仕組み
- AMP における CORS
- Node.js 用の AMP CORS ミドルウェア
Signed Exchanges 対応の安全で共有可能なコンテンツ
Signed Exchanges(SXG)を介して、ドメインの URL を維持し、アナリティクスを単純化しましょう。SXG で AMP ページを配信することで、デジタル署名はドキュメントと主張された URL を結び付けて情報を保護します。この動作では、ユーザーセッションと cookie はファーストパーティとして扱われるため、潜在的なアナリティクスのギャップが埋められます。SXG を実装することで、通常の AMP コンテンツの「代わりに」ではなく、それに加えて、署名付きの AMP コンテンツを配信することができます。
Signed Exchanges の実装について、以下を参照してください。
- Signed Exchanges を使った AMP の配信
- Signed HTTP Exchanges
- Cloudflare AMP Real URL
- Signed exchanges for better AMP URLs and easier analytics(AMP Conf '19)
キャッシュされたページのテスト
AMP キャッシュは、ユーザーが求めるとすぐに配信できるように、画像、フォント、およびページコンテンツを保存します。このため、AMP ページが AMP キャッシュから配信される場合に、期待どおりの見栄えで機能するようにテストすることが重要です。
AMP ページを AMP キャッシュに追加する場合は、ブラウザの開発者ツールを使用して、すべての外部リソースが読み込み可能であることを確認します。以下に、注意すべき点をリストしています。
- 画像
- 動画
- amp-analytics エンドポイント
- amp-pixel エンドポイント
- カスタムフォント
- iframe
AMP キャッシュについて、以下を参照してください。
AMP ファイルが検索エンジンで検出可能であることを確認する
AMP のみで構築されたページ(AMP ファースト)と AMP ダブルを使ったページ(ペア AMP)はすべて検出可能であることを確認する必要があります!すべての AMP ページの <head>
には、<link rel="canonical" href="$SOME_URL">
が必要です。AMP ファーストページはそのページ自身にリンクし、非 AMP ページとペアになった AMP ページは相互にリンクされている必要があります。
Schema.org メタデータが有用な情報を追加していることを確認してください!ほかのサイトや検索エンジンがコンテンツを共有する際に必要となる場合があります。
ウェブロボット、ウェブワンダラー、クローラー、スパイダーは、すべてのコンテンツを検索するプログラムの名称です。このプログラムはウェブを徘徊し、検索エンジンによるウェブコンテンツのインデックス作成を手助けし、ユーザーのクエリに適切な結果を提供できるようにしています!適切な指示を robots.txt
ファイルに含め、適切なヘッダーをセットアップし、こういったプログラムがサイトを見つけられるようにしましょう。
以下のように、robots.txt ファイルでクローラーを除外しないようにしてください。
User-agent: *
Disallow: /amp/ <= don't!
以下のように、AMP HTML ファイルにロボットの noindex
メタタグを追加しないでください。
<meta name="robots" content="noindex" /> <= don't!
以下のように、AMP ファイルの X-Robots-Tag HTTP ヘッダーとして noindex
を含めないようにしてください。
$ curl -I http://www.example.com/amp.html
HTTP/1.1 200 OK
Date: Tue, 25 May 2010 21:42:43 GMT
(…)
X-Robots-Tag: noindex <= don't!
(…)
ページを検出可能にする方法は、以下を参照してください。
ユーザートラフィックとジャーニーの測定
正しいメトリックを収集することは、有用なアナリティクスを実施する上で欠かすことはできません。サイトへの AMP の導入がユーザーにどのような影響を与えるのかをテストする際は、正しいものを測定していることを確認してください。 アナリティクスによって AMP がもたらす変化が考慮されなければ、検出漏れ、誤検出、または関連性のない結果が生じてしまいます。探しているもの、それをどのように測定するかをよく理解してください!
AMP 向けの適切なアナリティクスを設定する方法については、以下を参照してください。
-
Written by @CrystalOnScript
with contributions from @sebastianbenz