og:image の代替テキスト(og:image:alt

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.

Structured Properties ー The Open Graph protocol(ogp.me)

og:image:alt なんてあったっけと思い、 Internet Archive で履歴を追ってみたところ、どうやら2017年7月下旬に追加されていたようです[1]

これ、「should specify」と書かれていることから、必須とまでは言わないが基本的には指定する必要がある、くらいのニュアンスだと思われます。しかし、実際のところどんな値を指定すべきなのでしょうか。

<img> 要素による画像の場合、その画像の性質や周囲のマークアップによって alt 属性値を何にするかが変わってきます。HTML仕様における代替テキストの要件(WHATWG) では 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仕様書のロゴ画像のガイドライン(WHATWG) にはThe alt attribute must not contain text like the word "logo"と思いっきり書かれているのですが。

なんかあまり参考にならない感じですね……。

SNSサービスの対応可否

§

仕様で定義されたとおりに従えば万事解決ならそれでいいのですが、どうにも心許ない感がするので、実際の利用ケースとして著名なSNSサービスがどうなっているのか調べてみました。

Twitter

§

デベロッパー向けの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(WHATWG) にあるように、 <a href> の中身が画像のみの場合、その alt 属性値はリンクの目的を伝えるテキスト(リンク先のページタイトルとか)を含まなければなりません。

しかし、実際にはこの <a> 要素にはフォーカスが当たらず、その祖先の <div> 要素にフォーカスが当たります。たぶん JavaScript でゴリゴリやっているのでしょう。そして、フォーカスの当たる <div> 要素(事実上の <a> 要素)は内部に og:title などの値を含んでいるのでそちらが読まれます。

逆に言えば、 og:image:alt を設定しても、それがHTML上には現れるものの実際に読み上げられることはありません。視覚的にも、<img> に対して opacity: 0 が指定されているため、画像が読み込まれない環境でも alt 属性値は見えない状況です。

要するに、 Twitter は og:image:alt に対応はしているものの、閲覧するユーザーにとっては未指定と変わらない状況のようです。

Facebook

§

ウェブ管理者向けシェア機能ガイド(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-labelog: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個です。 ↩ 戻る