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

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

更新日:2019.11.24 作成日:2019.11.16

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での確認)

参考

スポンサーリンク

Related contents

TECH

2019.10.11

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

TECH

2019.10.06

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

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を同時に実行する

TECH

2018.12.13

GitHub Pagesで複数の独自ドメインサイトを運用する

TECH

2018.11.03

QrunchとMediumに技術メモをクロス投稿する