<
  • Главная
Статьи

SEО-оптимізація зображень, картинок, фото - мета-теги, поліпшення швидкості завантаження

  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 і теж стиснути з максимальним збереженням якості.

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

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

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

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


Що це дає, адже сумарний обсяг залишається таким же?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью