記事タイトル
公開: 更新:
本文...
タイトル: time要素
SEOタイトル: HTML time 要素完全ガイド (SEO/構造化データ)
| この記事の要点 |
|
time 要素とは
要素は、日付・時刻・期間などの日時情報を機械可読な形でマークアップする HTML5 要素です。視覚的には通常のテキストと変わりませんが、検索エンジンや支援技術 (スクリーンリーダー) はこれを「日時」と認識します。
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 は 要素を記事公開日・更新日として認識します。検索結果の青いリンクの下に「2024/01/15」のように日付が表示されるのは、これを根拠にしているケースが多いです。
Schema.org 構造化データとの併用
itemprop 属性で Schema.org の Article 型と結びつけると、Google が確実に公開日として認識します。
記事タイトル
山田太郎
JSON-LD で書く場合は と二重に書いておくと安全です:
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 初期には という boolean 属性があり「この time が記事の公開日である」ことを示していましたが、2011 年に仕様から削除されました。現代では使わず、代わりに itemprop="datePublished" を使います。
ライブブログ・更新通知での活用
リアルタイム更新するライブブログ・スポーツ実況・チャットログでは、各エントリに を付けると、JS で「N 分前」を動的に書き換えられます:
- キックオフ
- ゴール!
- 警告
アクセシビリティ
スクリーンリーダーは 要素を識別し、適切に読み上げます。「2024-01-15」のような数字の羅列より、「2024年1月15日」と表示テキストを書いた方が読み上げが自然になるケースもあるため、表示テキストは人間にやさしい形式にするのが推奨です。
Microformats との比較
HTML5 以前は hCard / hCalendar といった microformats で日時を機械可読化していました (class="dtstart" 等)。現代では + Schema.org に置き換わっています。
FAQ
Q: 日付だけ表示したいが datetime 属性は必須?
A: 必須ではありませんが、機械可読性のために必ず付けるべきです。属性を省くと SEO 効果が大幅に下がります。
Q: タイムゾーンを書かないと?
A: ローカルタイム扱いになります。グローバル配信するサイトでは +09:00 や Z (UTC) を必ず付けましょう。
Q: 期間 (Duration) はどう書く?
A: ISO 8601 Duration 形式 (PT1H30M = 1 時間 30 分) を使います。料理レシピサイト等で「調理時間 30 分」を機械可読化するときに有用です。