こんにちは、現在web制作フリーランスとして活動しているしょーご(@samuraibrass)です。
みなさんLazyloadを活用されてますか?画像を遅延読み込みすることでWebサイトのページ表示を高速化し、
SEOやユーザビリティ的に有利にするという手法です。
通常はWordPressであればプラグイン、その他サイトであればライブラリを活用するのが一般的かと思います。
しかし、ここにはある注意点があります。
Lazyloadで画像検索に引っ掛からなくなる!?
ソースはこちら。
高速な表示というユーザー体験を高める点では Lazy Load には利点があるのですが、SEO には不向きです。
なぜなら、検索エンジンのクローラはスクロールしないからです。
スクロールしなければ画像は出現しません。
つまり、検索エンジンは画像を認識しません。
当然、その画像をインデックスすることもありません
(海外SEO情報ブログより)
https://www.suzukikenichi.com/blog/two-ways-to-have-lazy-loading-images-indexed/
既存のLazyload系のプラグインではまだスクロールで画像出力を制御しているものもあります。
またプラグインもいまいちどのプラグインがちゃんと対応しているのかもよくわかりません。
IntersectionObserver APIがGoogle推奨
画像の遅延読み込みを正しく行うためには、IntersectionObserver APIを利用して遅延読み込みを行っているプラグインを使用することが大切です。
これはGoogleが公式に推奨しているLazyload実装方になり、検索エンジンがスクロールせずとも、画像を取得することができます。
2019年6月よりPolifilも要らなくなりました。
Native LazyloadプラグインでOK
お待たせしました。万を辞してGoogle自信がリリースした「Native Lazyload」がおすすめのプラグインとなります。
SEOを管理するGoogleのプラグインなので、当然IntersectionObserver APIを利用しています。
プラグインをインストールするだけ
特に設定は要りません。
このプラグインがしてくれることは
- Chromeに対してはloading属性を付与し、 loading=”lazy”で遅延読み込み
- Chrome 以外のブラウザに対してはフォールバックとして、JavaScript の
IntersectionObserver
API
他のWordPressのプラグインでどれがどれほど対応しているかは把握できていないですが、Lazyload系のプラグインが2つかぶると競合するので、
こちら一本に絞った方がいいように思います。
SEOの管理者であるGoogleが作ったプラグインなので、「Native Lazyload」で間違いないと思います。
ご寄付を頂けると今後の更新の励みになります!