Это хороший подход к изображению Ленивая загрузка для SEO?

14

Для изображений, загружаемых с помощью 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", что было бы контрпродуктивно).

seo google javascript

— Aeron
источник

Исходящие ссылки не уменьшают рейтинг вашей страницы. Это не так, как работает пиар.

— Lèse Majesté

Будет ли общее количество исходящих ссылок отвлекать от PR, который имеет каждая ссылка? Так что, если бы изначально на странице было 5 ссылок - каждая с 20% PR - но при таком подходе было бы 50 - было бы теперь у каждой 2%?

— Аэрон

Правильно. Количество PR, которое передается в делится на количество ссылок на странице, но из - за PR лепки, nofollowссылки теперь также включены при разделении PR между звеньями. Таким образом, даже если у вас есть 45 ссылок nofollow и 5 обычных ссылок, 5 обычных ссылок будут по-прежнему пропускать только 2% ссылочного сока. Хотя, если бы Google был умным, они бы относились к ссылкам на изображения иначе, чем к HTML-ссылкам, поскольку ваше решение является приемлемым для удобства и доступности, и его не следует разочаровывать, разбавляя ваш PR-поток.

— Lèse Majesté

10

Это хороший подход. Другой подход, который вы можете использовать, - использовать <noscript />элемент для хранения обычной версии imgтега, которая будет проиндексирована Google, и использовать JS для создания версии с отложенной загрузкой.

В качестве альтернативы вы можете использовать соглашения Google AJAX о хэш-банге в сочетании с API истории HTML5 для создания состояний страниц с возможностью закладок и индексирования. Это особенно предпочтительно, если вы делаете какую-то страницу с бесконечной прокруткой, поскольку она предоставляет форму псевдопагинации - то, что крайне необходимо большинству реализаций с бесконечной прокруткой ( :: cough :: Google Images :: cough ::) .

Изменить: Использование ссылок в качестве заполнителей для изображений может привести к тому, что поток PR со страницы будет разделен между большим количеством ссылок, хотя PR всегда сохраняется, если вы не используете его nofollowв теории, это увеличит PR этих изображений для поиска изображений.

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

— Лез Мажесте
источник

2

Я хотел бы видеть это - Google не смотрит, <noscript>и я еще не нашел способ заблокировать загрузку изображений в Firefox; замена src(даже с <script>тегом сразу после <img>тега) не препятствует загрузке изображения в последней версии Firefox. Если вы знаете другой способ сделать это, пожалуйста, поделитесь!

— mindplay.dk

@ mindplay.dk: Google может не использовать noscriptтекст во фрагментах, но все, что я прочитал, наводит меня на мысль, что оно индексирует noscriptконтент в целом. Тем не менее, вы правы о замене src. Первоначально я думал поставить script перед первым изображением, чтобы оно блокировало загрузку изображений до тех пор, пока скрипт не загрузится и не выполнится. Но при более подробном рассмотрении это не сработает, поскольку в этот момент изображения не будут отображаться в DOM. Вы можете заблокировать загрузку, увеличив максимальное количество одновременных подключений к хосту, но в наши дни это нецелесообразно.

— Lèse Majesté

Грязный хак кто - то придумал, чтобы использовать JS закомментировать JS-бесплатные изображения , как это (есть более длинная версия , которая имеет дело с спекулятивным парсингом): <script>document.write('<'+'!--');</script><img src=...>. Вы должны решить для себя, является ли это приемлемым подходом.

— Lèse Majesté

2

Я видел изображения, загруженные с этим шаблоном:

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

Google, Google Search Search и другие тоже заметили это. Поскольку Google теперь выполняет javascript на вашей странице, может не потребоваться помещать фактическое изображение в атрибут src. Пренебрежение атрибутом src может привести к появлению серой границы вокруг вашего изображения, поэтому, вероятно, лучше использовать что-то вроде:

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

В северном направлении это не обязательно относится к другим поисковым системам.

— Willster
источник