10 порад щодо оптимізації зображень для SEO

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

Що таке оптимізація зображення ?

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

Ви коли-небудь задавали собі такі запитання? ?

Чому фотографії моїх виробів ніколи не відображаються, коли я роблю пошук зображень Google ?
Чи варто додати alt атрибути до моїх зображень і чому ?
Яка різниця між JPEG, GIF і PNG ? Коли слід використовувати той чи інший ?

Як оптимізувати зображення для Інтернету:

1. Назвіть свої зображення описово та зрозумілою мовою

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

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

Візьміть, наприклад, це зображення.

Mazda 3 ambition 2018 рік

Ви можете використовувати загальне ім'я, присвоєне зображенню вашим камери (наприклад, DCMIMAGE10.jpg). Однак було б набагато розумніше назвати файл 2018-Mazda-3-ambition-rouge.jpg.

Подумайте, як ваші клієнти шукають товари на вашому веб-сайт. Який іменування моделей вони використовують під час пошуку? У наведеному вище прикладі покупці автомобілів можуть шукати такі терміни, як:

Mazda 3 ambition 2018 червоний
Mazda 3 Red ambition 2018 рік
2018 Mazda 3 ambition червоний

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

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

2. Ретельно оптимізуйте свої атрибути alt

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

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

Першим пріоритетом в оптимізації зображень є заповнення кожного атрибута alt кожного зображення на вашому сайті.

Ось кілька простих правил для атрибутів alt:

Опишіть свої зображення простою мовою, як і для імен файлів.
Якщо ви продаєте товари з номерами моделей або серійними номерами, використовуйте їх у своїх атрибутах alt.
Не зловживайте ключовими словами (наприклад, alt = "автомобіль mazda3 придбайте зараз найкращу ціну у продажу").
Не використовуйте атрибути alt для декоративні картини*. Пошукові системи можуть покарати вас за надмірну оптимізацію.

Декоративні зображення - це "дизайнерські" зображення вашого сайту, такі як фони, межі, піктограми тощо або елементи навігації, такі як стрілки, наприклад. (див. підказку № 8)

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

3. Додайте підпис до своїх зображень

Іншим важливим моментом для SEO є додавання легенда до ваших зображень. Це пов’язано з тим, що вміст, який безпосередньо оточує зображення, надає пошуковим системам додатковий контекст. Google визначить, наскільки зображення відповідає темі сторінки.

4. Вибирайте розміри свого зображення з розумом.

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

Інтер’єр
Спина
Ободи
Грудна клітка

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

2018-Mazda-3-ambition-Rouge-Cuir-Interieur.jpg -> з використанням атрибута alt: alt = "Mazda 3 ambition 2018 Червоний шкіряний інтер'єр"
2018-Mazda-3-ambition-Rouge-Vue-trunk.jpg -> з використанням атрибута alt: alt = "Mazda 3 ambition 2018 rouge vue-trunk"

Головне тут - додати описи до базового атрибута alt, щоб потенційні користувачі Інтернету заходили на ваш веб-сайт.

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

5. Зменшіть вагу ваших зображень

Майже 50% споживачів не будуть чекати завантаження сайту більше 3 секунд.
Amazon виявив, що якщо її сторінки сповільняться на секунду, вони втрачають 1,6 мільярда доларів на рік .
Google використовує час завантаження сторінки як фактор ранжування алгоритм.

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

Як зменшити вагу зображення ?

Коли клієнт приходить на ваш сайт, завантаження всіх файлів може зайняти деякий час, залежно від розміру ваших файлів. Чим більше розмір файлу, тим довше завантажується веб-сторінка.
Якщо ви можете зменшити розмір файлів зображень на вашій веб - сторінці та збільшити швидкість завантаження сторінки, ви уникнете втрати відвідувачів, як тільки вони з’являться на сайті.

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

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

Як оптимізувати зображення без Photoshop

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

Є безліч інструментів для редагування зображень в Інтернеті, таких як Можна йти, PIXLR і звичайно є завжди GIMP.

GIMP - це безкоштовне програмне забезпечення для редагування зображень, яке може працювати в Windows, Mac або Linux і може робити те саме, що і Photoshop.

Наскільки великими повинні бути файли зображень?

