【2023年推奨】フッターのコピーライト年表記を自動で更新したい

年末年始しか日の目を浴びませんがコピーライトの年表記ですが、今回はjavascriptで実装していきましょう。下画像のような2022-20xx を自動的に更新します。

西暦を取得する方法

new Date().getFullYear()

西暦を取得するには、上記のようなコードを使用します。

2023年推奨コード全文

基本的には以下のコードを推奨します。

<p>
<script>
	let nowYear = document.getElementById('nowYear');
	nowYear.insertAdjacentHTML('afterbegin', '© 2022-'+new Date().getFullYear());
</script>
SiteName</p>

出力結果:

<p>© 2022-2022 SiteName</p>

簡単だけど…非推奨コード全文

document.write()を使い任意の箇所に Date().getFullYear() を挿入しています。簡単ですが、当サイトでは非推奨の方法となります。

<p>© 2022 - <script type="text/javascript">
		document.write(new Date().getFullYear());
	  </script> SiteName</p>

出力結果:

<p>© 2022-2022 SiteName</p>

出力結果は推奨・非推奨でも変わりませんね。

非推奨の理由とは？

画面に任意のテキストを表示する document.write() ですが、ブラウザのレンダリングに悪影響がでたりDOMへの影響などを考慮して 強く非推奨 とされています。

サイトのパフォーマンスを評価するGoogleのサービス、 PageSpeed Insights でも document.write()を使用するとスコアが低下することから、実際のパフォーマンスだけでなく SEOにも影響を及ぼす可能性があります。

おわりに

1年に1回しか切り替わるタイミングが無いのであまり気にしない部分ですが、つい最近まで非推奨の方法が紹介されることも多かったためもしかしたらあなたのサイトも非推奨の方法かもしれません。 一度自分のサイトを見直してみてはいがかでしょうか？