- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Что делать, если ваша email-рассылка попала в спам
10 распространенных причин и решений
Екатерина Ткаченко
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Приветствую.
Решил сделать ленивую загрузку изображений на страницах сайта по следующей схеме.
Изначально код картинки выглядит так:
То есть значение атрибута src изображение 1х1 px В data-src изображение, которое должно выводиться на странице.
При докрутки до изображения с помощью js вставляю в srс ссылку на изображение из атрибута data-src и удаляю класс lazy, чтобы больше не было попыток еще раз загрузить изображение при прокрутки вверх вниз.
Получается такой код
Будет ли такой вариант препятствовать индексации изображений?
Сайт только разрабатывается, добавил сегодня для проверки в SearchConsole, после опять закрыл от индексации. Вроде Гугл бот видит изображения. Отображаются в коде так:
<img title="" src="my_img.jpg" data-src="my_img.jpg" class="lazy" alt="Услуга 4" />
То есть и src и data-src есть ссылка на изображение. Однако класс lazy не удален. Да и хрен с ним.
В Яшу нет смысла добавлять, так как проверяет долго и помимо этой страницы просканирует еще несколько, поскольку в robots.txt надо будет разрешить индексирование. А с разрабатываемым сайтом, сами понимаете, этого делать не стоит. Кроме того нельзя посмотреть как яндекс видит страницу сайта, то есть загружаемый роботом код.
И собственно вопрос. Не будет ли влиять ленивая загрузка на индексацию картинок и на общее SEO страницы с такими картинками в ХУДШУЮ СТРОНУ?
Нет, не будет.
Что-то я сомневаюсь, что бот вообще что-то там будет прокручивать.
Это, наверное, можно по фейсбуку итп проверить.
Т.е. тут надо бы точно знать, что бот будет исполнять ваш JS (что умеет это вопросов нету), и что он будет прокручивать страницу (к этому большой вопрос).
Уверены, что с гуглом реально нормально работает ? Как-то странно выглядит, если вы из одного места всё меняете, почему только часть изменений попадает в кеш... точно не локально ваши скрипты криво отрабатывают всё это ?
Что-то я сомневаюсь, что бот вообще что-то там будет прокручивать.
При чем тут прокрутка? Бот смотрит исходный код, а не крутит документ.
Это, наверное, можно по фейсбуку итп проверить.
Что именно проверить?
Т.е. тут надо бы точно знать, что бот будет исполнять ваш JS (что умеет это вопросов нету), и что он будет прокручивать страницу (к этому большой вопрос).
Дело не js, а в том, что, это конечно мое предположение, поисковый робот сам из атрибута data-src берет значение и вставляет его в src. Если бы исполнялся js, то класс тоже бы удалялся.
Уверены, что с гуглом реально нормально работает ? Как-то странно выглядит, если вы из одного места всё меняете, почему только часть изменений попадает в кеш... точно не локально ваши скрипты криво отрабатывают всё это ?
Привел же пример исходного кода изображения - это из HTML проверенной страницы из SearchСonsole. Еще раз повторю, дело не в js, а в том, считают ли роботы поисковиков data-src, или лучше сказать, поддерживают ли они этот атрибут в качестве ссылки на изображение? Видел реализации ленивой загрузки вообще без src, а только с атрибутом data-src.
Прошу при ответах не строить предположения и догадки (я это сам могу делать), а писать факты, может кто проводил тестирование.
Если в коде прописан прямой путь до картинки - будет. Подгруздка чисто джавой -- далеко не факт.
Нормальное ПС индексируют lazy.
Также, можно сделать noscript для картинок, чтобы ПС уж точно их скушали.
При таком коде как у вас lazyload работать не будет, изображению нужно класс прописывать "lazyload", после выполнения он переводится в "lazyloaded"
При таком коде как у вас lazyload работать не будет, изображению нужно класс прописывать "lazyload", после выполнения он переводится в "lazyloaded"
Хоть понял что написал? При чем тут название класса? Его хоть как можно назвать, хоть class="myLenivayZagruzkaKartinok", а потом менять или удалять, это не важно.
Сам класс - это селектор элемента на который вешается обработчик js. Какая разница как он называется или на что меняется?
---------- Добавлено 07.02.2020 в 18:51 ----------
Если в коде прописан прямой путь до картинки - будет. Подгруздка чисто джавой -- далеко не факт.
Да, немного не точно описал принцип.
В самом коде в файле путь в src указан прямой. Когда загружается документ, у тех картинок, у которых прописан класс lazy с помощью php+js добавляется атрибут data-src с прямым путем к картинке, а в атрибуте src меняется путь к картинке на 1 пиксельное изображение закодированное в base64.
Это и показывается в исходном коде страницы на сайта в браузере.
После докрутки до изображения (а вернее когда изображение близко к области видимости), срабатывает обработчики и меняет в src 1 пиксельное изображение на прямой путь к картинке и удаляется класс lazy, чтобы обработчик больше не срабатывал.
Нормальное ПС индексируют lazy.
А это утверждение предположение или есть какие-то факты?
Также, можно сделать noscript для картинок, чтобы ПС уж точно их скушали.
Это интересно.
То есть под каждым изображением прописывать
хотя немного увеличит код.
Не будет ли для поисковиков считаться спамом?
Эх, скорее бы все браузеры стали поддерживать атрибут loading
И Яндекс и Гугл понимают, когда адрес изображения в data-src.
Ну в гугле вбейте и поищите документацию от ПС. Всё написано ясно и понятно.
блин - а поискать оффдок слабо?
https://www.thinkwithgoogle.com/intl/ru-ru/ad-solutions/mobile/mobile-speed-strategy-and-performance/?utm_source=yandex&utm_medium=cpc&utm_campaign=article_may_43750868&utm_content=mobile-speed-strategy-and-performance_8008518440&utm_term=google%20speed_none__desktop
и оттудава ссылка на документ
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
читаем и копируем код оттуда - его гугл точно поймет!