noscriptタグのサポートをGoogleは完全にやめるかも、Lazy-load画像のためであってもnoscript利用は推奨しない

[レベル: 上級]

JavaScript で遅延読み込みする画像を確実に認識させる手段として <noscript> タグの使用を Google は提案していました。
しかしながら、将来的に、<noscript> のサポートを Google は完全にやめるかもしれず、利用はもはや推奨しないと Google の Martin Splitt(マーティン・スプリット)氏はコメントしました。

JavaScript の SEO をテーマにしたオフィスアワーでの発言です。

Lazy-load のフォールバックとしての noscript

Lazy-load で画像を遅延読み込みさせる環境で、Lazy-load を実装する JavaScript を Google が実行できず画像を認識しなかった場合に備えて <noscript> で画像の情報を提供しておくことができます。

<noscript> はスパムに乱用されてきた経緯があります。
基本的に、<noscript> 内のコンテンツを Google は無視します。
ですが、画像だけは例外です。
画像コンテンツに関してだけは、<noscript> の中に含まれていても利用しています。
(※すずきメモ: 信頼できる方の検証では、 <noscript> 内のテキストでも Google はインデックスしていたとのことでしたが、とりあえず Google の公式発言に従います)。

スプリット氏によれば、少なくとも(このオフィスアワーが開催された)2020 年 4 月 8 日の時点では、画像に対してのみ <noscript> をサポートするとのことでした。

<noscript> を完全にサポートしなくなるかも

説明したように、現状では画像に対しては <noscript> を Google はサポートしています。
ところが将来的には、画像に対しても <noscript> をサポートしなくなる可能性があることにスプリット氏は言及しています。

Lazy-load 画像を認識するのに必要ないとエンジニアが判断すれば、画像であっても <noscript> のサポートは終了します。

Lazy-load 画像を Google に確実に読み込ませる方法

実際問題として、<noscript> を Google がサポートしなくなっても問題ありません。
フォールバックとしての <noscript> なしでも、Lazy-load を Google に確実に認識させることが現在は可能です。

Lazy-load 画像を Google に確実にインデックスしてもらう方法はいくつもあります。

IntersectionObserver API

最も推奨されるのは IntersectionObserver API の使用です

IntersectionObserver を、Google のレンダリングエンジンはサポートしています。
IntersectionObserver によって遅延読み込みされる画像をクロール、インデックスできます。
(※IntersectionObserver をサポートしないブラウザのために polyfill も構成したほうがいい)

ネイティブ Lazy-load

IntersectionObserver を使わずに loading HTML 属性によるネイティブ Lazy-load を実装する手段もあります。

Googlebot は Chrome をレンダリングエンジンとして使っています。
loading 属性をサポートしています。

ネイティブ Lazy-load に問題点があるとすれば、Chrome と Firefox でしか現状では機能しない点でしょうか。

構造化データ

Lazy-load 画像であるなしに関わらず、画像の情報を検索エンジンに確実に伝えるために構造化データも利用できます。

ImageObject タイプで画像をマークアップするといいでしょう。

もし、Lazy-load 画像を Google に確実に認識させる予防策として <noscript> タグを使っているとしたら、別の手段に早めに置き換えましょう。
<noscript> のサポートを Google が完全に終了する可能性があります。