この記事の要点

<time> は日時を機械可読にマークアップする HTML5 要素 datetime 属性に ISO 8601 形式 (例: 2024-01-15T09:00:00+09:00) を入れる SEO で重要: Google が記事の公開日として認識し、検索結果のスニペットに表示 Schema.org 構造化データ (Article の datePublished) と併用すると効果的 廃止された pubdate 属性は使わず、代わりに itemprop="datePublished" を併記

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 分」を機械可読化するときに有用です。