8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

puppeteerを使ってlazyloadがSEOフレンドリーかどうか確認する

Last updated at Posted at 2018-11-07

Google、SEOに適したLazyloadの仕様を公開 | 海外SEO情報ブログ

検索エンジンフレンドリーな Lazyload が実装できているかどうかをテストします。
検証方法の1つとして、ヘッドレスブラウザの Puppeteer を利用したスクリプトを Google は準備しています。

とあったのでさっそく試してみました:muscle:

scriptのダウンロード

❯ git clone git@github.com:GoogleChromeLabs/puppeteer-examples.git

puppeteerのインストール

cd puppeteer-examples
❯ yarn add puppeteer
yarn add v1.10.1
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
[5/5] 📃  Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.12.1", while you're on "1.10.1".
info To upgrade, run the following command:
$ brew upgrade yarn
success Saved 1 new dependency.
info Direct dependencies
└─ puppeteer@1.10.0
info All dependencies
└─ puppeteer@1.10.0
✨  Done in 91.06s.

puppeteerでページの検証

今回、モバイルページかつbotでの挙動を確認したかったのでpuppeteerにUserAgentの設定を追加しました。
screenshotPageWithoutScrollscreenshotPageAfterScrollの二箇所変更する必要があります。)

lazyimages_without_scroll_events.js
   const page = await context.newPage();
+  await page.setUserAgent('Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)')

いざ、scriptを実行。

❯ node lazyimages_without_scroll_events.js -u https://sotoasobi.net
Lazy images loaded correctly: Passed
Found 0 pixels differences.
Dimension image A: 250x1037
Dimension image B: 250x1037

すると、results.htmlにスクロールあり/なしの比較結果が出力されます。

スクリーンショット 2018-11-07 14.00.46.png

PASSしていた :tada:

さくっと確認できるのでご自身のサイトで試してみては? :wink:

余談

IntersectionObserver API と polyfill を実装するように Google は指示しています。

とありますが、うちのサイトではこれを使ってます :point_down:

aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images

すばらしいですね。
botかどうかをUserAgentで判断して、lazyloadするかどうか判断してるようです。
https://github.com/aFarkas/lazysizes/blob/gh-pages/src/lazysizes-core.js#L292

以上です :hugging:

参考

8
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?