time 要素とは
HTML5 には、機械（コンピュータ）の読み取りのための要素として data 要素が定義されています。
中でも時刻はよく使用する情報なので、特別に time 要素として定義されています。
この要素を記事内に含めておくことで、article 要素の作成日時や、ページ自体の作成日時を表現することができます。
正しいフォーマットで記述しておけば、検索エンジンの検索結果に日付を表示してもらえるかもしれません。
SEO 対策のためにも、time 要素を正しく記述できるようにしておきましょう。
time 要素の記述方法
<time datetime="日時情報">表示される日時</time>time 要素のフォーマットは上記のようになっており、datetime はオプショナルな属性です。
datetime を省略する場合は、表示される日時 の部分が、RFC 3339 - Date and Time on the Internet で定義された形式で記述されている必要があります。
典型的な書き方は下記のような感じ。
| 書式 | 意味 |
|---|---|
2019-04-27 | 日付（UTC あるいは日本時間） |
2019-04-27T21:30Z | 日付＆時刻（UTC） |
2019-04-27T21:30+0900 | 日付＆時刻（日本時間） |
逆に、datetime オプションに上記のような日時情報を含めておけば、表示される日時 の部分には任意のテキストを指定することができます。
なので、下記の 2 つの time 要素はどちらも正しい記述です。
<time>2019-01-01</time>
<time datetime="2019-01-01">2019年の元日</time>datetime 属性を省略している場合は、表示される日時 の部分を独自形式で記述してはいけません。
<time>2019年の元日</time>正しく time 要素を使って、人にも機械にもやさしい Web サイトを作成したいですね！
schema.org の構造化データマークアップ
HTML データに、より明確な意味を持たせるための schema.org の構造化データマークアップというものがあります。 この情報を付加しておくことで、検索エンジンなどはさらに詳しくサイト情報を表示できるようになります。
日付情報には、BlogPosting タイプなどの datePublished や dateModified プロパティを付けておくのがよいでしょう。
下記は 1 つのブログ記事をマークアップする例です。
<article itemscope itemtype="https://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">記事タイトル</h1>
<span>最終更新:
<time itemprop="dateModified" datetime="2019-01-01">2019-01-01</time>
</span>
</header>
<div itemprop="articleBody">
記事本文
</div>
</article>