Презентація Ярослава Бешти з SEO-конференції Collaborator, що відбулася 20 жовтня 2023 року. Тези доповіді: 1. Технічні картинки і SEO картинки, та елементи дизайну, як їх відрізняти? 2. SEO оптимізація картинкок, що треба робити, щоб отримувати Google Image трафік 3. Як використовувати великі зображення і не погіршувати швидкість? 4. IPTC Мета дані картинок 5. Мікророзмітка та HTML верстка для зображень 6. Небезпечний Lazy Load 7. Кейси по Google Image Відео доповіді дивіться на Youtube-каналі Collaborator Про спікера: Починав свою діяльність SEO спеціаліста з просування сайтів у сірих нішах (онлайн кінотеатри, варез портали, торрент сайти). Згодом, перейшовши на білу сторону, почав працювати в агенстві з різними E-commerce проектами під ринки України, США та Великої Британії. Щоб отримати максимальний ефект для клієнтів, аналізує бізнес цілі проєкту, пропонує технічні рекомедації для сайту. Є автором подкасту «Що за шум»‎, в якому ділиться досвідом по SEO та маркетингу.

1. Більше чим прописати Alt Tags
SEO оптимізація зображень

2. Ярослав Бешта Починав свою діяльність
як SEO спеціаліста з
просування сайтів у
сірих нішах (онлайн
кінотеатри, варез
портали, торрент
сайти).
Згодом перейшов на
білу сторону, почав
працювати в агентстві з
різними e-commerce
проектами під ринки
України, США та
Великобританії.
Є одним з авторів
подкасту «що за шум», в
якому ділюся власним
досвідом роботи і не
тільки.

3. 1. Технічні та SEO картинки, картинки як елементи
дизайну - як їх відрізняти?
2. SEO оптимізація картинок. Що треба робити, щоб
отримувати Google Image трафік?
3. Як використовувати великі зображення і не
погіршувати швидкість?
4. IPTC, Мета дані картинок
5. Мікророзмітка та HTML верстка для зображень
6. Небезпечний Lazy Load
7. Кейси по Google Image
AGENDA

4. Технічні та SEO картинки,
картинки як елементи дизайну
Як їх відрізняти?

5. Зображення на тему “Simple
Subject”

6. Видача в Google USA “Simple Subject”

7. не SEO
зображення
- Елементи дизайну можна прописувати через
CSS стилі
- Можна не старатись прописувати ALT і інше, не
вийде конкурувати з SEO картинкою
- Не старейтесь сеошити картинку, якщо вона не
відповідає вашому інтенту

8. Рекомендації для роботи з
картинками,щоб отримувати
трафік

9. Картинка має бути унікальна
➔ Створюйте самі
➔ Генерація через АІ не дасть вам SEO картинку
➔ Стокові картинки працюють, але їх може використовувати
ще хтось

10. Картинка має підходити під інтент

11. Прописування alt, title
➔ Не дублюйте alt і title
➔ Не намагайтеся вставити якнайбільше ключових слів в alt-текст
➔ Короткий та зрозумілий alt-текст, що точно описує зміст
картинки
Приклад:
<img src="beautiful-sunset-over-the-ocean.jpg"
alt="Beautiful sunset over the ocean with vibrant colors"
title="Sunset over the ocean">

12. Прописування URL для картинки
➔ Інтегруйте важливі ключові слова у URL картинки
➔ URL має бути коротким та відображаючим суть зображення
Поганий URL:
mysite.com/uploads/img12345xyz.jpg
Оптимізований URL:
mysite.com/products/red-running-shoes/red-
shoe-angle-view.jpg

13. Розмір і вага картинок
Питання: Якою має бути ‘вага’ картинок?

14. не більше 100кб

15. Що слід
використовувати?
Google для SEO картинок любить великі
зображення. Але щоб не погіршувати
користувацький досвід необхідно наступне:
- Стиснення картинок
- Формат зображення Webp
- Адаптивні картинки
Джерело

16. Адаптивні
зображення
Через src-set
Через тег <picture>
<picture>
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="pyramid.png" alt="An 1800s oil painting of The Great
Pyramid">
</picture>
Документація по Responsive images
<img
srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg
480w, maine-coon-nap-800w.jpg 800w"
sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
src="maine-coon-nap-800w.jpg"
alt="A watercolor illustration of a maine coon napping leisurely in front
of a fireplace">

17. Стискання
картинки
Tiny-img.com
Tinypng.com
Compressor.io
Imagemagick

18. Мікророзмітка ImageObject
Не видумувати нічого, а зробити, що каже Google

19. HTML
верстка
<figure>
<img src="path-to-image.jpg" alt="Опис зображення">
<figcaption>Підпис до зображення: Опис
зображення</figcaption>
</figure>
Використовуйте <figure> та <figcaption> для
групування зображень із їхніми підписами для
кращої структури та семантики сторінки.

20. IPTC
мета дані
Основні поля IPTC метаданих:
1. Заголовок: Короткий опис або назва зображення.
2. Опис: Докладний опис зображення.
3. Ключові слова: Слова або фрази, що описують
зображення.
4. Автор: Ім'я особи, яка створила зображення.
5. Права на авторське право: Інформація про
власника авторських прав.
6. Дата створення: Дата, коли зображення було
створено.
7. Місце: Місцезнаходження, де було зроблено
зображення.

21. IPTC
мета дані
https://getpmd.iptc.org/getiptcpmd.html

22. Sitemap.xml for Image

23. Sitemap.xml
for Image
Не видумуйте велосипед, просто зберіть всі свої SEO
картинки в одне місце і дайте Google.
Документація

24. Небезпечний Lazy Load

25. Lazy Load

26. Lazy Load
Кейс який описує цю ситуацію

27. Так для чого
старатись?

29. Картинки в SERP

30. Робота з картинками йде від початку сайту

31. Сайт який зробив правки по картинкам

32. Генерація SEO
картинок з Canva i AI

33. Відео по генерації - Bulk Create Content with ChatGPT & Canva
Документація Canva - Creating designs in bulk

34. Дякую за увагу!