web-dev-qa-db-ja.com

カルーセルへの遅延読み込み時のSEO

ユーザーがカルーセルを移動するか矢印をクリックしたときにのみ画像が読み込まれるなど、いくつかの遅延読み込みを備えたウェブサイトにカルーセルがあります。 （それ自体は動きません。）

<div class="owl-carousel">
    <img class="owl-lazy" src="#" data-src="http://.....image.jpg" alt="Image 1" />
    <img class="owl-lazy" src="#" data-src="http://.....image.jpg" alt="Image 2" />
</div>

問題は、imgsrc属性がこのイベントでのみ設定されることです。また、このイベントはユーザーアクションでのみ発生します。しかし、私のdata-srcはGooglebotによって画像として読み込まれず、srcにはページの読み込み時に#が含まれるため、Googleは各カルーセルの最初の画像のみをインデックスします（読み込み時に表示されます） ）、すべての画像がサイトマップにある場合のイベント。 （Search Consoleでは、サイトマップにはすべての画像が含まれていますが、Googleインデックスには含まれていません）

Googleでこれらすべての画像をどのように参照できるのか、ご存知ですか？

indexingimagesgoogle-image-search
1
dagan

最近、ここであなたと似たような状況にあった人がいました。

彼らの解決策は、ページのロード時にhref = ""属性をロードすることでした。そして、onload javascriptを使用してhref属性を削除しました。これにより、hrefをhtmlに表示できましたが、ブラウザーには表示されませんでした。これにより、Javascriptを理解できないクローラーがページを読みやすくなり、Javascriptが有効になっていないユーザーにも画像を提供できます。

Display：noneに画像を設定することもできます。またはdisplay：hidden; Googleが画像を発見できるようにします。

Googleがこのクローキングを考慮するかどうかを知るのは難しいため、これらの方法のいずれかを完全にアドバイスすることは本当にありません。おそらくそうはなりませんが、まだいくつかのリスクが伴います。

ウェブサイトが異常な標準でコーディングされている場合、Googlebotでどのように動作するかを判断するのは困難です。一般的に、クローラーを念頭に置いてサイトをコーディングし、可能な限り最高のエクスペリエンスでコンテンツをユーザーに提供することをお勧めします。

1
Michael d