astronomical-clock

time要素は検索エンジンに記事を投稿した時間を知らせるための大切なタグです。

今回は、time要素の正しい使い方について解説します。

time要素の正しい使い方

time要素について

time要素内には日付を書くのですが、正しい形式で記述することになっています。

time 要素 - テキストレベルの意味づけ - HTML要素 - HTML5 タグリファレンス - HTML5.JP

上記のリンク先の例にそっていれば問題無いですが、このリンク先の例はあまりにも多すぎるのでどれを参考にすればいいかわからないかもしれません。

一般的には、「年-月-日」を記述します。

<time>2014-11-23</time>

上記の例だと、「2014年11月23日」を表しています。

datetime属性について

ただ、もしかするとWebページに「2014-11-23」といった形式ではなく「2014年11月23日」のように日付を表示したいこともあるかもしれません。

そういった時のために、time要素にはdatetime属性というものが用意されています。

具体的にはdatetime属性を使うことによってこのように日付を表示することができます。

<time datetime="2014-11-23">2014年11月23日</time>

WordPressでtime要素を正しく使う方法

これでtime要素の正しい使い方が分かりましたが、記事を更新するたびにこれをいちいち入力するのは面倒ですね。

しかし、WordPressを使っている方であれば、以下のリンク先に示されている方法で自動でtime要素を入れてくれます。便利!

このブログでも同じようにして使用している方法なので、まだ実践していない方はぜひ参考にしてみてください。

記事の更新日をHTML5対応にして正しくGoogleに伝える方法[Wordpressカスタマイズ]

さいごに

じつは、自分もつい先日までtime要素の正しい使い方を知りませんでした。

https://wayswebhack.com/codeiq-hisabisa/

この記事で紹介している「セマンティックタグを使おう!」という問題でtime要素を使う場面があったのですが、正しく使えていませんでした・・・。

HTMLのタグっていろいろあるので一気に覚えるのは大変かもしれませんが、少しづつ使えるようになっていきたいですね。