【HTML5】日時を表す文字列にはtimeタグをつけるべきか

概要

HTML5で新たにtimeタグが追加されました。
このtimeタグを何のために使用するかを紹介していこうと思います。

timeタグ

timeタグは時間や日時などの時間に関するものを表す際に用いるタグです。
timeタグで時間を囲むことで、コンピュータやブラウザに「時」を表しているコンテンツであることを認識させることができます。
ただし、時間として

メリット

一番のメリットは、コンピュータに時間を認識させることで、SEOに役立つと言われております。
Googleの検索エンジンは公開時期が新しい記事を優先して検索結果に出す傾向があります。そのため、time要素を入れている場合の方が、検索順位が上がるようです。
また、独自のリマインダー機能にも使えることができます。
ただし、以下のような正確でない時間に対しては使用すべきではありません。

• ビッグバンから1秒後
• B.C 200年

さらに、time要素を用いれば、以下の画像のように、Google検索結果のスニペットに日付を表示することができます。

使用例

使用例は以下の通りです。
ポイントは、datetime属性を用います。

index.html

<div>
    <h1>世界新記録達成！！</h1>
    <p>記録は、<time datetime="1h 12m 07S">1時間12分07秒</time>！！</p>
    <p>日付<time datetime="2021-06-13">2021年06月13日</time></p>
</div>

<div>
    <p>コンサートは<time datetime="2021-06-20T17:00">6月20日</time>に開催!!</p>
</div>

<div>
    <h1>こういう使い方もできるよ！</h1>
    <p><time datetime="2021-07-21">今夏は海に行くぞ！！</time>！！</p>
</div>

ブラウザ上の表示に特に影響はありませんが、裏方の方でよしなにやってくれています。

まとめ

この記事ではtimeタグの意味と使用例を紹介しました。
ブラウザ上の見た目には特に何も関係ありませんが、SEO対策に役立つものなので、積極的に使用するようにしましょう。