Чому це важливо
Використання зображень поряд з іншою інформацією на сторінках сайту - чудова можливість для залучення додаткових відвідувачів за допомогою пошукових систем, коли користувач здійснює пошук по картинках. Крім цього, графічні зображення дозволяють утримувати увагу користувачів і полегшують сприйняття контенту. Але для того, щоб графічні елементи приносили користь сайту, вони повинні бути SEO-дружніми, тобто правильно оптимізовані в HTML-коді сторінки. У статті розглянуті різні аспекти оптимізації зображень і сформульовані необхідні рекомендації.
HTML-синтаксис для оптимізації зображень
Пошукові системи можуть з легкістю інтерпретувати текст, але при розпізнаванні графічних елементів вони стикаються з певними обмеженнями. Тому зараз для оптимізації зображень все ще потрібно коректно прописувати атрибути, призначені для цих цілей. До них можна віднести наступні:
- alt – альтернативний текст для опису зображення;
- title – спливаюча підказка (підпис);
- width – ширина зображення;
- height – висота зображення.
На мал.1 представлений фрагмент HTML коду із заповненими атрибутами. Варто відзначити, що згідно з рекомендаціями пошукових систем, у випадку, коли зображення є посиланням, прийнятніше title приписувати до посилання.
Мал.1 - Приклад заповнення атрибутів тега a - title; b - width & height; c - alt
Для того, щоб пошуковий робот зміг визначити, що саме зображено на картинці, він в першу чергу сканує тег alt. Тому власникам сайтів, які в якості контенту переважно використовують зображення, бажано до цього факту поставитися з максимальною увагою.
Формування текстів для атрибутів тега
Альтернативний текст для атрибутів повинен бути коротким (менше 150-ти символів з урахуванням пробілів) і інформативним. Пошуковим системам необхідний текстовий еквівалент зображення. Необхідно надати їм інформацію про тематичний зміст картинки з включенням релевантних ключових слів. Для цих цілей можна задіяти низькочастотні запити, що збільшить шанси потрапляння зображення в TOP пошуку по картинках. Найбільш значимі запити краще вказувати на початку опису. Разом з тим, не слід зловживати кількістю ключових слів в описі, щоб не перевантажувати ними зображення. Такі дії можуть мати негативні наслідки для просування.
Не потрібно використовувати символи, які не мають пошукової актуальності, наприклад © або (с). Для кожного зображення описовий текст повинен бути унікальним, а графічний об'єкт за змістом повинен відповідати вмісту. Важливий також релевантний контекст для зображень. Особливо - семантична складова навколишнього тексту (приблизно 15 слів до і після зображення). Такий зв'язок дозволяє пошуковим системам визначити «якість» зображення. Почасти дані рекомендації сформульовані в документах MSDN (MSDN - бібліотека для технічних фахівців з розробки програмного забезпечення).
Установка значень для атрибутів width і height
Заповнення значень ширини (width) і висоти (height) зображення (див. мал.1) сприяють прискоренню його завантаження. Так, якщо браузеру недоступні ці дані, він повинен їх спочатку визначити і тільки потім завантажити об'єкт і іншу частину коду сторінки. Коли ж параметри прописані, браузер може заздалегідь виділити місце під малюнок, одночасно завантажуючи решту сторінки. Крім того, ці правила справедливі і для таблиць. Сервіси пошуку картинок (див. мал.2) також використовують атрибути width і height для визначення класу зображення (мале, середнє, велике). Варто перевіряти ще раз, що встановлені значення відповідають фактичному розміру зображення.
Мал.2 - Сервіси пошуку картинок (a - images.yandex.ru; b - images.google.com.ua)
Іменування графічних файлів
Файл - це ще один покажчик, за допомогою якого пошукові системи можуть визначати тематику зображення. При іменуванні графічних файлів можна спиратися на такі «швидкі» рекомендації:
-
імена повинні бути прості та зрозумілі користувачеві;
-
можна використовувати ключові слова в назві файлу;
-
не використовувати назви файлів без смислового навантаження (наприклад, IMG027589.jpg);
-
кількість слів у файлі не повинно перевищувати 4-5;
-
замість пробілів між словами використовувати дефіс;
-
при необхідності використання однієї смислової основи в імені файлів для різних зображень, просто додавати ідентифікатор (наприклад, kozhanaja-kurtka-01.jpg, kozhanaja-kurtka-02.jpg, kozhanaja-kurtka-03.jpg тощо;).
-
якщо можливо, всі схожі картинки, які логічно можуть бути згруповані, розміщувати в одній папці з відповідним ім'ям (наприклад, ... /kozhanye-kurtki/kozhanaja-kurtka-01.jpg, ... /kozhanye-kurtki/kozhanaja-kurtka-02.jpg і т.д.).
Вибір формату зображень
Вибір оптимального формату зображення дозволяє помітно прискорити завантаження веб-сторінки без шкоди для якості картинки. У більшості користувачів сформувалися високі вимоги до цих чинників. Щоб їх задовольнити, необхідно дотримуватися балансу між часом завантаження і прийнятними візуальними характеристиками зображень.
Насправді не існує поняття "кращий формат", але для конкретного типу зображення можна вибрати найбільш підходящий в поєднанні з ефективними методами стиснення. Розглянемо кілька популярних графічних форматів:
-
GraphicsInterchangeFormat (GIF) - цей формат зображення найкраще підходить для зображень, в яких використовується 1-2 кольори, наприклад, логотипи або анімація. Особливості: прозорий фон, відсутня змішання кольорів.
-
PortableNetworkGraphics (PNG) - забезпечує високу якість, але при цьому генерує файли великого розміру, які часто не підходять для використання в мережі. Існують винятки, наприклад, коли потрібно надзвичайно високу якість: твори мистецтва (картини).
-
JointPhotographicExpertsGroup (JPEG) - це бажаний формат для зображень в мережі Інтернет. Показує велику різноманітність кольорів і генерує файли меншого розміру, ніж PNG. Цей формат чудово підходить для фотографій, а також для ілюстрацій, де присутній градієнт, тіні і т. п.
Зберігати зображення краще із застосуванням прогресивної схеми стиснення (progressive JPEG, див. мал.3а) замість базового режиму кодування (baseline JPEG, див. мал.3b). У такому випадку малюнок буде завантажуватися швидше, поступово збільшуючи ступінь деталізації. (див. мал.3a).
Мал. 3 - a (прогресивне стиснення JPEG); b (базове стиснення JPEG)
Розмір одного і того ж зображення при використанні різних форматів: GIF (256 кольорів) - 42K; PNG-8 (256 кольорів) - 37K; PNG-24 - 146K; JPG (60 quality) - 32K
Висновки
У статті розглянуті методи роботи з графічними матеріалами. При комплексному використанні вони сприяють поліпшенню індексування та ранжирування зображень на сайті. Разом з тим, добре оптимізована графіка допомагає встановити емоційний зв'язок з відвідувачами ресурсу. Зображення пожвавлюють сторінки з текстом, додаючи яскраві кольори і образи, до великого задоволення користувачів. На додаток до всього графічні зображення можуть служити також джерелом додаткового пошукового трафіку для сайту.
Підводячи підсумок, необхідно врахувати ще кілька хороших практик:
-
графічні файли повинні бути доступні для пошукових роботів (у файлі robots.txt папки із зображеннями не повинні закриватися від індексації);
-
зображення бажано додавати в карту сайту (див. детальніше);
-
якщо виникає необхідність - створювати кілька версій зображення, використовувати графічні мініатюри (див. детальніше);
-
залучати зовнішні посилання для найбільш цінних зображень;
-
забезпечити унікальність графічних матеріалів.
Додаткову інформацію можна знайти в довідниках пошукових систем:
