timeタグの使い方

HTML5から導入されたtimeタグについて解説します。

りゅう

よりよいマークアップのために必須の要素です。
間違えのないように使いましょう。

timeタグとは？

timeタグとは、日時の内容を伝えるときに使用する要素です。

これは、ユーザー向けではなく、PC向けに伝える情報として記述が推奨されます。

timeタグで「時」を表すコンテンツを囲むことでPCが「時」を表しているコンテンツであることを認識できるようになります。

視覚的には変化はありませんが、timeタグ使い「時」の情報をPCに正確に伝えることで、SEO対策にもなると考えられています。

Googleなどの検索エンジンは検索結果に公開時期が新しい記事を高い順位にする傾向があると言われており、timeタグで「時」の情報を伝えやすくすることで、SEO対策となる可能性が高くなります。

timeタグの使い方

timeタグの使い方は日時を表す部分を<time></time>で囲むだけです。

timeタグに日時をそのまま記述する場合は、日時表記の標準のフォーマットがあります。

フォーマットは以下のとおりです。

<p><time>2023-08-26</time></p>

上記のようにPCが理解できるフォーマットで記述します。

「2023年8月〇〇日」のようにフォーマット以外の表記にしたい場合には、datetime属性を使います。

<p><time datetime="2023-08-26">2023年8月26日</time></p>

datetime属性を使うことで、timeタグのコンテンツが示す日時の情報をPCが理解できるようになります。

timeタグのWordPressでの実装例

WordPressオリジナルテーマ作成時のtimeタグの実装例を紹介します。

WordPressでは、投稿一覧や投稿ページで投稿日、更新日を表示する際にtimeタグを使用します。

<?php if(have_posts()): ?>
<?php while(have_posts()): ?>
<?php the_post(); ?>

<p>投稿日：<time datetime="<?php the_time('c'); ?>"><?php the_time('Y.m.d'); ?></time></p>

<?php endwhile; ?>
<?php endif; ?>

上記の例では、datetime属性に、WordPress関数を使ってthe_time('c');で投稿日をPCが理解できるフォーマットで出力し、the_time('Y.m.d');で投稿日を2023.1.1の形式で表示しています。

WordPress関数を利用することでtimeタグを使用し、PCに日時の情報を認識させつつ、表示形式も関数で選択できます。

まとめ

timeタグについて解説しました。

timeタグの理解を深め、datetime属性を使用し、日時の様々な形式の表示に対応しましょう。

ご参考になれば幸いです。