ブログやWEBサイトで記事の日付を表示するとき、なんとなく <p>
や <span>
で囲んでませんか?
見た目はそれでも問題ありませんが、実はHTMLには「これは日付ですよ」と明確に伝えるための専用タグがあります。
それが、<time>
タグ。
このタグを使うと、検索エンジンやブラウザに正しく情報を伝えられるだけでなく、SEOやアクセシビリティの面でも大きなメリットがあります。
今回は、そんな <time>
タグの基本から、WordPressでの実装例までわかりやすく解説します。
INDEX
<time>
タグとは?
<time>
タグは、HTML5から新しく導入されたタグで、「日付」や「時刻」といった時間情報をマークアップするための要素です。
たとえば、ブログの記事にこんな日付が書かれていたとします。
<p>この記事は2025年5月23日に公開されました。</p>
これだけでも見た目には問題ありませんが、機械(検索エンジンやツール)には「これは日付である」と伝わっていない状態です。
そこで <time>
タグを使うと、次のように意味を明確に伝えることができます。
<p>この記事は<time datetime="2025-05-23">2025年5月23日</time>に公開されました。</p>
このように、人間が読む文章の中に「機械が理解しやすい日付」を埋め込めるのが <time>
タグの特徴です。
詳しくはこちらのサイトもご参考ください。
datetime属性とは?
<time>
タグを使う上で大事なのが datetime
属性です。これはその日時をISO 8601形式(国際規格)で記述する属性で、Googleなどの検索エンジンが読み取るときの基準になります。
書き方の例(ISO 8601形式)
表示したい内容 | datetimeの書き方 |
---|---|
2025年5月23日 | 2025-05-23 |
2025年5月23日 13:00 | 2025-05-23T13:00 |
午前9時(日本時間) | 2025-05-23T09:00+09:00 |
<time>
タグを使用するメリット
Googleでの検索結果で、このような表記を見たことはありませんか?
記事の公開日を<time>
タグで記載することによって、このように「いつ公開された記事であるのか」が一目瞭然となります。
検索にヒットした記事へアクセスしたら何年も前の古い情報だった…という経験はあるあるですよね。
類似の検索結果が複数ヒットしたら、更新日がより新しい情報を参照されることでしょう。
ブログ記事やニュース、イベント情報など「時間が意味を持つコンテンツ」では、積極的に使うことでSEOにも非常に効果的です。
コピペOK!Wordpressでの活用法
WordPressへコピペしてすぐに使える実装例をご紹介します。
公開日のマークアップ例
<time datetime="<?php echo get_the_date('c'); ?>">
公開日:<?php echo get_the_date(); ?>
</time>
- get_the_date(‘c’) は ISO 8601形式(例:
2025-05-23T10:00:00+09:00
)で日付を出力します。 - タグ内の
get_the_date()
は、実際に表示する日付(例:2025年5月23日)です。
最終更新日のマークアップ例
<time datetime="<?php echo get_the_modified_date('c'); ?>">
最終更新日:<?php echo get_the_modified_date(); ?>
</time>
最終更新日のマークアップ例(※公開日と異なるときのみ)
以下のように条件分岐させると、公開日と最終更新日が異なる場合だけ「更新日」を表示できます。
<?php if (get_the_modified_date() !== get_the_date()) : ?>
<time datetime="<?php echo get_the_modified_date('c'); ?>">
最終更新日:<?php echo get_the_modified_date(); ?>
</time>
<?php endif; ?>
<time>
タグは意外と重要な意味を持つ
<time>
タグは、ただ日付や時刻を表示するだけのタグではありません。
「これは時間情報ですよ」と機械に正しく伝えるための意味づけ(セマンティクス)」が備わった、HTML5ならではの便利な要素です。
特にブログやニュース、更新頻度が重要なWebサイトでは、
- 公開日や最終更新日をマークアップする
datetime
属性でISO形式の日付を記述する- WordPressでもテンプレートタグで対応できる
といった工夫をすることで、SEOにもユーザビリティにも強い記事ページを作ることができます。
見た目には小さな変化でも、検索エンジンやツールの見方は大きく変わります。
「なんとなく <p>
タグで囲んでた…」という方は、ぜひこの機会に <time>
タグを取り入れてみてくださいね。