timeタグの使い方
HTML5から導入されたtimeタグについて解説します。
りゅうよりよいマークアップのために必須の要素です。
間違えのないように使いましょう。
この記事でわかること
- timeタグの使い方
- datetime属性について
- datetime属性の記述方法
- WordPressでの実装方法
timeタグとは？
timeタグとは、日時の内容を伝えるときに使用する要素です。
これは、ユーザー向けではなく、PC向けに伝える情報として記述が推奨されます。
timeタグで「時」を表すコンテンツを囲むことでPCが「時」を表しているコンテンツであることを認識できるようになります。
視覚的には変化はありませんが、timeタグ使い「時」の情報をPCに正確に伝えることで、SEO対策にもなると考えられています。
Googleなどの検索エンジンは検索結果に公開時期が新しい記事を高い順位にする傾向があると言われており、timeタグで「時」の情報を伝えやすくすることで、SEO対策となる可能性が高くなります。
timeタグの使い方
timeタグの使い方は日時を表す部分を<time></time>で囲むだけです。
timeタグに日時をそのまま記述する場合は、日時表記の標準のフォーマットがあります。
フォーマットは以下のとおりです。
| 表示する内容 | 例 |
|---|---|
| 年 | 2023 |
| 年月 | 2023-01 |
| 年月日 | 2023-01-01 |
| 月日 | 01-01 |
| 時分 | 10:00 |
| 時分秒 | 10:00:30 |
| 年月日時分秒 | 2023-01-01 10:00:30 |
<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属性を使用し、日時の様々な形式の表示に対応しましょう。
ご参考になれば幸いです。
web制作者はWordPressブログを始めましょう！
以下の記事で、WordPressブログをやるメリットについて解説しています。
おすすめのレンタルサーバーについては以下の記事で解説しています。
web制作者におすすめの書籍です。
CSS設計を学ぶとサイト設計の理解が深まり、保守性やカスタマイズ性の高いサイトを作ることができ、結果として制作効率を高めることができます。ぜひ一読ください。
コメント