クライアントの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>
まとめ
コードを記述してもうまくいかないこともあります。どうも環境によってはキャッシュ無効の指定を行っても、謎にキャッシュから読み込まれるパターンがあるようです。(スマホでよくあります)
その際は気長に待ちましょう。とは言っても急ぎの場合もあるでしょうし、上記以外に解決する方法もあります。少しでも早く反映させたい場合はお気軽にご連絡ください。