最近よくSVGを使っている。何かと便利なので、IE8を考慮しなくてもよい時は、写真以外の画像は全てSVGにしてしまっている。IE8さえなければもっと大胆に使えるのに…。滅びろIE8…。(IE6,7はもう既に完全に何も考えてない)

で、SVGを使いだしてから気になっていたことがある。これってSEO的にはどうなんだろうと。

img要素の場合であれば、alt属性で代替テキストを指定することができるので、その画像に何が描かれているかを検索エンジンへ伝えることができる。SVGの場合には、そういった代替テキストの話を全く聞いたことがなかった。

ということで、勉強のため、SVGの場合にもimg要素のaltに代わるようなものがあるのか調べてみました。

※インラインSVGの場合で、imgでSVGを表示させるのであれば、通常通りalt使う。

普通にあった

結論から言うと、当然のようにあった。しかも２種類。title要素とdesc要素。

desc要素とtitle要素

要素名だけ見て一目瞭然だけど、それぞれタイトルとディスクリプションということになると思う。alt属性のように、必須ではなく、SVGの子要素として使用する。title要素とdesc要素に囲まれた部分は、もちろん画像としては出力されない。

title要素の場合、ユーザーエージェントによっては、ツールチップとして表示することできる(ポインターをのせると文字が表示されるやつ)。

なお、title要素を使うときは、親要素の最初の子要素としなければいけないとのこと。そうじゃないとツールチップとして表示されないとか書いてあるところもあったけど、そうじゃなくてもクロームでは表示されてたので謎。

また、なぜかSVG要素の直下?だと、ツールチップは表示されなかった。g要素とかでグループ化して、SVG要素以外の親要素を作ると大丈夫だった(この場合、g要素が親要素となり、その最初の子要素としてtitle要素を配置する)。これもまた謎。

desc要素についてはその名の通り説明文を入れればいいみたい。

つまりは、以下のような感じにしてやればいいと思います。

<svg width="100px" height="100px">
    <g>
        <title>菱形</title>
        <desc>これは色のついたただの菱形</desc>
        <path fill="rgb(59, 61, 37)" d="M50.000,-0.000 C50.000,-0.000 -0.000,50.000 -0.000,50.000 C-0.000,50.000 50.000,100.000 50.000,100.000 C50.000,100.000 100.000,50.000 100.000,50.000 C100.000,50.000 50.000,-0.000 50.000,-0.000 Z"/>
    </g>
</svg>

これを普通に表示するとこんな感じになる。

alt属性とは違う

HTMLのalt属性とは、やはり少し意味合いが違うのかなと思った。altの主目的は、画像が表示されなかった時の代替であり(検索エンジンによっては検索対象として含む)、あくまでもユーザーのためのもの。

SVGの場合、(SVGがXMLであることから)表示されないということは想定されていないように思うので、titleとdesc要素はユーザーに向けてというよりも検索エンジンに向けてというほうが強いのではないかなと思った。

ということになると、SEO的には非常に重要になってくる訳だけど、検索エンジンがSVGのtitle要素とdesc要素を認識しているのかは分からない。そんな記述も見当たらなかった。

まとめ

インラインSVGに対して、テキストを指定することは、title・desc要素によって可能。ただ、それがSEO的にどうなのか(検索エンジンが検索対象として見ているのか)ということはよく分からない。

海外サイトで使われているSVGとか、たまにコード自体を見てみたりするんだけど、titleとかdescとかの要素は一度も見たことがなかった。一般的でないのかもしれないし、あまり意味はないのかもしれないけど、個人的には付けていこうかなと考えている。ロゴとか重要な部分にはあった方がいいような気がするんだよな。

分かる人教えてください。