update-pingを使ったAMPページのキャッシュの消し方
2017-01-20 20:17
弊社のサイトでも実験的にAMPを使ったページの配信を行っております。
AMPは既にご存知の方も多いと思われますが Accelerated Mobile Pages の略で、
通信速度が安定しないスマートフォンでも高速にページを閲覧できるようにした技術で
以前このブログでもご紹介したこともあります。
AMPによって実装されたページはGoogleによってキャッシュされ
検索結果からのリンクはGoogleのドメインから
キャッシュされたページ・コンテンツが配信されます。
キャッシュは定期的に消えるようですが
急いで消したい場合にちょっと手間取ってしまったので
簡単にまとめてみたいと思います。
curlコマンドで消す
1 2 3 4 5 6 7 8 9 |
# curl --head 'https://cdn.ampproject.org/update-ping/c/www.hogehoge.com/amp/hogehoge.html' HTTP/1.1 204 No Content Content-Type: text/html; charset=ISO-8859-1 Strict-Transport-Security: max-age=31536000 X-Content-Type-Options: nosniff Date: Fri, 20 Jan 2017 10:35:14 GMT Server: sffe X-XSS-Protection: 1; mode=block Alt-Svc: quic=":443"; ma=2592000; v="35,34" |
“204 No Content” が返ります。
エンジニアの方はこっちの方が安心な感じがしますね。
ブラウザを使って消す
1 2 |
https://cdn.ampproject.org/update-ping/c/www.hogehoge.com/amp/hogehoge.html |
にアクセスしてください。
CURLコマンドのURLとまったく同じです。
Chromeだと何も表示されないどころが開いたタブが自動的に閉じたりします。
“204 No Content”のレスポンスヘッダーを受け取ったときの
挙動はブラウザによるようです。
AMPのキャッシュの仕組み
cdn.ampproject.orgというホストにキャッシュが蓄積されています。
削除するのもこのホストに対して行います。
http://www.hogehoge.com/amp/hogehoge.html
がキャッシュされてgoogleの検索結果からリンクされているURLは
https://www.google.co.jp/amp/www.hogehoge.com/amp/hogehoge.html
になります。このページをデベロッパーツールで開くと
https://cdn.ampproject.org/v/www.hogehoge.com/amp/hogehoge.html&_js_v=6
のようなものがロードされていることが分かります。
これがキャッシュ的なもののようです。
これを削除しようとしたら、上記で紹介したようにCURLコマンドがブラウザを使って
1 2 |
https://cdn.ampproject.org/update-ping/c/www.hogehoge.com/amp/hogehoge.html |
にリクエストすれば良いようです。
“www.hogehoge.com/amp/hogehoge.html” の前についている”/c/“は
キャッシュされているコンテンツがドキュメントであることを示しています。
それに対して /update-ping/ というコマンドめいたパスを前につけてあげると
キャッシュが消えるという仕組みです。
上記のようにキャッシュされているコンテンツには
コンテンツの種類によってプレフィックスがつきます。
- ドキュメントはc
- 画像はi
- フォントなどその他のリソースはr
なので
http://www.hogehoge.com/amp/img/piyopiyo.png
という画像がキャッシュされると
https://cdn.ampproject.org/i/www.hogehoge.com/amp/img/piyopiyo.png
となります。
これを削除したければ
1 2 |
https://cdn.ampproject.org/update-ping/i/www.hogehoge.com/amp/img/piyopiyo.png |
でリクエストすればいいことが分かります。
なお、オリジナルがHTTPSの場合はちょっと話が変わるのでまたの機会に。
次回はhttpのレスポンスヘッダーを使って自動的にキャッシュが更新されるようにする設定についてご紹介したいと思います。
ご参考になれば幸いです。