Це хороший підхід до зображення Lazy Loading for SEO?

Для зображень, завантажених через AJAX, або які я не хочу індексувати, використовуйте підхід атрибутів data- *:

<img data-src="path/to/image.jpg" class="js-lazy-load" />

Javascript відображає атрибут data-src до атрибуту src :

<img src="path/to/image.jpg" />

Але для зображень у форматі HTML , що я дійсно хочу проіндексований:

<a href="path/to/image.jpg" class="js-lazy-load">Image alt text here</a>

Javascript замінює якір з зображенням тегом:

<img src="path/to/image.jpg" alt="Image alt text here" />

Здається, це дозволило б зберегти індекс-здатність та цільову сторінку (для доступності), не впливаючи на SEO (сподіваємось). Але хотілося б другої думки.

Редагувати: Будь-які відгуки про те, як цей підхід - сторінка із посиланнями на зображення порівняно зі сторінкою із вбудованими тегами IMG - порівнюватиме би за рангом сторінки. Я здогадуюсь, що вбудовані теги IMG пройдуть краще, оскільки кожне вихідне посилання буде погіршувати загальний рейтинг сторінки (якщо тільки вони не мають rel = "nofollow", що було б протилежним продуктивності).

Це хороший підхід. Інший підхід, який ви можете скористатись, - це використовувати <noscript />елемент для зберігання нормальної версії imgтегу, який буде індексовано Google, а JS - для створення лінивої версії завантаження.

Крім того, ви можете використовувати конвенції AJAX від hashbang Google у поєднанні з API історії HTML5 для створення статей сторінок сторінок, що мають закладки та індекс. Це особливо бажано, якщо ви робите якусь нескінченну сторінку прокрутки, оскільки вона надає форму псевдопагінації - те, чого більшості нескінченних програм прокрутки відчайдушно потрібно ( :: кашель: Google Images :: кашель ::) .

Якщо ви цього не хочете, або ви хочете, щоб сторінка граціозно погіршилася для користувачів, які не є JS, ви можете піти навпаки і почати з звичайних зображень, але використовуючи блокування JS, щоб замінити srcатрибут зображень при завантаженні сторінки (або навіть просто видаліть елементи зображення і збережіть srcатрибути у вашій ліні завантажувальної черги). Якщо ви зробите це правильно, ви можете зробити це до того, як будь-яке із зображень насправді почне завантажувати.

Я бачив зображення, завантажені з цим малюнком:

<img data-src="path/to/image.jpg" class="js-lazy-load" />

підбирають Google і Google Image Image, і інші також помітили це. Оскільки Google зараз виконує JavaScript на вашій сторінці, можливо, не потрібно вводити фактичне зображення в атрибут src. Нехтування атрибутом src може призвести до сірої межі навколо вашого зображення, тому, ймовірно, найкраще працювати з чимось на зразок:

<img src="placeholder.gif" data-src="path/to/image.jpg" class="js-lazy-load" alt="Image alt text here" />

Nb. це не обов'язково стосується інших пошукових систем.