今回は<time>タグについて解説していきます
<time>タグの役割
まずは、<time>タグの役割についてです。
<time>タグは、日付や時刻を意味づけしてマークアップするためのタグです。
人間が読める形式と、機械（検索エンジンやデバイス）に認識させるための形式の両方を扱うことができます。
<time>タグの使い方
<time datetime=”2025-08-1″>2025年8月1日</time>
上のHTMLが<time>タグの基本的な形です。
ユーザーには「2025年8月1日」と表示され、機械は<time datetime=”2025-08-1″>で日付を認識します
実際のコード例①：ブログ記事の日付
ブログ記事の投稿日を示すには次のように記述します：
See the Pen Untitled by 栗田蓮音 (@dqwnlquk-the-selector) on CodePen.
実際のコード例②：イベントの開催日時
日時まで指定する場合は、時間情報も含めます:
See the Pen Untitled by 栗田蓮音 (@dqwnlquk-the-selector) on CodePen.
<time>タグを使うメリット
- 検索に強い
→ 日時や内容を検索エンジンが正しく読み取れるので、検索結果に出やすくなる - 誰にでも伝わる工夫
→ 目が不自由な人にも音声で内容が伝わるようになっている - 情報を整理して表示がわかりやすくなる
→ Googleが内容を理解しやすくなり、検索結果で星マークや画像つきで表示されることもある
よくある間違いと注意点
datetime属性は世界中誰が見ても誤解のない日時の書き方で書く必要があります。
それがISO 8601形式です↓
| 種類 | ISO 8601形式 | 意味 |
|---|---|---|
| 日付のみ | 2025-07-27 | 2025年7月27日 |
| 日付と時刻 | 2025-07-27T16:30:00 | 2025年7月27日16時30分ちょうど |
| UTC時間 | 2025-07-27T16:30:00Z | 協定世界時（ZはZulu＝UTCの略） |
| 時差あり | 2025-07-27T16:30:00+09:00 | 日本時間（UTC+9）での日時 |
日付を書くときにスラッシュを使うことができないので注意が必要です。
まとめ
適切な日付や時間表現を提供することで、ユーザーにとっても検索エンジンにとっても価値のあるコンテンツを作ることが可能になります。
多くのユーザーにコンテンツが届く機会を増やし、ウェブサイトのアクセスを向上させることが期待できるので、
みなさんも<time>タグを使ってみてください🙌🏻
コメント