OGP で指定する画像について調べることがありOGP仕様(ogp.me)を見ていたら、こんな記述が。
og:image:alt - A description of what is in the image (not a caption). If the page specifies an og:image it should specify og:image:alt.
og:image:alt
なんてあったっけと思い、 Internet Archive で履歴を追ってみたところ、どうやら2017年7月下旬に追加されていたようです[1]。
これ、「should specify」と書かれていることから、必須とまでは言わないが基本的には指定する必要がある、くらいのニュアンスだと思われます。しかし、実際のところどんな値を指定すべきなのでしょうか。
<img> 要素による画像の場合、その画像の性質や周囲のマークアップによって alt 属性値を何にするかが変わってきます。HTML仕様における代替テキストの要件では 4.8.4.4.1 ~ 4.8.4.4.13 の13個ものガイドラインが書かれていますが[2]、適切な代替テキストというものはそれだけ複雑な考えの基に決定されるものなわけです。一方、OGP仕様では
A description of what is in the image (not a caption).
とざっくりした説明に留まっています。
また、そのOGP仕様のページ自身のOGPを見ると、 og:image
がロゴ画像なのに対して、その代替テキストは
<meta property="og:image:alt" content="The Open Graph logo">
となっています。えっ、ホントにこれでいいのでしょうか。HTML仕様書のロゴ画像のガイドラインには
The alt attribute must not contain text like the word "logo"
と思いっきり書かれているのですが。
なんかあまり参考にならない感じですね……。
SNSサービスの対応可否
仕様で定義されたとおりに従えば万事解決ならそれでいいのですが、どうにも心許ない感がするので、実際の利用ケースとして著名なSNSサービスがどうなっているのか調べてみました。
デベロッパー向けのCards markup(developer.twitter.com)を見ると、og:image:alt
の記述はなく、代わりに twitter:image:alt
が定義されています。しかし実際に試してみると og:image:alt
も認識しました。
URL付きのツイートをしてみると、画像部分のマークアップはこんな感じになります。
- 実際はもっと複雑ですが、例示のため余計な要素や属性を削除しています。
<div><!-- ← ここにフォーカスが当たる -->
<div aria-hidden="true">
<a href="{{ url }}"><!-- ← ここにはフォーカスは当たらない -->
<div aria-label="{{ alt }}">
<img alt="{{ alt }}" src="{{ image }}">
</div>
</a>
</div>
<div>
<a href="{{ url }}">
<span>{{ title }}</span>
<span>{{ description }}</span>
</a>
</div>
</div>
og:image:alt
がない場合、あるいは og:image:alt
の値が空の場合は alt 属性値と、その親要素の aria-label 属性値が空になります。
<a href="{{ url }}"><!-- ← ここにはフォーカスは当たらない -->
<div aria-label="">
<img alt="" src="{{ image }}">
</div>
</a>
このHTML断片だけを見ると、一見ダメなやつに見えます。具体的にはHTML仕様の4.8.4.4.2 A link or button containing nothing but the imageにあるように、 <a href> の中身が画像のみの場合、その alt 属性値はリンクの目的を伝えるテキスト(リンク先のページタイトルとか)を含まなければなりません。
しかし、実際にはこの <a> 要素にはフォーカスが当たらず、その祖先の <div> 要素にフォーカスが当たります。たぶん JavaScript でゴリゴリやっているのでしょう。そして、フォーカスの当たる <div> 要素(事実上の <a> 要素)は内部に og:title
などの値を含んでいるのでそちらが読まれます。
逆に言えば、 og:image:alt
を設定しても、それがHTML上には現れるものの実際に読み上げられることはありません。視覚的にも、 <img> に対して opacity: 0 が指定されているため、画像が読み込まれない環境でも alt 属性値は見えない状況です。
要するに、 Twitter は og:image:alt
に対応はしているものの、閲覧するユーザーにとっては未指定と変わらない状況のようです。
ウェブ管理者向けシェア機能ガイド(developers.facebook.com)には og:image:alt
の記載はありません。シェアデバッガー(developers.facebook.com)で試してみましたが、 og:image:alt
の指定は無視されるようです。
シェアデバッガー上の画像部分のマークアップはこんな感じです。
- 実際はもっと複雑ですが、例示のため余計な要素や属性を削除しています。
<a href="{{ url }}" aria-describedby="{{ ID }}" aria-label="{{ title }}" tabindex="-1">
<div id="{{ ID }}">{{ description }}</div>
<img src="{{ image }}" alt="">
</a>
リンクアンカー内に存在する画像の alt属性値が空になっていますが、別途 <div> 要素に og:description
の値が入っており、また aria-label に og:title
が指定されているので、画像非表示環境やスクリーンリーダーの読み上げでも問題は起こらないと思います。
- 仮に問題あったとしても、そもそも
og:image:alt
が無視されるので、ページ制作者としては対処のしようがないですが。
mixi
もう mixi やっていないので実際のところは分かりませんが、デベロッパー向けのSpecification(developer.mixi.co.jp)には og:image:alt
の記載はありません。
これらの状況を見て、改めて og:image:alt
を指定する意味はあるのか、と感じます。
一応仕様的には「should specify」とは言われているものの、実際著名なサービスは対応していない、ないしユーザーにとって意味の無い状況であり、仮に今後対応されたところで、どんなテキストを入れるべきなのか判断しかねるような……。
- [1]2017年7月27日(web.archive.org)には存在せず、2017年7月28日(web.archive.org)には存在します。
- [2]ガイドラインの章の数は15ありますが、最後の2つはオーサリングツールや適合性チェッカー向けの記述なので、ページ制作者が読むべきガイドラインとしては13個です。