Як загальне правило для зображень електронної комерції, намагайтеся, щоб розмір файлу був меншим ніж 70 КБ, хоча це часом може бути важко, особливо для більших зображень. Для банерних зображень, безумовно, можна буде приблизно 150 КБ, але пам’ятайте, що саме множення зображень на сторінці може значно уповільнити продуктивність вашого сайту.

6. Виберіть правильний формат файлу

Для розміщення зображень в Інтернеті використовуються три поширені формати файлів: JPEG, GIF і PNG.

Давайте розглянемо три формати файлів та їх вплив:

Формат JPEG (.jpg) з роками став фактичним стандартним форматом зображення в Інтернеті. Зображення JPEG можна значно стискати, дозволяючи отримувати якісні зображення з невеликими розмірами файлів. Недоліком є те, що формат jpg не підтримує прозорість. Рекомендується використовувати формат png для зображень із прозорістю.

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

Що стосується складних зображень та фотографій, GIF-файли не завжди такі привабливі. Особливо це стосується великих зображень.

PNG зображення дуже популярні як альтернатива GIF-файлам. Файли PNG підтримують набагато більше кольорів, ніж файли GIF, і з часом не будуть погіршуватися при повторних записах, на відміну від формату JPEG. Недоліком зображень у форматі PNG є розмір файлів, який може бути більшим, ніж .jpg.

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

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

7. Оптимізуйте свої мініатюри

Багато веб-сайтів електронної комерції використовують ескізи, особливо на сторінки категорій. Вони швидко представляють продукцію, не приділяючи великого значення сайту.

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

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

8. Використовуйте карти сайтів зображень

Якщо ваш сайт використовує Галереї Javascript, з спливаючі зображення або інший карти сайту допоможе оцінити ваші зображення в Google.

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

Ви можете вставити рядок у файл robots.txt із зазначенням шляху до вашої мапи сайту, а також можете надіслати мапу сайту в Google за допомогою пошукової консолі.

У Google багато рекомендації щодо публікації зображень, що може допомогти вашому веб-сайту отримати вищий рейтинг на SERP (Google, результати пошуку Bing тощо ...). Крім того, ви можете використовувати файли Sitemap Google, щоб надати Google більше інформації про зображення на вашому веб-сайті, що може допомогти Google знайти більше зображень, ніж ви самі.

9. Управління “декоративними” зображеннями

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

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

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

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

Для зображень, що утворюють прості межі або візерунки, створіть їх у форматі PNG-8. Ви можете створити прекрасні зображення розміром лише кілька сотень байт.
Якщо можливо, використовуйте CSS для створення кольорових областей замість використання зображень. Використовуйте якомога більше Стилі CSS для заміни декоративних зображень.
Зверніть особливу увагу на фонові зображення. Зменште їх максимально, забезпечуючи якість зображення.

10. Перевірте свої зображення

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

Перевірте кількість зображень товару на сторінці: Оскільки час завантаження є проблемою для деяких веб-сайтів електронної комерції, ви можете виявити, що зменшення кількості зображень на сторінці призведе до збільшення швидкість кліків і продажів. Також можливо, що багато зображень на сторінці покращуєдосвід користувача і збільшення продажів. Єдиний спосіб це дізнатись - протестувати.
Перевірте кращі погляди своїх клієнтів: ви можете знайти підвищення лояльності клієнтів надаючи перегляди, які хочуть бачити ваші клієнти. Чудовий спосіб зрозуміти це - запитати у своїх клієнтів, що їм найбільше сподобалось під час перегляду фотографій вашого товару. Досліджувати та спілкуватися зі своїми клієнтами - це хороша звичка.
Перевірте, скільки списків товарів ви повинні мати на сторінках категорій: 10, 20, 100 товарів? Перевірте кількість продуктів, які ви вказали на сторінках категорій, щоб побачити, що найкраще підходить для ваших клієнтів.

Важливі моменти, які слід пам’ятати

Виберіть з відповідні імена файлів у правильному форматі зображення
Використовуйте alt атрибути на малюнках
додати підпис до ваших зображень щоб надати Google додатковий контекст
Налаштуйте розмір та вага ваших зображень шляхом забезпечення якості їх
Використовуйте карти сайту
Тестуйте, тестуйте і перевіряйте ще раз

Тепер ви знаєте основи оптимізації зображень для хорошого SEO в Інтернеті, але є ще багато моментів, які не були висвітлені в цій статті. Як оптимізувати зображення для оптимального відтворення на мобільному? Чи відповідає ваш сайт ?