SEO-оптимізація зображень і картинок для сайту

1. Чому SEO-оптимізація зображень важлива?
2. Як Яндекс і Google індексують картинки?
3. Чек-лист: 10 пунктів SEO-оптимізації зображень
4. 1. Формат зображень
5. 2. Якість зображення
6. 3. Розмір та вага зображень
7. 4. Зміст зображення
8. 5. Назва зображення
9. 6. Атрибути зображень Alt і Title
10. 7. Sitemap.xml і robots.txt для зображень
11. 8. мікророзмітки
12. 9. Унікальність
13. 10. Контекст использование
14. Інструменти для оптімізації збережений
15. Як шукати картинки в інтернеті для сайту?
16. Висновки

Повна інструкція по SEO-оптимізації зображень на сайті. Дізнайтеся як правильно заповнювати атрибути Alt і Title у картинок для пошукової оптимізації сайту під Яндекс і Google. Чому SEO-оптимізовані зображення важливі для підвищення релевантності та подання сайту в пошуку? Про все докладніше в даній статті.

Зміст статті

Зображення, gif-анімації та інша графіка є таким же важливим елементом контенту, як і текст. Правильна оптимізація зображень здатна не тільки спростити і прискорити роботу вашого сайту, зробити його більш доступним для відвідувачів з різного роду обмеженнями, але і залучити додатковий трафік на сайт, зробити його більш релевантним для користувача запитів.

Чому SEO-оптимізація зображень важлива?

Перш за все, зображення - це точно такий же індексований пошуковими системами контент, як і текст. Цей контент використовується в формуванні розширених фрагментів і, звичайно ж, бере участь у поданні сайту в сервісах "Картинки" відповідний пошукових систем.

До слова, сервіс Яндекс.Зображення є другим сервісом Яндекса по відвідуваності після web-пошуку. Він містить в собі близько 10 мільярдів документів і щодня надає більш ніж 5 мільйонам користувачів доступ до проіндексованим графічних матеріалів.

SEO-оптимізація зображень - це достатня проста для розуміння робота, яка допоможе вашому сайту:

• Підвищити релевантність сторінок пошуковим запитам;
• Залучити трафік з сервісів пошуку по картинках;
• Поліпшити швидкість завантаження сторінок і поведінкові чинники ранжирування ;
• Стати більш доступним для користувачів з технічними або фізіологічними обмеженнями.

Щоб зрозуміти суть SEO-оптимізації зображень, необхідно трохи вникнути в роботу пошукових алгоритмів ранжирування, вибору оригінальних зображень серед безлічі дублікатів та оцінки їх релевантності.

Як Яндекс і Google індексують картинки?

Зображення в HTML-коді будь-якого документа виглядає подібним чином:

<Img src = "https://naked-seo.ru/wp-content/uploads/2018/09/images-seo-optimization.jpg" alt = "SEO-оптимізація зображень" title = "SEO-оптимізація зображень і картинок для сайту ">

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

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

