HTMLサイトを更新すると、
ブラウザ側でキャッシュをクリアしないと、
更新内容が反映されないことが多くて、
毎回キャッシュをクリアするのを面倒に思ってました。
さらに、更新しましたとご案内したクライアント様からも、
「更新されてませんよ」と連絡がくるたびに、
キャッシュを…って伝えなきゃいけなくて、
自動的にクリアされないかなぁと思っていたのです。
その解決策がみつかったので、メモしておきます。
このページのもくじ
「バージョン番号」を付ける
HTMLサイトで更新内容を確実に反映させたい場合は、
CSS・JS・画像ファイルのURLに「バージョン番号」を付ける！
たとえばCSSを読み込んでいる部分がこうなっている場合、
HTML
<link rel="stylesheet" href="style.css">これを、更新時にこう変更します。
HTML
<link rel="stylesheet" href="style.css?v=20260530">
ブラウザはこれを
「前とは別のCSSファイル」
として扱うので、キャッシュではなく新しいデータを読み込みます。
更新のたびに変える部分
この v=20260530 の数字は、日付や更新番号でOKです。
HTML 例）
style.css?v=1
style.css?v=2
style.css?v=20260530
style.css?v=20260530-2更新したときだけ数字を変えれば大丈夫です。
おすすめの書き方
クライアント確認用なら、日付がわかりやすいです。
HTML
<link rel="stylesheet" href="style.css?v=20260530">
画像も差し替えた場合は、
HTML
<img src="main.jpg" alt="">
↓
<img src="main.jpg?v=20260530" alt="">JavaScriptの場合
HTML
<script src="script.js"></script>
↓
<script src="script.js?v=20260530"></script>
注意点
HTMLファイル自体が強くキャッシュされている場合は、CSSや画像だけではなく、HTMLの更新が反映されにくいこともあります。
ただ、通常のレンタルサーバーの静的HTMLサイトなら、まずはこの方法でかなり解決できます。
