HTML
HTML5
SEO
HTML,CSS
新人プログラマ応援

マークアップ時にtitle属性の必要性に関して、数秒でも時間を費やすのが煩わしいので、整理して、投稿いたします。

title属性とは

  • グローバル属性なので、全ての要素(タグ)に追加することができる
  • ツールチップに助言的な情報を表示するもの
    image.png 「Button1です」がツールチップ

W3Cが定義しているtitle属性の使用用途

  • リンク: タイトルもしくは対象リソースの記述
  • 画像: タイトルもしくは説明
  • 段落: 脚注もしくは解説
  • 引用: ソースの詳細情報
  • インタラクティブコンテンツ: 用途に対する分類や指示など
    インタラクティブコンテンツの例: a, button, input, img, label, select, texture, video

title属性の使い分け(本題)

アイコンや記号以外では使用しないのが適切かと思います。
※もちろんimgタグには、title属性を入れないことで統一するということです。

理由は、下記の2つの観点からです。

SEOの観点から

  • Imgタグは、alt属性が代替テキストの役割を担っている
  • alt属性などのテキストコンテンツと重複させると、スパムとして捉えられる可能性がある
  • スマホ、タブレットでは、ツールチップが表示されないので、PCとの差異が生まれる
  • 有無がクローラの評価に影響しない可能性がある

見た目の観点から

  • コンテンツの上に表示される
  • 一律、シンプルなデザインのため、ページの世界観を壊す可能性がある

実例

ヤフーのホームページにて、検索窓直下に三角があります。
この三角をホバーして2秒待つと、「キーワード入力補助を開く」というツールチップが開きます。
image.png

例外

W3Cがtitle属性を推奨しているもの

  • link
  • abbr
  • dfn
  • menuitem そのタグを使うかどうかは置いといて。

abbrは、略語を指す時に使用する
<p>最近、<abbr title=“ProgressiveWebApplication”>pwa</abbr>が気になっている。</p>

pwaは略称であり、本当は、ProgressiveWebApplicationと言うことを伝えることができます。
伝えるのは、ユーザーだけでなくクローラに対してもだと思います。

所感

ツールチップが表示されるまで2くらいかかるので、むしろ、使わないくらいの感覚でいいと思います。
title属性は使わず、ツールチップ自体の使い方は工夫できると思います。

参考:w3c