• Текст. Найзначнішим сигналом для визначення вмісту зображення є текст. Опис зображення і атрибути дуже важливі, тому що на підставі їх і найближчого тексту близько картинки, мікророзмітки пошуковий алгоритм розуміє суть контенту, і використовує ці дані в подальшому для визначення унікальності зображення і необхідності додавання його в видачу.
• Спотворення. Пошукові системи давно навчилися визначати різного роду кропить, ресайз, обертання, спотворення і модифікації зображень. Дані маніпуляції не допоможуть Вам підвищити унікальність картинок, тому слід використовувати дані прийоми тільки в цілях дизайну.
• Призначена для користувача складова. При ранжируванні зображень у видачі враховуються запити користувачів і досвід взаємодії з картинками. Алгоритм є самонавчального і враховує інтерес користувачів, кількість кліків і їх поведінка по відношенню до тих чи інших документів. Іншими словами, чим популярніше зображення, чим більше користувачів в мережі їм діляться і виявляють до нього інтерес, тим вище ймовірність що зображення не тільки потрапить в видачу, але і займе там вищі позиції за відповідними запитами.
• Час. Час виявлення зображення пошуковим роботом не є вирішальним сигналом у визначенні оригінальності. Даний показник враховується, але є набагато більш слабким по відношенню до тексту і призначеним для користувача інтересам.
• Відповідність тексту та зображення. Пошукові системи визначають зміст зображення на основі тексту, далі порівнюють текст вашого зображення з текстом всіх дублюються зображень в мережі до певної міри схожості. Далі на основі будь-яких текстових даних всіх дублікатів визначаються найбільш релевантні слова для конкретного зображення, і спираючись на найбільшу текстове відповідність вибірці визначається релевантний варіант ключового запиту, найбільш часто зустрічається у всіх дублікатах. Найбільша відповідність цим запитом підвищує ймовірність попадання саме вашого зображення в видачу.
• Якість, розмір. Цілком логічно, що пошукові системи додають в видачу найбільш якісні зображення з максимальним розміром. Однак, щоб не створювати надмірної втрати трафіку для користувачів враховуються зображення в середньому до 4-6 мб.
• Водяний знак. Наявність water mark не впливає на оцінку зображення. Пошукові системи з високим ступенем точності вміють визначати дублікати навіть при наявності водяних знаків.

Варто відзначити, що сучасні алгоритми не досконалі, і часом в видачу потрапляє дублюючийся, або скопійований графічний контент. Крім того, існують проблеми з індексуванням зображень і визначенням найближчого тексту у молодих сайтів. Найчастіше Яндекс використовує текст близько зображень в категоріях, рубриках, а не в самій статті або сторінці, де розташований оригінал зображення. Внаслідок цього в видачу потрапляють зображення, але з нерелевантними описами і посилальними анкорами. У Google в цьому плані алгоритм працює краще, і допускає менше помилок.

Якщо вам цікаво докладніше дізнатися про алгоритмі роботи пошукового робота картинок Яндекс, радимо вам подивитися дане відео:

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

Чек-лист: 10 пунктів SEO-оптимізації зображень

Давайте розглянемо практичну сторону питання і розберемося, що конкретно необхідно робити для SEO-оптимізації зображень на вашому сайті.

1. Формат зображень

Пошукова система Google підтримує індексацію наступних форматів графіки: JPEG, PNG, BMP, GIF, WebP і SVG. Яндекс індексує JPEG, PNG і GIF. Відповідні формати представлені в фільтрі на сторінці видачі Картинок.

Також варто пам'ятати, що пошукові системи можуть повільно індексувати, або ігнорувати маленькі зображення до 150 px ширина / висота, фонові зображення вбудовані за допомогою css, або зображення, що виводяться на сайт за допомогою скриптів (лайтбокси, слайдери). Більшою мірою це стосується Яндекса. Пошукова система може сприймати дані зображення як елемент дизайну.

У web-е з'являються нові підтримувані формати, які дозволяють створювати більш стислі зображення без візуальної втрати якості. Сюди відносяться, наприклад, JPEG-XR, FLIF, WebP та інші. На сьогоднішній день не всі браузери підтримують дані формати, тому найкраще свій вибір зупинити на всім відомій четвірці:

• JPG;
• PNG;
• GIF;
• SVG - для елементів дизайну.

Дані формати графіки підтримуються всіма браузерами, пристроями і додатками. Вони відмінно індексуються пошуковими системами. За допомогою додаткового софту, який ми розглянемо далі, JPG і PNG можна ефективно стискати без втрати якості.

2. Якість зображення

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

Однакові зображення різної якості при збільшенні

Домагайтеся оптимального співвідношення між вагою і якістю зображень. Стиснення, незалежно від того, використовуєте ви унікальний контент або контент з інтернету, дозволить збільшити швидкість завантаження сторінок у користувачів.

