SEO-оптимізація картинок. Що, навіщо, і як

Наша команда-партнер Artmisto

Під «оптимізацією» сторінок сайту зазвичай мається на увазі особлива підготовка мета-тегів і тексту. Особливо тексту. Ви наймаєте копірайтера, видаєте йому список ключових слів, розписуєте ТЗ з купою параметрів, потім два-три дні все це справа керуєте, щоб підходило під всі вимоги ...

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

Так, картинки на сайті теж потрібно готувати до просування. Навіщо це робити, на що звернути увагу, і як - читайте далі.

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

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

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

Тепер про все по порядку.

Для початку потрібно трохи теорії і статистики.

У кожної сторінки на сайті є свою вагу. І згідно з останніми даними, середньостатистичний вага однієї сторінки збільшився на 240%, якщо порівнювати показники за 2010 і за 2016 року. І 64% всього вмісту в мережі - це зображення.

Джерело зображення - httparchive.org

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

Швидкість завантаження сторінки - важливий параметр для пошукових систем. Тому картинки на сайті, який потрібно просувати, повинні трохи важити.

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

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

Тепер про все докладніше.

Найпопулярніші формати зображень

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

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

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

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

Хочу зазначити, що .jpg - це ідеальний формат для фотографій, зображень продуктів, пейзажів і тому подібного.

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

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

. gif - найперший формат зображень в Інтернеті, який включає в себе 246 кольорів. Зараз знову популярний, тому що передає рух, анімацію. Важить по-різному, в залежності від довжини ролика. Якщо зображення не рухається - краще використовувати .jpg, він важить менше, і квітів більше. Картинка виходить більш соковита.

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

Оптимальний розмір зображень для вебу

Чому .jpg? Тому що його можна стискати, так, щоб картинка нормально виглядала і відносно мало важила.

Який розмір картинок використовувати? Намагайтеся використовувати зображення, розмір яких не менше ніж 800 × 600 пікселів. Перевірено на власному досвіді, що картинки такого розміру добре виглядають на всіх пристроях, при цьому не мають багато ваги.

Як оптимізувати картинки для SEO?

Тепер про сам «м'ясі» - як провести оптимізацію картинок для сайту?

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

Що включає в себе загальна оптимізація зображень для сайту?

1. Виберіть правильний формат зображення - про це я вже написав вище. Якщо фото - .jpg, якщо логотип - векторний формат. Якщо ви помилитеся з форматом - отримаєте великовагового монстра, а не сайт.
2. Змініть розмір зображення так, щоб воно добре відображалося. Для цього можна використовувати програми (про них нижче) або вбудовані засоби вашої CMS (про це теж піде мова далі).
3. Якщо потрібно, обріжте зображення, щоб залишити найголовнішу частину, і зменшити вагу картинки.
4. Застосуйте стиснення, якщо це необхідно.

Оптимізація зображень для просування означає наступне.

Кожне зображення, яке ви заливаєте на сайт, повинно мати прописані мета-теги. Це потрібно для seo-просування картинок, тобто для того, щоб вони потрапили в пошук за картинками.

Самі основні значення, які потрібно прописати - це title, і alt. Особливо alt. Якщо першим можна знехтувати, то цим - ні в якому разі.

Alt - це найважливіше поле для опису зображення. Він зчитується пошуковими системами, і виводиться в тому випадку, коли зображення не завантажується. У цьому мета-теге вам потрібно коротко описати, що зображено на картинці, і включити ключове слово. Але будьте обережні - якщо на сторінці багато картинок (більше 5), які не переспамьте сторінку ключовими словами!

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

Тепер від теорії переходимо до практики.

Популярні програми для стиснення зображень

Найпопулярніша програма для оптимізації картинок - це Photoshop. Так, в ній можна не тільки ріжки до фотографії конкурента домальовувати. Її багатий функціонал дозволяє:

- обрізати картинку;

- стиснути картинку;

- і навіть перегнати її з одного формату в інший.

Якщо з якоїсь причини ви не можете встановити цю програму на свій комп'ютер, ви можете скористатися Photoshop Online.

Ще одна програма для стиснення збережений - Gimp. Дозволяє оптимізувати для потреб seo картинки за допомогою опції «Експортувати як». Ви можете вибрати формат вихідного файлу, параметри якості та переглянути результат. А потім зберегти, якщо якість влаштовує.

Але це - ручні методи оптимізація розміру картинок для сайту. Можна піти іншим способом, і використовувати кошти своєї CMS.

Як задати розміри і прописати мета-теги для картинок (на прикладі WordPress)

Покажу вам, як це робиться, на прикладі найпростішої у використанні CMS, на якій сьогодні працює половина всіх сайтів в Інтернеті - WordPress.

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

Крок 1. Вставляємо картинку на сторінку - тиснемо в редакторі кнопку «Додати мультимедійний».

Крок 2. Вибираємо на комп'ютері і завантажуємо файл в адмінку. Справа у вас з'явиться меню «Параметри файлу».

Крок 3. Заповнюємо поля: заголовок, підпис, опис. Тема виведеться потім під картинкою. Це за бажанням. Але обов'язково заповніть поле «Атрибут alt». Впишіть сюди опис картинки, включивши ключове слово для сторінки.

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

Крок 5. Вставляємо картинку і перевіряємо результат на сторінці.

Якщо ви хочете внести зміни в уже залиту картинку, то вам потрібно:

1.Виделіть зображення.

1. Натиснути кнопку «Змінити»
2. У меню ви можете задати атрибути Alt і Title, якщо забули зробити це раніше.

Пошук по картинках - чи варто на це сподіватися?

Іншими словами, чи є сенс оптимізувати картинки з надією, що до вас прийде клієнт саме з пошуку по картинках?

Тут я напишу свою коронну фразу - з кожним сайтом є свої нюанси.

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

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

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

висновки

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

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