Ледаче завантаження зображень та ефектів на SEO

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

Для всіх зображень ми поміщаємо в srcатрибут url для img за замовчуванням (тобто завантажувача) і ставимо фактичний URL-адресу зображення в data-srcатрибут. Як так

<img src="loader.gif" data-src="img1.jpg" />

Якщо зображення знаходиться поза вікном перегляду, нічого не відбувається, але коли зображення переходить всередину вікна перегляду, тоді URL data-srcатрибута завантажується, і зображення правильно відображається.

Внаслідок цього Google бачить усі зображення на сторінці (тобто сторінку результатів пошуку) як однакові src. Оскільки, звичайно, бот google розбирає лише тег "unloaded" img із замовчуванням src.

Моє запитання: чи впливає багато тегів img з однаковим srcатрибутом на SEO сторінки ?

— bmenekl
джерело

Я думаю, що власне заголовок та альт - це 90% роботи. Ім'я файлу менше. Це може вплинути на результати Google Images, я здогадуюсь,

— Martijn

дивіться також: webmasters.stackexchange.com/questions/26190/…

— Салман А

Це, безумовно, може вплинути на кількість зображень, які ви індексували в пошуку зображень Google. Ви питаєте про це чи про який-небудь вплив, який він матиме на рейтингах для звичайного веб-пошуку?

— Стівен Остерміллер

@StephenOstermiller моє головне питання - це рейтинг, але будь-який ефект (негайний або вторинний) для SEO викликає інтерес

— bmenekl

Це питання було задано на StackOverflow, але на мою думку, він не має великих відповідей.

— Стівен Остерміллер

Відповіді:

Я ніколи не бачив, щоб ліниві завантаження зображень негативно впливали на рейтинг веб-пошуку. Поліпшення сприйнятої роботи вашого сайту для користувачів може справді допомогти вашому рейтингу. Коли менше людей відскочить до результатів пошуку через проблеми з ефективністю вашого сайту, ваш рейтинг покращиться.

Google не зможе індексувати ледачі завантажені зображення для пошуку зображень. Натомість є деякі можливі технічні виправлення, такі як:

використовувати <noscript>теги, які показують зображення для користувачів, які не мають JavaScript (та ботів пошукової системи)
Також посилання на свої зображення. Здається, для пошуку зображень не має значення, чи є зображення в img src або в href. Таким чином, наступний фрагмент отримає завантаження зображення, а зображення в повному розмірі - індексованого в пошуку зображень: <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>

— Стівен Остерміллер
джерело

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

— Джон Мюллер

Використовуючи свою тактику, ви можете спробувати <a> обгортку, якщо ваші зображення вже оточені посиланням на продукти чи щось таке:

<a href="/webmasters//img_large/foo.jpg"><a href="www.example.com/page"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif" /></a></a>

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

— dhaupin

Чи відповідає ця відповідь і для 2017 року? Спеціально "Google не зможе індексувати ледачі завантажені зображення для пошуку зображень". Частина? Тож навіть у нас є 10 зображень у пості, Google думає, що у нас немає зображень?

— Я найдурніша людина

Це все ще так, але ви все одно можете посилатися на свої зображення, щоб отримати їх в індексації.

— Стівен Остерміллер

Більшість пошукових систем індексують зображення, які є прихованими, доки ви не використовуєте вбудовані стилі, щоб приховати зображення. Більшість браузерів не завантажують приховані зображення.

Існує тестова сторінка, яка може підтвердити цю претензію. Виняток становлять деякі старі веб-переглядачі для мобільних пристроїв, але я вважаю, що ледача завантаження мобільних телефонів може бути корисною для хорошого перегляду.

http://www.w3.org/2009/03/image-display-none/test.php

У свій файл CSS додайте наступні зміни.

.lazy-img { display: none; }

Тепер ви можете завантажити сторінку з таким ледачим зображенням, і вони будуть індексуватися.

<body>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
</body>

Важливо, щоб ви включили titleатрибут для зображення. Або оточуєте <imgтег <a> посиланням > тег та текст посилання. В іншому випадку пошукові системи будуть пов'язувати ключові слова із зображенням по відстані слова. Ви збираєтеся всю цю проблему для SEO, ви також можете пройти весь шлях.

Якщо ви використовуєте вище, як є. Нічого не відображатиметься, оскільки зображення приховані. Ви хочете видалити цей клас у нижній частині документа. Ключовим тут є використання вбудованого чистого Javascript. Цей Javascript виконується одразу після завершення компонування вищевказаних елементів. Якщо ви завантажите всі свої зовнішні файли JS внизу (як слід). Ви повинні розмістити цей блок Javascript над цими файлами. Щоб не було відставання в зміні DOM.

<body>
   <!--[if lte IE 8]
   <style type="text/css">.lazy-img { display: block !important; }</style>
   [endif]-->
   <noscript><style type="text/css">.lazy-img { display: block !important; }</style></noscript>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
   <![if gte IE 9]>
   <script type="text/javascript">
      var images = document.getElementsByClassName('lazy-img');
      Array.prototype.forEach.call(images, function(image){
         image.setAttribute("data-src",image.getAttribute("src"));
         image.setAttribute("src","loading.gif");
      });
      while(images.length > 0) { images[0].className = ""; }
   </script>
   <![endif]>
</body>

Тепер я додав умовні умови для IE9, оскільки він не підтримує getElementsByClassName8 та старших версій. Що має статися (не перевірено), це те, що ці браузери просто завантажуватимуть зображення як є.

Перевага такого підходу полягає в тому, що він підтримує HTML-вигляд чистим з точки зору веб-сканера.

— Реакційний
джерело

Мені було цікаво і спробував тестову сторінку. Останні Chrome та Safari на Mac схоже завантажують зображення. Не дуже впевнений, що це дуже надійно, на жаль, ...

— Певара

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

— bmenekl

@bmenekl Ні, ця відповідь не здійснює ледачого завантаження. Він лише змінює HTML, коли його переглядають у браузері з підтримкою javascript, щоб сторонній скрипт міг виконувати ледачу завантаження.

— Реакційний

Google оголосив, що виконує JavaScript зі своїми ботами, див. Цю публікацію для отримання додаткових пояснень.

Як підтверджено документально, ви не повинні забороняти статичні файли GoogleBot для динамічного сканування.

— Зулу
джерело