3. Розмір та вага зображень

При однаковій мірі стиснення, чим менше дозвіл зображення, тим меншим буде його вага. Використання великої кількості зображень на сторінці з високою роздільною здатністю може істотно знизити швидкість завантаження. Відображуйте для користувачів зображення в тому розмірі, який за допомогою функціоналу сайту вони можуть побачити. Немає необхідності публікувати на сторінці зображення в розмірі 1000х500 px, якщо максимальні розмір візуального відображення для користувачів становить 500х250 px.

Якщо ви публікуєте на своєму сайті унікальний контент, до якого більше немає доступу ні у кого іншого, то в питанні визначення оптимального дозволу необхідно керуватися цілями проекту. Якщо, наприклад, мова йде про зображеннях товарів, то в каталозі і на самій картці товару можна використовувати кропить зображень, які сьогодні створює практично кожна CMS. Це дозволить значно збільшити швидкість завантаження сторінок. А при зумі вже підставляти оригінальне розрідженні, щоб користувачі могли розглянути кожну деталь товару в високій якості.

Zoom картинок робиться за допомогою JavaScript, що може перешкодити індексуванню оригіналу Яндексом. Але це не має значення, так як за умови унікальності менша версія зображення і так потрапить в пошук з вашого сайту. Так що користувачі при пошуку конкретного артикулу в Картинках бачитимуть зображення з url вашого сайту.

На інформаційних сайтах необхідно використовувати то дозвіл зображення, в якому воно буде представлено на сайті. Для дисплеїв з ретиной або 4k дозволом при необхідності додавайте зображення в розмірі 2x і налаштуйте відображення різних варіантів картинки в залежності від типу дисплея користувача.

4. Зміст зображення

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

Наприклад, наше зображення в Google Картинках за запитом "фактори ранжирування Яндекс" включає в себе загальний запит і бере участь у видачі. При цьому зображення взято з групи ВК з неоригінальним розміром, ймовірно, у міру обходу сторінок сайту роботом і знаходження оргинальний розміру, зображення у видачі буде замінено.

Зображення за запитом "фактори ранжирування Яндекс" в Google Картинках

В Яндексі зображення веде безпосередньо на сторінку сайту і використовує опис зображення з атрибута Alt.

Зображення за запитом "200 чинників ранжирування Яндекс" в Яндекс Картинках

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

5. Назва зображення

Пошукові системи можуть враховувати назви зображень у визначенні їх релевантності. Тому намагайтеся не використовувати в іменах файлів спецсимволи і випадково згенеровані літери на зразок Zsndfsl_wetw.jpg або 23485792345.png. Також не варто використовувати в назвах графіки кирилицю і прогалини. Називайте зображення латинськими літерами з використанням дефісів або нижніх підкреслень, наприклад, iphone.jpg або lamborgini-diablo.png. Якщо в назву необхідно додати російське слово, використовуйте транслітерацію, наприклад, kupalnik.jpg.

Вказуйте в назві файлів максимально релевантний текст вмісту зображення.

Правильна назва зображення з використання трансліта

Человекопонятние назви файлів зручні для користувачів, якщо вони захочуть поділитися посиланням на ваше зображення або зберегти його локально на свій комп'ютер. При цьому якщо ви описуєте конкретні товарні моделі в інтервент-магазині, краще вказувати артикул або модель зображення, наприклад, iphone-x.jpg або puhovik-wm180501.jpg.

6. Атрибути зображень Alt і Title

Alt - атрибут зображення, який містить альтернативне текстовий опис. Вміст атрибуту Alt відображається замість зображення, якщо при його завантаженні виникла помилка. Виглядає це наступним чином:

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

Правильне заповнення атрибуту Alt може підвищити релевантність сторінок, а також самих зображень у видачі Картинок. Атрибут є одним з найсильніших сигналів для пошукових систем у визначенні вмісту зображення. Alt повинен містити в собі точну і коротку інформацію про зображенні. Намагайтеся робити альтернативний опис не більше 50-60 символів.

