1. SIS Lab
  2. >
  3. Blog
  4. >
  5. Cloudflare AMP Real URLをブログに導入する

Cloudflare AMP Real URLをブログに導入する

更新日:2020.11.21 作成日:2019.11.16
Cloudflare AMP Real URLをブログに導入する

AMPページをGoogleドメインではなく、自ドメインで表示できる「AMP Real URL」をこのブログにも導入しました。 「AMP Real URL」に関する日本語のページがあまりなかったので、手順をまとめてみました。

AMPの課題とAMP Real URL

AMPとは

AMPはGoogleが推進するAccelerated Mobile Pagesの略語です。AMPはWebのベストプラクティスに沿った形の制限を設けることで、モバイルにおけるWeb表示のパフォーマンスを向上されるフレームワークのようなものです。

ひと昔前までは機能限定というイメージが強い印象でしたが、最近はAMPでの表現力が上がり、AMPだけでWebサイトが組めるようになってきました。AMPの導入メリットとしては、以下の点があります。

  • モバイル版Google検索結果からのGoogleのキャッシュにより、非常に高速に表示させることができる

AMPの課題

AMPの課題の1つに「AMPキャッシュのURLが自分のドメインではなく、Googleのドメインに書き換わってしまう」というものがあります。

これは、モバイルのGoogle検索結果からAMPページをクリックした瞬間、キャッシュされたページが表示され、その画面のドメインはGoogleになっているというものです。アドレスバーにGoogleドメインが表示されるので、混乱をまねく可能性があります。また、アドレスバーからそのままアドレスをコピーできません。

Googleが用意する解決策

解決策としては、Web Packingの技術を利用したAMP Real URLがあります。Signed HTTP Exchanges(SXG)による署名を行うことで、サイト管理者はAMPキャッシュに対しても自ドメインを表示させることができます。

Cloudflareでの「AMP Real URL」導入

設定方法は簡単で、Cloudflareの「AMP Real URL」機能をONにして1〜2週間ほど待つだけです。

設定手順

1.Cloudflareの設定画面Speed > Optimization > AMP Real URLへ移動

2.AMP Real URLをONにする

Google結果

結果(Chrome Devtoolsでの確認)

参考

B! Pocket
スポンサーリンク

Related contents

TECH

2019.10.11

AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜

TECH

2019.10.06

AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した

TECH

2020.09.27

AMP OptimizerによるAMPのさらなる最適化

TECH

2020.08.15

Progressive Web Appを有効にする

TECH

2020.05.11

Vercelにカスタムドメインを設定する(Cloudflareネームサーバ利用)

TECH

2020.04.10

Blog KPI Collector(GAS)で各種KPIを自動取得する

TECH

2020.03.31

小さな習慣・アウトプット駆動生活〜ブログメンタリングのふりかえり〜

TECH

2020.03.13

npm-run-allでローカルAPI serverとHugo serverを同時に実行する