テキストと同じ title 属性を設定するのは止めよう

<a href="URL" title="テキスト">テキスト</a> のように、表示しているテキストと同じ title を設定するのは止めましょう。 特に a 要素で多く見られるように思います。

title 属性は補足の情報を示すべきであって、既存の情報を提供するものではありません。 テキストは短くなるし、ユーザに余計な情報を与えないで済みますし、既存の情報なんてない方が良いです。

SEO や title 属性の設計方針

とりあえず付けておいた程度の title 属性に、SEO の効果があるとは考えにくいでしょう。

また多くのブラウザがマウスオーバーなどでツールチップのように title の情報を表示しますが、 W3C は、title 属性に頼ることを推奨していません。 マウスのようなポインタがないデバイス(タブレット・スマートフォンの類)では表示させることが困難ですから、W3C の言い分は正しいでしょう。

中長期的に見て、タブレットやスマートフォンが title 属性を活用する未来もあるとは思います。

title 属性はグローバル属性

title 属性はグローバル属性ですから、あらゆる要素に適用することができます。 ここで特に a 要素について述べているのは、a 要素とテキストが重複するようなケースが多くみられるためです。 WordPress のテーマファイル内などで見かけられます(公式テーマを含む)。

title 属性の活用方法

真に重要な補足情報であるのであれば、ツールチップのような形式で表示させるのではなく、 ユーザに常に見える形で可視化されるべきです。したがって、title 属性が活用できるケースは実際には少ないと思います。

またツールチップの表示時間は短く、表示形式についても、長い文章を読ませるためのものではないことを理解しておく必要があります。

例えば入力フォームに title 属性が付いていれば、いくつかある入力フォームで入力場所を誤るミスを軽減できるでしょう。

例えば HOME なるリンク(a 要素)が存在するとき、title 属性によって、どこの HOME に戻るかを明示することが出来るでしょう。 ただし、可能な限り "A の HOME", "B の HOME" とするべきであるとは思います。

同じように、日付別のアーカイブページへのリンクが、YYYY年MM月DD日 表記などの場合に、"YYYY年のアーカイブ"とするのも良いです。 "YYYY年のアーカイブ" とページ上に表記することはまずないでしょうから、title 属性が役に立ちます。

例えば、再生ボタンなどは、テキストを表示するよりもアイコンやマークを表示したほうが直観的で情報を簡潔に伝えることができます。 そのようなボタンに対して、補足情報として、"再生" などのテキストを表示することは有用でしょう。

Reference