Атрибут title - заголовок зображення. Він відображається як підказка при наведенні курсору на картинку. Даний атрибут на відміну від Alt є необов'язковим в зображенні. Його використання може дати користувачеві додаткову інформацію про графічному контенті. Якщо в HTML-коді сторінки зображення укладено в тег <a>, тобто є посиланням, використовувати атрибут title необхідно в тезі <a>.

7. Sitemap.xml і robots.txt для зображень

Для того, щоб пошукові системи могли індексувати зображення, їм має бути наданий доступ до відповідних тек, в яких ці зображення розташовуються. Якщо зображення вашого сайту не потрапляють в Картинки пошукових систем, перевірте ваш файл robots.txt на предмет закриття від індексації директивою Disallow папок із зображеннями.

На додаток до основної картки сайту Google рекомендує додавати карту зображень sitemap-image.xml. Її синтаксис виглядає подібним чином:

xml карта зображень Google

Пошукові системи індексують зображення і без окремої xml карти, але саме Google може це робити більш ефективно при її наявності.

Якщо ви плануєте створити sitemap-image.xml, то вкажіть два різних шляхи до карти сайту для різних User-agent Яндекс і Google. У файлі robots.txt пропишіть для User-agent: Yandex посилання на основну карту сайту, а для User-agent: Googlebot посилання на карту сайту, яка буде містити в собі посилання на основну карту сайту зі сторінками і карту сайту з зображеннями.

наприклад:

User-agent: Googlebot
Sitemap: https://naked-seo.ru/sitemap-google.xml
User-agent: Yandex
Sitemap: https://naked-seo.ru/sitemap.xml

8. мікророзмітки

Дані з мікророзмітки можуть використовуватися пошуковими системами для визначення релевантності зображень пошуковим запитам. Додайте дані ImageObject для зображень на вашому сайті. Використання мікророзмітки SchemaOrg дозволить не тільки підвищити видимість вашого сайту в сервісах пошуку по картинках пошукових систем, але і поліпшить відображення сайту при шерінге в соціальних мережах, дозволить підвищити його шанси на отримання розширених фрагментів.

Документація по впровадженню мікророзмітки http://schema.org/ImageObject

9. Унікальність

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

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

Перевірити унікальність картинки ви можете за допомогою сервісів Яндекса і Google "пошук по картинці", або за допомогою сервісу Tineye .

10. Контекст использование

Пам'ятайте, ми писали Ранее, что пошукові системи визначаються релевантність зображення на основе семантики всех дублікатів? Прийшов час сделать Невеликий віняток. Семантика вашого зображення, вібівається Із Загальної семантики всех дублікатів такоже может потрапіті в видачу з картинками за умови вісокої актівності користувача. Чим популярніша в цілому буде ваш контент, чим більше користувачів його будуть читати, ділитися ним, тим вище ймовірність використання ваших зображень у видачі Яндекс і Google картинок.

Інструменти для оптімізації збережений

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

1. TinyPNG . Простий і безкоштовний інструмент, який дозволяє оптимізувати зображення в форматах jpg і png без втрати якості. Стиснення зменшує розмір зображення до 90%. На TinyPNG можна одночасно завантажити до 20 зображень, максимальна вага яких може бути не більше 5 мб. Для більш розширених можливостей передбачена платна версія.

2. Compressor . Схожий сервіс з високим ступенем стиснення зображень, який підтримує 4 графічних формату: JPEG, PNG, GIF, SVG. Дозволяє стискати анімацію і SVG типом компресії Lossy, jpg і png типом компресії losseless, економлячи до 90% місця в ваших медіапапках.

3. Jpegmini . JPEGmini-це технологія оптимізації фотографій, яка зменшує розмір файлу фотографій JPEG до 5 разів, зберігаючи при цьому дозвіл і якість вихідних фотографій. Сервіс дозволяє стискати тільки JPEG зображення.

