Ледача завантаження SEO проблема, вирішена!

  1. Проблема SEO TL, DR: - коротка історія : Lazy завантажені зображення не будуть проіндексовані пошуковими...
  2. Рішення № 1, мапи сайтів зображень (не добре)
  3. Рішення № 2, носпикс (не добре)
  4. Рішення №3, фрагменти, що вислизають (працює, але застаріло)
  5. Рішення № 4, нічого не робити (працює)

Проблема SEO

TL, DR: - коротка історія : Lazy завантажені зображення не будуть проіндексовані пошуковими ботами, як googlebot!

Довге розповідь : Мета ледачих завантаження зображень - прискорити роботу веб-сайту, не натискаючи додаткові HTTP-запити через повне оновлення сторінки. Мета полягає в тому, щоб заощадити пропускну спроможність відвідувачів, які ніколи не зможуть прокрутитись вниз, щоб побачити щойно завантажене зображення або відвідувачів, які не пересуваються через слайдер зображення тощо.

Як працює ліниво завантаження, ви спочатку завантажуєте скрипт і подаєте правильний джерело зображення, коли зображення видно у вікні відвідувачів, але Googlebot не буде індексувати ці зображення, оскільки правильний джерело зображення не відображається на сервері!

Рішення

TL; DR: - коротка відповідь : Оскільки Google почав виконувати сценарії, більше немає проблем. Ви не повинні нічого робити

Довга відповідь : Перший великий сайт, який я реалізував ледачий навантаження на сайт LEGO Starwars. На новому сайті було багато зображень з високою роздільною здатністю, а також безліч повзунків, які містили заклики до дій із зображеннями. Отже, ледачивим завантаженням зображень ми зберегли тонни кілобайт і серверних запитів і зробили швидше завантаження сторінки. Єдиним недоліком було те, що зображення не індексувалися жодним пошуковим ботом! Я спробував різні підходи:

  • Рішення № 1, мапи сайтів зображень (не добре)

    Створіть мапу сайту на сторінці зі своїми ліниво завантаженими зображеннями:

    <? xml version = "1.0" encoding = "UTF-8"?> <urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9" xmlns: image = "http://www.google.com.ua /schemas/sitemap-image/1.1 "> <url> <loc> http://dinbror.dk/blazy </loc> <image: image> <image: loc> http://dinbror.dk/lazy-load -images-with-bLazyJS.jpg </ image: loc> </ image: імідж> <зображення: зображення> <зображення: loc> http://dinbror.dk/lazy-loaded-image.jpg </ image: loc > </ image: image> </url> </urlset>

    Тоді я не міг працювати. Мої зображення мапи сайту не було проіндексовано, тому я припускаю, що зображення в мапі сайту зображення повинні бути присутніми в розмітці, перш ніж вони будуть скановані. Отже, файли Sitemap для зображень є корисними лише для надання додаткових метаданих зображення.

  • Рішення № 2, носпикс (не добре)

    Додайте тег noscript, що містить зображення для кожного зображення, що завантажується ледаче:

    <img class = "b-lazy" src = "placeholder-image.jpg" src = "image.jpg" alt = "alt-text" /> -text "/> </noscript>

    Елемент HTML <noscript> визначає розділ html, який потрібно вставити, якщо тип скрипту на сторінці не підтримується, або якщо сценарій зараз вимкнено у веб-переглядачі.

    Тоді я придумав блискучу теорію (як і 1000 інших), що тому, що пошукові боти не могли відтворити JavaScript, вони могли б сканувати речі в тезі noscript, але єдине, що я отримав з неї, було додатковою розміткою. І звичайно, що один хлопець з відключеним JavaScript може бачити зображення.

  • Рішення №3, фрагменти, що вислизають (працює, але застаріло)

    Кілька місяців після того, як сайт вийшов на ринок, утік фрагментів принципу був введений Google. Вони запропонували набір практик, які веб-майстри могли б слідувати, щоб гарантувати, що їхні програми на основі AJAX та ліниво завантажені зображення були проіндексовані пошуковими системами. Я не піду глибоко з тим, як він працює, оскільки він був позначений у жовтні цього року (2015). Детальніше про це читайте тут: https://developers.google.com/webmasters/ajax-crawling/docs/learn-more

  • Рішення № 4, нічого не робити (працює)

    Оскільки пошукові роботи, такі як googlebot, почали відтворювати JavaScript, тепер можуть переглядати та індексувати вміст, що завантажується ледаче. Це відносно нова річ. Я перевірив його на сайті LEGO Starwars, і нічого не роблячи, зображення тепер індексуються на зображеннях Google, як ви можете бачити на зображенні нижче:
    Оскільки пошукові роботи, такі як googlebot, почали відтворювати JavaScript, тепер можуть переглядати та індексувати вміст, що завантажується ледаче

    Так що тепер у вас немає жодного виправдання для того, щоб не ліниво завантажувати ваші зображення, фрейми, ігри та відео, коли це має сенс.

Пов'язані статті

Encoding = "UTF-8"?