You're lovin' it.

【HTML】headにブラウザのキャッシュ無効を記述する

クライアントのLP(ランディングページ)を制作している時に頻繁に出現するお悩み解決のための記事です。制作途中に画像差し替えやテキスト変更をして報告すると「変わってないよー」って言われ「あ、キャッシュ問題なのでCtrl + F5押してください」というやりとりが本当によくありますよね?

不毛なやりとりをなくすためにも、そもそもキャッシュさせたくない!って思いますよね。headにmeta要素でキャッシュを無効にするコードを下記で紹介します。(自分へのメモ代わりがメインなので簡単に)

キャッシュを無効にするコード

<meta http-equiv="Cache-Control" content="no-cache"> //キャッシュを無効にする
<meta http-equiv="Pragma" content="no-cache"> //Pragma は Cache-Control に対応していない環境向けの指定

<meta http-equiv="Expires" content="0"> //キャッシュの有効期限を0指定

以下のようにhead内に記述

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <meta charset="utf-8">
  <title>ここにタイトル</title>
</head>
<body>
  
</body>
</html>

まとめ

コードを記述してもうまくいかないこともあります。どうも環境によってはキャッシュ無効の指定を行っても、謎にキャッシュから読み込まれるパターンがあるようです。(スマホでよくあります)

その際は気長に待ちましょう。とは言っても急ぎの場合もあるでしょうし、上記以外に解決する方法もあります。少しでも早く反映させたい場合はお気軽にご連絡ください。