1. Cео-оптимізація картинок поетапно
2. Оптимізація картинок для поліпшення швидкості завантаження

10 Авг 2017

Дуже часто в процесі внутрішньої оптимізації сайту картинкам приділяється мало уваги. І дарма, адже їх оптимізація допомагає підвищити релевантність і підняти трафік з сервісів Яндекс і Гугл Картинки. Безумовно, мова йде про унікальний контент, чужі фото навряд чи дадуть хороший ефект, а ось покарати за їх використання вас можуть легко. Якщо своїх у вас немає, можна купити їх в фотобанку і обов'язково поставити водяний знак - логотип своєї компанії, він не повинен закривати важливі місця, але і вирізати або затерти його повинно бути складно - так ви убезпечите себе від крадіжки.

Cео-оптимізація картинок поетапно

Очевидно, що картинка не повинна спотворюватися, розтягуватися або розпадатися на пікселі, якість повинна бути високим. Якщо ви фотографуєте самостійно, необхідно виставити правильну різкість і баланс білого. Фото найкраще робити без спалаху, при природному денному світлі. Якщо мова йде про товар, то фон повинен бути світлим. Людей найкраще фотографувати на однотонному тлі. При роботі з дрібними товарами (наприклад, біжутерія) необхідно використовувати макрозйомку.

Пара слів про формат - використовуйте jpg або png. Інші - більш ваговиті і не завжди коректно відображаються. Анімовані картинки часто визначаються як банери або елементи верстки.

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

Далі потрібно прописати назву картинки. Воно повинно бути зрозумілим і відображати суть зображення: наприклад, не «99458754DSCIM», а «optimizacija-izobrazhenij» - обов'язково транслитом. Згодом з цієї назви формується посилання на картинку.

На сайті потрібно заповнити атрибути alt і title тега img (російським текстом). Альтернативний текст (alt) повинен бути зрозумілим і містити входження ключового слова. Він не повинен бути занадто довгим - 3-8 слів цілком достатньо. Alt потрібно заповнювати обов'язково, по ньому пошукові системи розпізнають, що зображено на картинці. А в title можна додати додатковий опис для картинки, воно не повинно збігатися з вмістом alt, але частково включати в себе слова з цього атрибута. Також можна заповнити Description зображення, але якщо дані тег вже заповнений для сторінки, то можна це не робити.

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

Якщо часу в обріз - зробіть підпис для людей на 150-200 зн., Тоді пошуковий робот зможе використовувати її. Це, звичайно, не те, але краще ніж нічого.

Роботу допоможе знайти ваші картинки атрибути «HEIGHT» і «WIDTH» (висота і ширина), оскільки в сервісах картинок користувачі можуть шукати інформацію за цими параметрами.

Маленька хитрість: розташуйте картинки поруч з заголовками h1-h6 - пошукові системи надають їм більше ваги.

У підсумку вийде так:

<Img title = "як зробити SEO-оптимізацію картинок покроково" src = "http://site.ru/optimizacia-kartinok.jpg" alt = "SEO оптимізація картинок" width = "ширина в пікселях" height = "висота в пікселях "/>

Описані вище методи підходять як для просування в Яндексі , Так і в Гуглі.

Оптимізація картинок для поліпшення швидкості завантаження

Тепер поговоримо про технічну оптимізації зображень, що не менш важливо для SЕО.

• Очевидно, що великі картинки «обтяжують» сайт і він буде довго грузиться. Щоб зрозуміти, скільки у вас на сторінці картинок, які потребують стиснення, скористайтеся Google Pagespeed Insights:

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

• Намагайтеся не використовувати формат gif і замінювати його на png. А png, в свою чергу, можна стиснути за допомогою різних онлайн-сервісів, які ви легко зможете знайти самі. Великі зображення слід перевести в jpg і теж стиснути з максимальним збереженням якості.

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

Також з них потрібно вичистити всю зайву інформацію (теги, дата фото і т.п.). Це додає непотрібної тяжкості.

• Замість того щоб використовувати масштабування (коли для великої картинки в адміністративній панелі сайту задається набагато менший розмір), завантажуйте відразу невеликі і середні фото.
• При роботі в Фотошопі у вас може зберегтися непотрібна інформація в шарах. І там, де на вигляд прозоро, насправді може бути зайнято і обсяг зображення від цього збільшиться. Перед додаванням на сайт перевірте картинку і видаліть зайве.
• Також радимо зменшити кількість зображень. Це не означає, що потрібно видалити картинки, просто скомпонуйте кілька картинок в одну. Що це дає, адже сумарний обсяг залишається таким же? Так, але при завантаженні кожного зображення надходить запит до сервера і на його обробку йде якийсь час. Коли картинка одна - виходить швидше.

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