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

Оптимізація пошукової системи не повинна бути одноразовою справою. Під час оновлення текстів, додавання нових статей чи продуктів ми не повинні забувати оптимізувати зображення, оскільки До 1/3 пошуку в Google здійснюється за допомогою зображень. (Moz.com, 2017)

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

Створюйте та використовуйте власні зображення

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

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

Налаштуйте розміри та розмір зображень на дисплеї

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

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

  • фотографії товару - 600-900 пікселів (переважно ми використовуємо квадратні формати)
  • повзунок/фонові зображення - 1920 х ширини
  • фотографії статей (ілюстративний та інформаційний) - 600–900 пікселів для ілюстративних фотографій, вища роздільна здатність для зображень пояснювального/додаткового змісту
  • фотогалерея фотографій - від 900-1200 px в ширину

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

На додаток до обрізання розмірів зображення, стиснення зображення може заощадити вам кілька кб. Знизивши якість зображень (так що воно не дуже впізнається оком), ви можете заощадити близько 30%.

В ідеалі вони мають зображення товарів та статей до 100 кб. Фотографії в галереях розміром до 150 кб, а зображення в повзунках та у фоновому режимі можуть бути до 300 кб. Розміри носять лише орієнтовний характер, не завжди вдається досягти оптимального розміру. Це залежить від роздільної здатності, кількості кольорів та деталей на малюнку. Тут застосовується пряме співвідношення, чим вища роздільна здатність/кількість кольорів/деталей на фотографіях, тим більший обсяг даних.

Ви можете обрізати зображення, наприклад у 3D-альбомі альбомів або у Photoshop:
У 3D-етюднику відкрийте зображення, клацніть обрізати (1), виберіть потрібний розмір (2) і підтвердьте. Тепер потрібно лише зберегти зображення.

Відкрийте зображення, яке потрібно обрізати, у Photoshop. Клацніть на інструмент обрізання (1). У верхньому лівому куті (2) ви вводите бажаний розмір (ширина х висота) зображення в px (англійська мова) або ob (чеська мова). Клацніть на зображення, щоб підтвердити обрізання (3). Потім ви зберігаєте зображення.

Ви можете використовувати один з Інтернет-інструментів для стиснення зображень у файлі .png, наприклад якщо стиснути PNG.

Ми зберігаємо зображення у таких файлах/форматах:

  • .jpg - Використовується для зберігання комп'ютерних зображень у фотореалістичній якості із стисненням із втратами. Цей формат найчастіше використовується на веб-сайтах.
  • .PNG - растрова графіка із стисненням без втрат. Він часто використовується, коли потрібен прозорий фон (наприклад, логотип). Якщо ви хочете зображення без фону, його потрібно обрізати. Просто збереживши зображення у форматі .png, фон не буде втрачено.
  • .gif - Проста графіка та анімовані зображення
  • .apng - Розширений формат PNG з можливістю створення анімації.
  • .svg - в першу чергу призначений для опису двовимірної, статичної або анімованої векторної графіки при збереженні якості.
  • .tiff - для зберігання растрової графіки, призначеної для друку.

Не забудьте правильно назвати файл зображення

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

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

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

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

Зображення має бути названо без діакритики (м’які та довгі) та використовуйте тире замість пробілів. Google читає дефіси як пробіли.

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

Альтернативний підпис (текст заміщення)

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

Текст заміщення повинен відповідати назві зображення, тобто відповідно до того, що показано на зображенні.

Альтернативний текст, написаний кодом

Додатковий текст, написаний у WordPress

Включити зображення в індексацію

Якщо зображення є важливою частиною веб-сторінки, ми рекомендуємо включити їх до мапи сайтів. Це зробить нашу продукцію більш імовірною для показу в результатах пошуку. Клієнти мають звичку шукати певні товари і на основі зображень переходити до електронного магазину. До 72% користувачів шукають зображення перед покупкою (NeilPatel.com)

Якщо ви використовуєте систему управління вмістом для створення веб-сайту (наприклад, ми в Marketing Art, Worpdress), ця система автоматично додаватиме зображення на карту сайту. Якщо ви кодуєте власну веб-сторінку, ви можете слідувати інструкціям від Google.

Оптимізуючи зображення та вставляючи їх на веб-сторінки, зверніть особливу увагу на:

  • використання якісних (чіткість, яскравість, композиція, роздільна здатність) та автентичних фотографій та зображень,
  • розміри, розмір, тип файлу зображення відповідно до їх використання,
  • правильне іменування зображень
  • додавання тексту заміщення до зображень
  • додавання зображень на карту сайту

Зв'яжіться з нами

Не маєте часу стежити за останніми тенденціями SEO? Хочете довірити комусь оновлення сторінки та додавання нового вмісту? Ми будемо раді допомогти вам з вашим веб-сайтом або електронним магазином.

Мгр. Крістіна Шимуркова

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