タイトル: time要素
SEOタイトル: HTML time 要素完全ガイド (SEO/構造化データ)
| この記事の要点 |
|
time 要素とは
<time> 要素は、日付・時刻・期間などの日時情報を機械可読な形でマークアップする HTML5 要素です。視覚的には通常のテキストと変わりませんが、検索エンジンや支援技術 (スクリーンリーダー) はこれを「日時」と認識します。
<!-- 基本: 日付 -->
<time datetime="2024-01-15">2024年1月15日</time>
<!-- 日時 (タイムゾーン付き) -->
<time datetime="2024-01-15T09:00:00+09:00">2024/1/15 9:00 (JST)</time>
<!-- 時刻のみ -->
<time datetime="14:30">14時30分</time>
<!-- 年月のみ -->
<time datetime="2024-01">2024年1月</time>
<!-- 期間 (ISO 8601 Duration) -->
<time datetime="PT2H30M">2時間30分</time>datetime 属性 (ISO 8601 形式)
datetime 属性には ISO 8601 形式の文字列を指定します。表示テキスト (要素の中身) は人間向けに自由に書け、機械可読な値は属性側で表現します。
| 形式 | 例 | 意味 |
|---|---|---|
| YYYY-MM-DD | 2024-01-15 | 日付 |
| YYYY-MM-DDThh:mm | 2024-01-15T09:00 | 日時 (ローカル) |
| YYYY-MM-DDThh:mm:ssZ | 2024-01-15T00:00:00Z | UTC |
| YYYY-MM-DDThh:mm:ss±hh:mm | 2024-01-15T09:00:00+09:00 | タイムゾーン付き |
| YYYY-MM | 2024-01 | 年月 |
| YYYY | 2024 | 年のみ |
| --MM-DD | --01-15 | 毎年の日付 (誕生日等) |
| hh:mm:ss | 14:30:00 | 時刻 |
| PnYnMnDTnHnMnS | PT2H30M / P1Y2M | 期間 |
SEO 上の重要性
Google は <time> 要素を記事公開日・更新日として認識します。検索結果の青いリンクの下に「2024/01/15」のように日付が表示されるのは、これを根拠にしているケースが多いです。
<!-- ブログ記事のヘッダーで推奨 -->
<article>
<header>
<h1>記事タイトル</h1>
<p>
公開: <time datetime="2024-01-15" itemprop="datePublished">2024年1月15日</time>
更新: <time datetime="2024-02-01" itemprop="dateModified">2024年2月1日</time>
</p>
</header>
<p>本文...</p>
</article>Schema.org 構造化データとの併用
itemprop 属性で Schema.org の Article 型と結びつけると、Google が確実に公開日として認識します。
<article itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">記事タイトル</h1>
<time itemprop="datePublished" datetime="2024-01-15T09:00:00+09:00">
2024/01/15 09:00
</time>
<time itemprop="dateModified" datetime="2024-02-01T15:00:00+09:00">
2024/02/01 15:00
</time>
<span itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">山田太郎</span>
</span>
</article>JSON-LD で書く場合は <time> と二重に書いておくと安全です:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "記事タイトル",
"datePublished": "2024-01-15T09:00:00+09:00",
"dateModified": "2024-02-01T15:00:00+09:00",
"author": { "@type": "Person", "name": "山田太郎" }
}
</script>JavaScript からの操作
datetime 属性の値は Date.parse() や new Date() でそのままパースできます:
const el = document.querySelector('time');
const iso = el.getAttribute('datetime'); // "2024-01-15T09:00:00+09:00"
const date = new Date(iso);
// 経過時間を表示 ("3 日前" 等)
const diffMs = Date.now() - date.getTime();
const diffDays = Math.floor(diffMs / 86400000);
el.title = `${diffDays} 日前`;
// 表示テキストをローカライズ (Intl.DateTimeFormat)
const fmt = new Intl.DateTimeFormat('ja-JP', {
year: 'numeric', month: 'long', day: 'numeric',
hour: '2-digit', minute: '2-digit'
});
el.textContent = fmt.format(date); // "2024年1月15日 9:00"廃止された pubdate 属性
HTML5 初期には <time pubdate> という boolean 属性があり「この time が記事の公開日である」ことを示していましたが、2011 年に仕様から削除されました。現代では使わず、代わりに itemprop="datePublished" を使います。
<!-- ❌ 古い (廃止) -->
<time datetime="2024-01-15" pubdate>2024年1月15日</time>
<!-- ✅ 現代的 -->
<time datetime="2024-01-15" itemprop="datePublished">2024年1月15日</time>ライブブログ・更新通知での活用
リアルタイム更新するライブブログ・スポーツ実況・チャットログでは、各エントリに <time> を付けると、JS で「N 分前」を動的に書き換えられます:
<ul class="liveblog">
<li><time datetime="2024-01-15T14:30:00+09:00">14:30</time> キックオフ</li>
<li><time datetime="2024-01-15T14:42:00+09:00">14:42</time> ゴール!</li>
<li><time datetime="2024-01-15T14:55:00+09:00">14:55</time> 警告</li>
</ul>アクセシビリティ
スクリーンリーダーは <time> 要素を識別し、適切に読み上げます。「2024-01-15」のような数字の羅列より、「2024年1月15日」と表示テキストを書いた方が読み上げが自然になるケースもあるため、表示テキストは人間にやさしい形式にするのが推奨です。
Microformats との比較
HTML5 以前は hCard / hCalendar といった microformats で日時を機械可読化していました (class="dtstart" 等)。現代では <time> + Schema.org に置き換わっています。
FAQ
Q: 日付だけ表示したいが datetime 属性は必須?
A: 必須ではありませんが、機械可読性のために必ず付けるべきです。属性を省くと SEO 効果が大幅に下がります。
Q: タイムゾーンを書かないと?
A: ローカルタイム扱いになります。グローバル配信するサイトでは +09:00 や Z (UTC) を必ず付けましょう。
Q: 期間 (Duration) はどう書く?
A: ISO 8601 Duration 形式 (PT1H30M = 1 時間 30 分) を使います。料理レシピサイト等で「調理時間 30 分」を機械可読化するときに有用です。