[レベル: 上級]
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 が完全に終了する可能性があります。