4. ImageOptim . Онлайн-сервіс і локальна утиліта для роботи на MacOS. ImageOptim підтримує 4 найпопулярніших web-формату зображень: JPEG, SVG, GIF і PNG. Крім стиснення самих зображень сервіс видаляє мета-дані про зображеннях: координати GPS, серійний номер камери, авторів і т.д. Ці дані часом додають графіку зайва вага.

5. Kraken.io . Це надійний, надшвидкий оптимізатор зображень і компресор з кращими в своєму класі алгоритмами, який підтримує пакетну обробку фотографій, в тому числі, по url-адресою сайту, але тільки на платній версії. У безкоштовної версії є стиснення JPEG, SVG, GIF і PNG форматів з можливою деталізацією параметрів.

Як шукати картинки в інтернеті для сайту?

Пошук Google і Яндекс. Найпростіший і найпоширеніший спосіб пошуку картинок - це видача пошукових систем. Google дозволяє відфільтрувати зображення з ліцензією на використання, щоб надалі уникнути проблем з авторськими правами. Мінусом даного методу пошуку є високий ступінь дублювання матеріалів. У видачі пошукових систем по картинках складно знайти, що рідко використовуються в мережі графіком.

Платні Фотобанки. Depositphoto , Shutterstock та інші фотобанки надають можливість веб-майстрам купувати графічні матеріали на платній основі. Дані матеріали можуть бути раніше куплені іншими компаніями або оптимізаторами, тому частина з них вже можна знайти в мережі. Мінусом є досить висока вартість контенту.

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

Unsplash . Сервіс містить більше 550 000 безкоштовних фотографій високої роздільної здатності і надає абсолютно безкоштовний доступ до них. Всі фотографії, опубліковані на Unsplash, можуть бути використані безкоштовно як в комерційних, так і некомерційних цілях.

Stocksnap . Всі фотографії використовуються в рамках творчих об'єднань - СС0. Ця ліцензія дозволяє завантажувати, копіювати, змінювати і поширювати фотографії, навіть в комерційних цілях без будь-яких дозволів. Stocksnap має зручну навігацію, категорійність зображень. Чи не найбільший графічний хостинг, проте, в ньому можна знайти багато рідко використовуваних матеріалів.

Burst . Ще одна платформа з зручним пошуком і рубрикацією високоякісних і трендових зображень з можливістю безкоштовного використання в комерційних і некомерційних цілях. Відносно невеликий графічний хостинг, включає в себе мене 100 000 зображень. Однак їх якість приваблює багатьох вебмайстрів.

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

Pixabay . Містить фото, ілюстрації, векторну графіку і відео, в тому числі, в 4k дозволі з можливістю безкоштовного використання і редагування. Дозволяє впорядкувати зображення по фотографам, альбомної орієнтації, категорії, розміром і переважної кольоровій гамі. Містить більше 800 000 картинок.

Висновки

Разом, для ефективної SEO-оптимізації зображень необхідно:

1. Використовувати індексовані пошуковими системами формати фалів;
2. Розміщувати на сайті стислі зображення без візуальної втрати якості у відповідність з тим дозволом, в якому вони представлені на сайті;
3. Додавати на сайт унікальні або перероблені графічні матеріали;
4. Опрацьовувати атрибути, описи і текст навколо зображень;
5. Називати файли у відповідність з вмістом картинок;
6. Додати sitemap-image.xml на сайт для Google;
7. Впровадити на сайт мікророзмітки SchemaOrg;
8. Відкривати для індексації файли в robots.txt;
9. Використовувати безкоштовні стоки картинок і інструменти по їх оптимізації.

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

Підписуйтесь на блог, діліться статтею в соціальних мережах, ставте свої запитання в коментарях і діліться своєю думкою з приводу SEO-оптимізації зображень.