Data Src для SEO — Маркетинг — Форумы SitePoint
kurt0123
#1
Здравствуйте,
Я планирую внедрить codepen, но HTML выглядит так, как показано ниже.
Имеет ли смысл с точки зрения SEO использовать «img data src» вместо «img src» и «alt». Я имею в виду, что изображение больше не является контентом, который Google может понять и принять во внимание, верно?
ТехноМедведь
#2
Я не уверен, почему вы должны использовать src , но я не вижу, как это повлияет на SEO.
Атрибут «alt», однако, требуется не только для поисковых систем, но и для посетителей, которые по какой-либо причине не могут просмотреть изображение.
https://webaim.org/techniques/alttext/
1 Нравится
kurt0123
#3
Процитировано откуда-то:
атрибуты data-* имеют значение только для JS-скриптов.
… data-src для предоставления дополнительной информации, которая может использоваться JavaScript для улучшения взаимодействия с пользователем.
Кажется, вы не можете использовать alt с data-src. Основываясь на вышеизложенном, я хочу сказать, что мои изображения будут «невидимыми»?
ТехноМедведь
#4
Понимает ли браузер data-src для загрузки изображения? (Это настоящий вопрос.)
А как насчет посетителей без JavaScript? Сайт все еще работает для них без «улучшенного» опыта? Если нет, я бы еще раз подумал об этом подходе.
Что касается Google, я настоятельно рекомендую прочитать и следовать их рекомендациям. https://developers.google.com/search/docs/advanced/guidelines/google-images
Гэндальф
#5
Вам понадобится атрибут src для людей, у которых не включен JS.
курт0123
#6
Да, я знаю. Мне очень нужно было интегрировать эту ручку на свой сайт
TechnoBear
#7
Извините, я здесь не слежу.
Это перо использует src и alt .
#8
Да, это относится к 1-м изображениям, затем используется в data-src. Я тоже начал это внедрять… потом понял!
1 Нравится
Гэндальф
#9
Какие проблемы возникают у вас при использовании этого кода на вашем сайте?
курт0123
#10
Как я уже сказал в своем первом посте, меня беспокоит SEO. У меня есть сайт фотографии (мои собственные фотографии). Для меня серьезной проблемой является то, что они загружаются и не индексируются должным образом Google.
Гэндальф
#11
В этом случае вам, вероятно, нужно найти другой способ отложенной загрузки.
Некоторое время назад на форуме было обсуждение, которое может помочь.
1 Нравится
kurt0123
#12
Спасибо, но мое требование немного конкретнее. Поскольку у меня есть картинки разного размера, мне нужно загрузить изображение в стиле masonry (используя JS) вместе с отложенной загрузкой.
Джон_Бетонг
№13
Посмотрите этот пост о AmpProject от Google, у которого есть скрытое преимущество хранения изображений на их бесплатной CDN.
курт0123
№14
Да, я забыл упомянуть, что мои фотографии (динамические) загружаются скриптом. В противном случае я бы использовал сетку css для отображения статических изображений в кладке. И наверняка ленивая загрузка js будет загружаться правильно.
система закрыто
№15
Эта тема была автоматически закрыта через 91 день после последнего ответа. Новые ответы больше не допускаются.
Нужны ли нам библиотеки отложенной загрузки и `data-src` в 2022 году?
Когда-то, когда поддержка браузерами встроенной ленивой загрузки не была широко распространена, как сегодня, лучшей практикой было размечать наши изображения атрибутами данных, такими как data-src и используйте библиотеку JavaScript, например, мою vanilla-lazyload, чтобы начать их загрузку, когда они вошли в видимую часть страницы.
Является ли это лучшей практикой сегодня?
Что такое ленивая загрузка?
Ленивая загрузка изображений — это метод отсрочки загрузки изображений ниже сгиба до того момента, когда они вошли в область просмотра или близки к этому, область просмотра означает видимую часть страницы. Это позволяет вам сэкономить трафик и деньги (если вы платите за свои изображения через CDN), уменьшить углеродный след вашего веб-сайта и, что не менее важно, сократить время рендеринга вашей страницы, повысить производительность сети и, в частности, Самая большая содержательная краска.
Отложенная загрузка изображений на основе JavaScript
Для отложенной загрузки изображений очень распространена практика их разметки путем замены соответствующего атрибута src на аналогичный атрибут данных, data-src , а затем полагаться на решение JavaScript для: а) определения, когда изображения приближаются к видимой части веб-сайта (обычно из-за того, что пользователь прокрутил вниз), б) для копирования атрибутов данных в нужные, вызывая отложенную загрузку их контента .
<изображение данные-источник = "черепаха.jpg" alt="Ленивая черепаха" />
Встроенная отложенная загрузка
При встроенной отложенной загрузке или отложенной загрузке на уровне браузера для отложенной загрузки изображений вам просто нужно добавить атрибут loading="lazy" к тегу .
<изображение источник = "черепаха.jpg" alt="Ленивая черепаха" загрузка = "ленивый" />
Это обеспечивает встроенную ленивую загрузку в браузерах, которые ее поддерживают, то есть почти во всех браузерах, кроме нашего старого 9.0176 «друг» Internet Explorer.
Нужна ли нам по-прежнему отложенная загрузка на основе JavaScript?
Короткий ответ: нет, если только вы не хотите большего контроля над обработкой ленивой загрузки.
Итак, в каких случаях можно использовать отложенную загрузку на основе JavaScript вместо простого использования loading='lazy' ?
1. Вы заботитесь о пользователях с медленным или неисправным соединением (подсказка: вы должны)
Что произойдет, если у вас есть несколько страниц с большим количеством изображений, а некоторые пользователи с медленным соединением прокручивают страницу вниз быстрее, чем потребовалось бы их соединению для загрузки картинки?
Встроенная отложенная загрузка заставит браузеры загружать ваши отложенные изображения в следующем порядке: от первого, появившегося на странице, до последнего.
С библиотеками на основе Javascript, такими как vanilla-lazyload, которые отменяют загрузку изображений, выходящих за пределы видимой части страницы во время загрузки, пропускная способность ваших пользователей всегда будет сосредоточена на загрузке изображений, находящихся в видимой части страницы. .
Кроме того, если загрузка изображений прерывается из-за сетевой ошибки, т.е. если соединение пользователя прерывается на некоторое время, vanilla-lazyload повторит попытку загрузки этих изображений, когда сеть снова станет доступной.
Все это значительно повышает удобство работы пользователей. Вы можете попробовать эти функции в любой из демонстраций vanilla-lazyload, например, в базовой демонстрации, а также регулировать или отключать скорость вашего соединения в инструментах разработчика вашего браузера.
2. Вам нужны расширенные обратные вызовы или классы CSS для ваших изображений
Встроенная ленивая загрузка откладывает загрузку изображений, и вы по-прежнему можете отслеживать такие события, как loaded , но у вас нет возможности отслеживать другие события на ваши изображения, такие как начало загрузки, ошибка, выход из области просмотра и т.
д.
Отложенная загрузка, управляемая JavaScript, будет запускать обратные вызовы и применять классы CSS в различных случаях: когда изображения начинают загружаться, когда изображения входят в область просмотра или выходят из нее, когда все они завершили загрузку и даже когда их загрузка не удалась из-за сетевой ошибки.
Эти обратные вызовы и классы CSS могут быть очень полезны для создания визуальных эффектов на вашей странице.
Узнайте больше о обратных вызовах и классах в vanilla-lazyload API/options.
3. Вы хотите оптимизировать веб-производительность и, в частности, самую большую отрисовку контента на своей странице
При встроенной отложенной загрузке вы не можете контролировать, какие изображения загружаются из браузера.
Могут быть некоторые изображения, которые едва видны в видимой части страницы, или они находятся ниже сгиба, но недалеко, и браузеры будут загружать их, даже если они не являются основным изображением страницы, т.