データを更新したとき、ブラウザのキャッシュをクリアしなくても更新内容を反映させたい！

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サイトなら、まずはこの方法でかなり解決できます。