「aria-label」さてさて、最近気になったことがひとつあるんです。HTMLにSVGをインライン埋め込みにした場合、GoogleさんにSVGの「<title>」や「aria-label」が検索エンジンにインデックスされるのかテストしてみました。上記の実験をしている途中で見つけた海外サイトまとめ結論:インデックスされないただの文字列となる<img>タグでSVGを読み込む時はaltをつけられるので、それに関してはGoogleのテキスト検索の方も、画像検索の方もちゃんと認識されるので問題ないのですが、それがインラインSVGの場合は、結論としてはただのXMLのテキスト=検索エンジンには認識されないことが検証の結果わかりました。<title>に関しては、特に意味はないですが、SVGの箇所にマウスをあてると吹き出しとして指定した文字列が表示されます。これは<img>タグのtitleとかと同じ動きです。role=”img”としてaria-labelを設定しましたが、こちらに関しては、上記と同様です。そもそも用途としてスクリーンリーダー用の機能ですから、スクリーンリーダーで読む場合は威力を発揮しそうです。height="78"/></svg>こんな感じで<title>を挿入しました。検索などでgnkgnk222で検索してもうんともすんともいいません。これに関しては意味がないという結果です。height="78"/></svg>こんな感じでrole=”img”として、aria-labelを記述。こちらに関してもGoogle的にはうんともすんとも。※スクリーンリーダーでは意味があると思います。上記の実験をしている途中で見つけた海外サイトブラウザでちゃちゃっと、イラストやダイアグラムを作れるサービスVectaのブログにこんな記事がありました。Imagehttps://vecta.io/blog/best-practices-for-svg-seo-in-google-imageこちらの方の結論の通りで私も同じ結果になりましたが、もしGoogleに反映させたい場合は<img>タグを使用するというのは結論ですね。してもアニメーションさせたい場合はSVGの中でCSS書いて<img>タグで読み込む。JSで操作したい場合は、インラインにする、ただし意味はないオブジェクトになってしまう。NOW」発刊しました。Blog滞在2時間、普通に熊が出ます。山形の秘境「板谷駅」で初秋を切り取る。Blog人生に、ホームフォレストを。Blog気になるワード。Direction気になるワード。NOW」発刊しました。usホームページやインターネット広告などに関するご相談、ご質問などお気軽にお問い合わせください。お見積りやご相談はすべて無料で承ります。