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設計を学ぶとサイト設計の理解が深まり、保守性やカスタマイズ性の高いサイトを作ることができ、結果として制作効率を高めることができます。ぜひ一読ください。

CSS設計完全ガイド 詳細解説+実践的モジュール集/半田惇志
created by Rinker

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

京都で活動するweb制作者(プロフィール
WordPressサイトを中心にホームページ制作をしています。
HTML/CSS/Sass/JavaScript/jQuery/WordPress/PHP

コメント

コメントする

CAPTCHA