Google botは、Lazy Loadが適用されたデータを読み込むことができないといわれています。すなわち、SEOに悪影響があるかもしれないのです。
え！？Lazy Load使っているんですけど……。
たしかに、BJ Lazy Loadなどのプラグインを有効化した状態で記事を投稿すると、コンテンツ内部の画像がインデックスされないことが圧倒的に多い印象があります。
一体、どうすればよいのでしょうか……。
この記事では、Lazy Loadの機能に加えて、遅滞読み込みされたデータのインデックス化を手助けしてくれるプラグイン「a3 Lazy Load」について徹底解説します。
なお、Lazy Loadについて詳しく知りたい方は、こちらの記事も参照してください。
https://pendelion.com/lazy-loada3 Lazy Loadとは？
a3 Lazy Loadは、コンテンツ内にアップロードした画像や動画などの読み込みを遅らせるWordPressのプラグインです。
一般的に、ウェブサイトにLazy Loadを実装すると、サイトの表示速度が上がると考えられています。
次の画像に示されているように、ページの一部を優先的に読み込むことで一定時間内の転送量を節約することでサイトスピードが上がるという仕組みです。
a3 Lazy Loadを使ったほうが良い理由
a3 Lazy Loadを使ったほうがよい理由は大きく２つあります。
- Lazy Loadを簡単に導入できる。
- noscriptタグを自動的に入れ込むことでGoogle botのクローリングをサポートできる。
a3 Lazy Loadの特徴は、BJ Lazy Loadなどのプラグインとは違って、noscriptタグ内にLazy Loadの対象となるデータを自動で設定できる点にあります。
あまり知られてはいませんが、Google botはユーザーのスクロールなどで後から読み込まれるコンテンツを認識できないといわれています。
すなわち、画像や動画がインデックス化されないおそれがあるのです。そのため、注意して使わないと、SEOに悪影響が出る可能性があります。
この問題の解決方法として、Googleのジョン・ミューラー氏は、noscriptタグ内に画像や動画を入れることを推奨しています。
noscriptタグとは、scriptタグを使って設定したスクリプトが機能しない環境に対して、その内容を代わりに指定してくれるタグのことです。
Lazy Loadで表示されない画像をnoscriptタグで表示させることで、Google botが読み取りやすくできます。
とはいえ、コーディングが苦手な方からすれば、noscriptタグを埋め込むだけでも、大きな負担です……。
だからこそ、a3 Lazy Loadを使えば、自動でnoscriptタグを実装してくれるので不要な手間は一切かかりません！
これなら僕にもできそうだ！
a3 Lazy Loadの設定方法
それでは、a3 Lazy Loadの設定方法について３ステップに分けて解説していきます。
各項目が英語で書かれている部分を除いて難しいところはありませんので、下記のとおり設定を進めましょう！
STEP1 a3 Lazy Load をインストール
まずは、WordPressの管理画面からプラグインの新規追加にアクセスして、検索エンジン内に「a3 Lazy Load」と入力して検索しましょう。
すると、次の図にあるようにa3 Lazy Loadのプログラムが検出されるので、インストールして有効化してください。
なお、プラグインを作動させるには、以下の条件を満たしている必要があるので、事前に確認しておきましょう。
- WordPress 4.6 以上
- PHP version 5.6.0 以上
- MySQL version 5.6 以上 または MariaDB version 10.0 以上
STEP2 管理画面から各種設定を行う
有効化が完了したら、WordPressの管理画面に戻って、設定から「a3 Lazy Load」を選択しましょう。
上記の設定画面はすべて英語で表記されています。 とにかく設定を早く終わらせたいという方は、次の項目をチェックしてください。
- Plugin Framework Global Settings はデフォルトのままでOK
- Lazy Load Activation はON
- Lazy Load Images は全ての項目をON
- Lazy Load Videos and iframes は全ての項目をON
- Exclude by URI’s and Page Types はLazy Loadを適用したくないものがあれば設定する
- Image Load Threshold は250～400の値を入力する
※その他の項目はデフォルトのままで問題ありません。
Noscript Supportがnoscriptタグの実装に関するものなので、設定をONにすることを忘れないようにしましょう！
なお、Googleアドセンス広告などのデジタル広告を導入している方は、Lazy Loadでデザインが崩れる場合があるので、該当する方は Lazy Load Videos and iframes はOFFに設定しておきましょう！
STEP3 設定完了後はサイトスピードを計測する
上記の設定が完了したら、GoogleのPageSpeed Insightsなどのツールでウェブサイトのスピードを計測しましょう。実装前よりも表示速度が上がっていれば、Lazy Loadの効果があったと評価できます。
PageSpeed Insightsより引用（最終確認日：2020/4/4）
なお、サイトスピードの計測方法について、詳しく知りたい方はこちらの記事をご覧ください。
https://pendelion.com/site-speedSEOに効果があるという話に注意！
Lazy Loadを導入すれば、サイトスピードが改善されるのでSEOで有利になるという記事を見かけますが、厳密にいえば「表示速度が極端に遅いもの」に限ってペナルティがあります。
したがって、「サイトスピードが速い＝SEOに有利」ではなく、あくまでも「不利にならない」というのが正確な情報です。こちらに関しては、Googleのスピードアップデートの趣旨をテーマとする下記の記事をご覧ください。
https://pendelion.com/speed-updateLazy Loadは適切に使用しなければ、Google botのクローリングに悪影響を及ぼすので注意しましょう！
