SEO image optimization: a complete guide

When it comes to search engine optimization, many people think of text first. But images also need it. You can rise above your competitors in search results with the help of unique high-quality pictures. In this article, we will analyze everything that needs to be taken into account when optimizing images.

1. Look for unique images

Using someone else's images may violate copyright. This can lead to both requests from the owner to remove the content and legal proceedings. If you take an image from a site, make sure the license allows for free use.

Google prefers unique images. When a user searches for a product or something else, the system tries to show as many different images of that object as possible. If you work in the field of e-commerce and the images on the site do not differ from the competition, your chances of getting to the top of the search are small.

When there are enough images in a search result, Google will not offer duplicates, but will show the product from different angles. If you have unique images, the chance of getting published increases.

2. Use the correct formats

JPEG and PNG are no longer standard image formats. AVIF, JPEG 2000, JPEG XR and WebP are better for websites today. These formats are easier to compress, thus reducing download times. This has a positive effect on the user experience, and the better it is, the higher the ranking.

Of the four image formats listed above, WebP is the first to consider. It is considered the most versatile for sites: it supports both lossy and lossless compression, offers transparency and can be animated. Basically, it's PNG, JPEG and GIF in one bottle. WebP files are typically 25-35% lighter than PNGs and JPEGs of similar quality.

But there is also a problem: in the past, not all browsers supported it. If you want to accommodate users with older versions of the applications, you can configure the pages to display WebP as well as a fallback format.

3. Стискайте зображення

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

If you don't want to rely on plugins to slow your page down, it's a good idea to compress images beforehand. There are many free online tools for this. The compressed images can then be uploaded to the site.

Залежно від зображення стиснення може перевищувати 80%.

4. Уточніть розмір зображень

The size of the images can negatively affect the ranking. If you do not define it yourself, the browser will select the right one, and it will take time. In addition, the elements will be mixed and users will not be able to use the page normally until it is fully loaded. This is called layout offset, and Google takes this factor into account when ranking.

To avoid this problem, always set the width and height for images. You can use the following code:

<img src=”image.jpg” width=”640″ height=”360″ alt=”image description” />

This information helps the browser calculate the image dimensions and reserve enough space on the page. Even if the image is loaded a little later, other elements will not take its place, which means that there will be no problems with the layout shifting.

5. Delayed loading of background images

Another point that can improve the user experience. This means that the download is not performed until the image is needed. For example, it is located at the bottom of the page, and the user still needs to scroll there.

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

6. Додайте до зображень альтернативний текст

Альтернативний текст – це атрибут зображення з його описом. Спочатку він був потрібний як альтернатива, якщо картинка не завантажилася, і для читання вголос користувачам з проблемами зору.

З точки зору SEO мета альтернативного тексту — описати зображення в пошукових системах. Пошуковим роботам простіше сканувати зображення з описом.

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

На малюнку вище не так багато дії, але наробити помилок з альтернативним текстом простіше простого.

Наприклад, можна описати її надто спільно:

<img src=”sample.jpg” alt=”кіт”>

А можна надмірно оптимізувати:

<img src=”sample.jpg” alt=”рудий короткошерстий кіт з білими вусами та заплющеними очима лежить у кімнаті на животі “>

Краще дотримуватися золотої середини:

<img src=”sample.jpg” alt=”рудий кіт лежить на підлозі”>

7. Додайте мікророзмітку Schema

Мікророзмітка Schema — це набір HTML-тегів, які описують пошуковій системі, які елементи є на сторінці. За допомогою мікророзмітки ви можете виділити адресу компанії, номер телефону тощо. Це допоможе системі знайти дані для відображення у пошуку.

Що стосується зображень, існує два типи сторінок, на яких є сенс застосовувати структуровані дані: сторінки продуктів та сторінки рецептів. Для цього є спеціальні теги зображень. При правильному застосуванні Google використовує їх для розширених результатів.

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

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

8. Захистіть свої зображення від крадіжки

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

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

• author (artist; creator) – додається ім’я автора зображення;
• copyrightNotice — додається посилання на публічну ліцензію та її опис;
• source (credit) – додається посилання на ваш site або сайт, з якого зображення взяте.

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

9. Проведіть аудит зображень за допомогою WebSite Auditor

З чого розпочати процес оптимізації зображення та як його організувати? Один із способів – провести аудит сайту за допомогою WebSite Auditor та об’єднати всі проблеми, пов’язані із зображенням, в один дашборд.

Після аналізу сайту WebSite Auditor надасть повний звіт про всі технічні проблеми. Там буде окремий блок, присвячений зображенням. У ньому можна перевірити, чи на сайті є биті зображення або картинки без альтернативного тексту.

Щоб отримати додаткові відомості про проблеми, пов’язані з зображеннями, перейдіть до розділу Page Speed. Цей розділ доступний лише після отримання ключа API даного сервісу.

Робота із зображеннями, особливо у великому обсязі, може бути стомлюючим завданням. Тому варто розставити пріоритети залежно від важливості сторінки або покращення, які дадуть найбільший приріст продуктивності. Для цього перейдіть до розділу «Структура сайту» → «Сторінки», де можна переглянути всі технічні проблеми розбивки сторінками.

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

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

Час застосувати знання

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