SEOに適した画像のLazyLoadを実装する【IE11対応】

画像のLazyLoadは、Webサイトの高速化に大きく貢献してくれます。
しかし、実装方法によっては、LazyLoadで読み込むコンテンツが、GoogleBotにクロールされないなど、SEO的に問題があったことも事実です。

先日、GoogleはSEOに適するLazyLoadの実装方針について公開しました。
今回は、そちらの実装方法を試してみるとともに、LazyLoadの実装方法をまとめました。

また、今回の実装についてデモを作成しました。

参考になればと思います。

Googleが公開したSEOに適するLazyLoadの実装方針

Googleはデベロッパーサイトで、LazyLoadされたコンテンツをクロールしてインデックスする方法について公開しました。

その内、画像のLazyLoadに必要なことは次の2つです。

画面に表示されている時にコンテンツが読み込まれていること

viewport内のコンテンツが目に見える状態である必要があります。
また、LazyLoadの実装には、IntersectionObserver APIpolyfillを使うように記載されています。

テスト方法

PuppeteerというヘッドレスChromeを制御することのできるNode.jsのライブラリを利用したテストスクリプトを公開してくれています。

テストについては、後でサンプルを作成して試してみることにします。

以上がGoogleの方針となります。
次に、こちらの方針に則り実装してみます。

画像のLazyLoadを実装する

それでは、画像のLazyLoadを実装してきます。

ライブラリ選定

今回は、lazyloadにこちらのライブラリ 「lazyload」を利用します。

こちらのライブラリは、lazyloadの処理にIntersectionObserver APIが使われています。

jQuery依存のライブラリですが、最近のWebサイトでもjQueryは良く使われていますので、今回の実装にも採用しました。

IntersectionObserverのブラウザ対応状況

IntersectionObserverのブラウザ対応状況

Can I Useでブラウザサポート状況を確認すると、SafariやIE11で対応されていません。

polyfillを利用してSafari・IE11でも動作するようにします。

LazyLoadの実装

こちらにLazyLoadのデモをアップしました。
LazyLoadの処理は、以下の箇所となります。

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js"></script>

<script>
    $('img').lazyload();
</script>
  1. jQueryを読み込み
  2. lazyloadライブラリを読み込む
  3. LazyLoadしたい要素に対して、lazyloadを実行する

以上で、画像をLazyLoadするようになります。ライブラリを使うと簡単ですね。

また、LazyLoadする場合は、事前に高さを設定しておくと表示した時にガタつかなくなります。

IE11に対応する

IntersectionObserverのpolyfillを使い、IE11に対応させます。

こちらに、pollyfillを利用した画像のLazyLoadのデモをアップしました。併せて参考にしてみてください。

使い方は非常に簡単で、LazyLoadの処理の前にpolyfillを読み込むだけです。

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js"></script>

LazyLoadのテスト

最後に、上述のテスト方法により、LazyLoadをテストします。

テストスクリプトをダウンロードします。

$ git clone https://github.com/GoogleChromeLabs/puppeteer-examples

ダウンロードしたディレクトリに移動して、モジュールをインストール。

$ cd puppeteer-examples
$ npm i

テストスクリプトを実行します。
テストするURLを指定して、画像を保存するようにオプションをつけます。

$ node lazyimages_without_scroll_events.js -u http://blog.hiroyuki90.com/demo/lazyload/ -s

処理が終了すると、以下のような画像が作成されます。

LayLoadのテスト結果

左側の画像がスクロールせずに読み込んだ結果、右側がスクロールして読み込んだ結果となります。
右側のように読み込まれていればGoogleBotもコンテンツを認識しており、SEO的にも問題ないと思います。

この記事と関連している記事