HTML

正しい <time> タグの書き方を勉強してみる

正しい <time> タグの書き方を勉強してみる

サイトに投稿した記事の公開日時を正確にブラウザやクローラーに伝えるために<time>タグを利用することがあります。

この<time>タグが意外とやっかいで、ただ日時を囲えばいいというものではないことを当サイトを制作時に知りました。

今回は、改めてその正しい書き方について勉強してみたいと思います。

<time> を正しく書く理由

なぜ<time>を正しく書かなければいけないのか。最初にも説明しましたが、サイトの更新日時を正確にブラウザやクローラーに伝えるためです。

検索サイトに更新日時が正確に伝われば、それを考慮して検索結果にページを表示してくれます。古くなって正確さが保証できないものは上位に表示されにくくなったり、新しくて新鮮な情報が上位に表示されやすかったり……というようなことがあるそうです。

もっとも、Googleはページに書かれた更新日時を読み取っていないそうですが……。とはいえ、今後クロールの方法を変えるかもしれませんし、正確にマークアップする意義はあると思います。

個人的にはバリデーションチェックでエラーが出ない気持ちよさが最重要事項だったりするんですけど🙄

<time> の書き方

<time itemprop="dateCreated datePublished dateModified" datetime="2017-04-23T14:05:51+00:00">2017.4.23</time>

まず、当サイトでどう書いているのか見てみましょう。一応エラーの出ない形になっています。実際はクラスを当てていますが、今回は関係ないので外しました。

以上のコードで大事なのは、datetime 属性日時の書式、そして schema.org による構造化マークアップです。

正しい書式

<time itemprop="dateCreated datePublished dateModified">2017-04-23T14:05:51+00:00</time>

datetime 属性は<time>内に正しい書式で日時が書かれていれば不要2017-04-23T14:05:51+00:00のようにな書式を<time>で囲っているなら設定しなくて大丈夫です。

ただ、この書式がかなりやっかいで、MDN曰く“省略可能な時刻を伴う有効な日付の文字列 (valid date with an optional time string)”で表記しなければいけません。具体的にはISO8601書式での表記となります。例はHTML5.JPで参照してみてください。

この書式で時間まで含めて表記するとかなり冗長になってしまいますし、日本語や相対時間での表示にも対応できません。

自由なスタイルで日時を表示したい場合は datetime 属性を使います。

datetime 属性

<time itemprop="dateCreated datePublished dateModified" datetime="2017-04-23T14:05:51+00:00">9時間前</time>

datetime 属性に正しい書式で日時を書けば<time>内の書き方は自由。年月日表記や相対時間表記でも大丈夫です。

日時を表すテキストじゃなくてもいいのかもしれませんが、サイトを訪れた方に対してあまり親切ではないですよね……。読んでくれる人に分かりやすい表記にするのがいいと思います。

schema.org で構造化マークアップ

<time itemprop="dateCreated datePublished dateModified" datetime="2017-04-23T14:05:51+00:00">2017.4.23</time>

さらに、schema.org で構造化マークアップすると、より正確な情報が検索エンジンに伝わります。前述したとおりGoogleは更新日時を読み取っていないそうですなのですが、正しく書いて悪いことはないはず。気にされる方は記述すると良いと思います。

schema.org とは

schema.org は、Web ページの構造化データ用のスキーマを作成、管理、および宣伝するという使命を持つ共同体的なコミュニティ活動です。Google、Microsoft、Yahoo、Yandex によって設立されました。

策定された共通仕様に沿ったコーディングをすることにより、Bing、Google、Yahoo などの大手検索エンジンに正確な情報を収集してもらい、ユーザーに最適な検索結果を提供します。

上記サンプルで大事なのはitemprop="dateCreated datePublished dateModified"という部分。それぞれ以下のような意味があります。

dateCreated記事やファイルが作成された日時を指定します。省略できます。
datePublished記事やファイルが最初に公開された日時を指定します。
dateModified記事やファイルの最終更新日時を指定します。更新が無い場合は datePublished と同じ日時を指定するか、省略できます。

さらに、<time>のマークアップだけでは意味を為さないので注意が必要です。記事全体を囲むタグやタイトルを含め、当サイトでは以下のように記述しています。

<article itemscope itemtype="https://schema.org/BlogPosting">
	<h1 itemprop="headline">タイトル</h1>
	<time itemprop="dateCreated datePublished dateModified" datetime="2017-04-23T14:05:51+00:00">2017.4.23</time>
	<section itemprop="articleBody">本文</section>
</article>

全体を囲う<article>内のBlogPostingと書かれた部分は、記事内容によってArticleNewsArticleなど適切なものを選択した方がいいみたいです。当サイトは全てArticleなのですが、これはちょっと考え直した方がいいかも……。

例えば、“他人の手による編集の無く、カジュアルな文体で書かれている自分の意見が含まれたエントリー”がブログ記事で、“他人の手によって編集されている、正しい文法で書かれた、取材や事実に基づいた記事”が所謂「記事」であるという見方もあります。

そういった境目は曖昧になりつつあると思いますが、気にされる方は厳密に定義して記述されるといいかもしれません。

あと、schema.org をちゃんと書こうとすると HTML が冗長になりがち(meta タグ使ったりしはじめるとけっこう大変)なので、JSON で書く方がスマートだと思います。ぼくはうまくできてないですけど😭


ということで、<time>の書き方を勉強してみました。

ぼく自身、いろいろ調べつつ書いたのでとても勉強になりました。SEO 対策になるような内容ではありませんが、何かの参考になれば幸いです。

また、気になる点などありましたら Twitter などで教えていただけるとうれしいです。読んでいただいてありがとうございました😚