Cloudflare AMP Real URLをブログに導入する
![Cloudflare AMP Real URLをブログに導入する](https://res.cloudinary.com/meganii/image/upload/v1574561130/AMP_%EF%B8%8F_Real_URL_a1iiwa.png)
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
へ移動
![Cloudflare AMP Real URLをブログに導入する](https://res.cloudinary.com/meganii/image/upload/v1574554312/cloudflare-amp-real-url_gg42fw.png)
2.AMP Real URL
をONにする
![Cloudflare AMP Real URL - 設定](https://res.cloudinary.com/meganii/image/upload/v1574560190/cloudflare-amp-real-url-on_kx8gl6.png)
Google結果
![Google検索](https://res.cloudinary.com/meganii/image/upload/v1574559592/20191111_233556_vohygj.gif)
結果(Chrome Devtoolsでの確認)
![Cloudflare AMP Real URL Result](https://res.cloudinary.com/meganii/image/upload/v1574554642/cloudflare-amp-real-url-result_kgeu3z.png)
参考
Related contents
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2022.08.14
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2019.10.11
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2019.10.06
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/f_auto,q_auto/v1594903789/sislab_hugo_j8ykf6.png)
TECH
2023.02.03
![Eyecatch](https://i.gyazo.com/6b699bab2307c88c91ee76b026fd981b.png)
TECH
2022.08.11
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2020.09.27
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/v1598661527/odzo1kdud2bvi4iswffn.png)
TECH
2020.08.15
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2020.05.11