pictureタグの入れ子になったimgタグの画像もGoogleはインデックスする

by 

[レベル: 中級]

Google は、画像検索 SEO のベストプラクティスのドキュメントを更新しました。

<img> タグでマークアップされた画像ファイルは、<picture> タグなどほかの要素の中に入っていてもインデックスの対象になります。

より明確にドキュメントに文書化

ページの読み込み速度を向上させるために、より軽量なフォーマットで画像を配信するサイトも増えてきていることでしょう。
<picture> タグを使うことで、ブラウザがサポートする画像フォーマットを読み込ませることができます。


<picture>
 <source type="image/avif" srcset="cute-puppy.avif">
 <source type="image/webp" srcset="cute-puppy.webp">
 <img src="cute-puppy.jpg" alt="かわいい子猫">
</picture>

このようにマークアップすれば、ブラウザのサポート状況に応じて記述の順番に従って読み込みます。

  1. AVIF 画像 (cute-puppy.avif)
  2. WebP 画像 (cute-puppy.webp)

AVIF をサポートしていれば cute-puppy.avif を読み込みます。
サポートしていなければ、cute-puppy.webp を読み込みます。

しかし、<picture> をサポートしていなかったり、AVIF や Webp などの最新の画像フォーマットをサポートしていなかったりするブラウザをユーザーが使っている場合があります。
そうした場合のフォールバックとして、もっと汎用的なフォーマットの画像を <img> タグで指定することが推奨されます。

コード例の <img src="cute-puppy.jpg" alt="かわいい子猫"> の部分です。

<picture> タグの中に入れ子として <img> タグが含まれていますが、この状態でも、<img> タグで指定した画像を Google は読み取ってインデックスの対象とするという記述がドキュメントに追加されたのです。

Google parses the HTML <img> elements (even when they’re enclosed in other elements such as <picture> elements) in your pages to index images

📝すずき注: この記事を公開する時点では日本語ドキュメントは未更新

以前からこのとおりで仕様が変わったわけではありません。
明文化しただけです。
それでも明確に書かれていれば疑問に感じることもなくなります。

僕のブログでは、AVIF と、PNGまたはJPEG のフォーマットで画像を配信しています（WebP は配信していない）
現状では Google 画像検索は AVIF をサポートしていません。
それでも、<img> タグで指定した PNG/JPEG 画像をきちんとインデックスしています。

ということで、<picture> タグを使って軽量フォーマットで画像を配信していたとしても、<img> タグで指定した画像も 画像検索ではたしかにインデックス対象になります。