◀ 22.

HTML time 要素完全ガイド (SEO/構造化データ)

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

time 要素とは

要素は、日付・時刻・期間などの日時情報を機械可読な形でマークアップする HTML5 要素です。視覚的には通常のテキストと変わりませんが、検索エンジンや支援技術 (スクリーンリーダー) はこれを「日時」と認識します。

datetime 属性 (ISO 8601 形式)

datetime 属性には ISO 8601 形式の文字列を指定します。表示テキスト (要素の中身) は人間向けに自由に書け、機械可読な値は属性側で表現します。

形式例意味
YYYY-MM-DD2024-01-15日付
YYYY-MM-DDThh:mm2024-01-15T09:00日時 (ローカル)
YYYY-MM-DDThh:mm:ssZ2024-01-15T00:00:00ZUTC
YYYY-MM-DDThh:mm:ss±hh:mm2024-01-15T09:00:00+09:00タイムゾーン付き
YYYY-MM2024-01年月
YYYY2024年のみ
--MM-DD--01-15毎年の日付 (誕生日等)
hh:mm:ss14:30:00時刻
PnYnMnDTnHnMnSPT2H30M / 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 分」を機械可読化するときに有用です。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素（強調）の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
2026-06-11 01:08:59 guest 223

人気ページ

最近更新/作成されたページ