インラインSVGのSEO的実験：「title属性」 or 「aria-label」
さてさて、最近気になったことがひとつあるんです。
HTMLにSVGをインライン埋め込みにした場合、GoogleさんにSVGの「<title>」や「aria-label」が検索エンジンにインデックスされるのかテストしてみました。
それのメモです。
結論：インデックスされないただの文字列となる
<img>タグでSVGを読み込む時はaltをつけられるので、それに関してはGoogleのテキスト検索の方も、画像検索の方もちゃんと認識されるので問題ないのですが、それがインラインSVGの場合は、結論としてはただのXMLのテキスト＝検索エンジンには認識されないことが検証の結果わかりました。
<title>に関しては、特に意味はないですが、SVGの箇所にマウスをあてると吹き出しとして指定した文字列が表示されます。これは<img>タグのtitleとかと同じ動きです。
role=”img”としてaria-labelを設定しましたが、こちらに関しては、上記と同様です。
ただし、そもそも用途としてスクリーンリーダー用の機能ですから、スクリーンリーダーで読む場合は威力を発揮しそうです。
詳細：<title>を入れた場合
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 78 78" style="enable-background:new 0 0 78 78;" xml:space="preserve">
<style type="text/css">
.st0{fill:#009FE8;}
</style>
<title>gnkgnk222</title>
<rect class="st0" width="78" height="78"/>
</svg>
こんな感じで<title>を挿入しました。
検索などでgnkgnk222で検索してもうんともすんともいいません。
これに関しては意味がないという結果です。
詳細：aria-labelを入れた場合
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 78 78" style="enable-background:new 0 0 78 78;" xml:space="preserve" role="img" aria-label="gnkgnk111">
<style type="text/css">
.st0{fill:#009FE8;}
</style>
<rect class="st0" width="78" height="78"/>
</svg>
こんな感じでrole=”img”として、aria-labelを記述。
こちらに関してもGoogle的にはうんともすんとも。
※スクリーンリーダーでは意味があると思います。
上記の実験をしている途中で見つけた海外サイト
ブラウザでちゃちゃっと、イラストやダイアグラムを作れるサービスVectaのブログにこんな記事がありました。
-
Best Practices for SVG SEO in Google Image
https://vecta.io/blog/best-practices-for-svg-seo-in-google-image
こちらの方の結論の通りで私も同じ結果になりましたが、もしGoogleに反映させたい場合は<img>タグを使用するというのは結論ですね。
どうしてもアニメーションさせたい場合はSVGの中でCSS書いて<img>タグで読み込む。
JSで操作したい場合は、インラインにする、ただし意味はないオブジェクトになってしまう。
まとめ
S＝すごい
V＝ゔぇんり！
G＝が、しかし！？
