Оптимізація зображень - SEO своїми руками
Унікальний практичний курс, який навчить вас успішно просувати свої сайти та підвищувати їх ефективність
Оптимізація зображень
Найчастіше на сторінки додаються саме зображення, оскільки підібрати їх найпростіше. Як правильно використовувати зображення в тексті на сторінках сайту ми розглянемо в цьому уроці.
Які зображення використовувати
Дуже бажано використовувати зображення, зроблені власноруч або куплені на спеціальних сайтах. Однак це дорого і трудомістко, тому краще все-таки публікувати зображення, взяті із загального доступу, тобто з інтернету.
Відкриваємо Google і внизу сторінки переходимо за посиланням Google.com.
Далі вбиваємо назву потрібної нам картинки англійською мовою і тиснемо "Малюнки".
Якщо ви не знаєте англійської – використовуйте перекладач.
Як надати зображенню унікальності
Тепер варіанти обробки зображення.
Відображення по горизонталі
У меню вибираємо "Інструменти" - "Перетворення" - "Дзеркало".
Після цього натискаємо курсором на зображення для його дзеркального відображення і отримуємо ось що. Варто відзначити, що безболісно відображати по горизонталі виходить далеко не всі зображення.
У меню вибираємо "Інструменти" - "Перетворення" - "Обертання".
У вікні, що відкрилося, вказуємо кут, на який необхідно розгорнути зображення. Чим більший кут, тим вищою буде унікальність, але не варто захоплюватися, так зображення може некоректно виглядати сильно розгорнуте (рекомендуємо робити 15 градусів або трохи більше, але можна і менше).
Щоб зображення не обрізалося при обертанні, необхідно збільшити полотно (фон,на якому воно знаходиться). Для цього в меню вибираємо "Зображення" - "Полотно за розміром шарів".
Відображення по горизонталі та розвороту в більшості випадків вистачає для надання зображення унікальності. Щоб зберегти зміни, зроблені в GIMP, вибираємо в меню "Файл" - "Перезаписати ...".
У вікні натискаємо кнопку «Експорт». Всі ми отримали відредаговане зображення, відображене по горизонталі та трохи розгорнуте.
Перевіряємо унікальність цього зображення тут і отримуємо нуль збігів.
Правильна публікація зображень
Назва зображень бажано робити українськомовними, але на латиниці. Приклад: remont-noutbukov.png. Розділяти слова потрібно знаком тире, а не нижнім підкресленням.
Зображення необхідно використовувати лише наступних форматів: gif, jpeg і png, так як в інших форматах вони не індексуються або індексуються, але дуже повільно і неохоче.
Вага зображень, що використовуються на веб-сторінках, не повинна перевищувати 300-400 КБ, інакше сторінки будуть занадто довго вантажитися (оптимально до 100 КБ).
Розмір зображень бажано обмежувати 600px за висотою та шириною, а для відкриття великих зображень використовувати збільшення по кліку.
Примітка: У GIMP для зміни розміру зображення необхідно в меню вибрати "Зображення" - "Розмір зображення".
У вікні вказати потрібну ширину (довжина зміниться пропорційно автоматично), клацнути по вказаній на зображенні нижче іконці і натиснути кнопку «Змінити».
Не рекомендується використовувати анімаційні зображення, оскільки вони заважають сприймати інший контент і дратують відвідувачів сайту.
Приклад:
Також бажанопримусово вказувати розмір зображення, використовуючи атрибути width (ширина) та height (висота) відповідно.
Приклад:
Кількість зображень
Число, що використовуються на сторінці зображень може бути будь-яким, аби вони вписувалися в структуру тексту і не псували його зовнішній вигляд. Оптимально використовувати 1-2 зображення, але можна й більше.
Важливо, щоб зображень не було надто багато, інакше сторінка повільно завантажуватиметься у людей з повільним інтернетом, і вони відразу її закриватимуть, що негативно позначиться на поведінковому факторі.
Примітка: Оптимізація зображень не є надзвичайно важливою, як, наприклад, оптимізація тексту, проте вона дозволяє суттєво покращити сайт та залучити відвідувачів з Пошуку за картинками від Google та Яндекс.
На сайтах з невеликою кількістю сторінок можна оптимізувати зображення і потрібно. А ось на сайтах, де кількість зображень перевищує кілька сотень, оптимізацією займатися не варто, оскільки вона займе занадто багато часу. Це стосується в першу чергу великих інтернет магазинів та різних інформаційних порталів, а також блогів, що часто оновлюються.
Обтікання зображень
Не важливим для просування, але важливим для естетики є положення зображень у тексті. Якщо вони публікуються над або під текстом, то між ними та текстом має бути невелика відстань.
Якщо зображення знаходяться збоку від тексту, то вони повинні обтікатися, але в той же час не стикатися з ним.
Для реалізації акуратного обтікання без дотику використовується універсальний атрибут margin для тега , в якому вказується відступ елементів, що є на сторінці, від тексту. margin:5px 6px 7px 8px; - Відступи вказуються, починаючи зверхуі за годинниковою стрілкою.
Приклад:
Більшість CMS дозволяють реалізовувати відступи без «колупання» у коді. Наприклад, у WordPress дана можливість виглядає так.
Зауважте, що на зображенні атрибут margin прописує по-іншому. Цей варіант також працює, але перший є кращим.
Сподобався матеріал? Поділіться з іншими!
SEO-фото повинні за змістом відповідати тематиці сторінок, на яких використовуватимуться. Також біля картинки має бути відповідний за змістом текст. Якщо ще й атрибут alt буде відповідати цій темі, це позитивно вплине на просування зображень і релевантність сторінки в цілому.