Автор:
Время на чтение: ~10 мин.
13 апреля 2021
32
Изображения на сайте помогают значительно оживить общий контент на странице, сделать его интересным и вовлекающим. Они влияют на конверсию для интернет-магазина, при выборе услуг на том или ином ресурсе, на решение сходить в кино или на выставку. Но многие забывают, что картинки способствуют SEO-продвижению и быстрому привлечению трафика.

О чем эта статья?

Данная статья будет посвящена тому, как правильно работать с картинками и фотографиями на сайте. Ведь сейчас важно, как никогда, использовать самые разные варианты продвижения и сервисы Яндекс. Картинки (Google Images) также являются одним из инструментов данного продвижения. Как сделать так, чтобы по запросам Вас находили в Интернете? Как получать много трафика и продаж? Поговорим об этом в нашей сегодняшней статье.

Качество изображений

Никто не отменял фактор релевантности, это значит, что нельзя использовать картинки, для сайта стоматологии, которые будут посвящены косметологии или венерологии. Это неправильно для продвижения и интента статьи. Пользователь, зайдя на такую страницу, закроет ее, не вчитываясь в коммерческое предложение, а вы, как владелец сайта, получите плохие поведенческие факторы.

Самое важное:

  • Релевантность картинки тематике статьи
  • Качество изображения (отсутствие запрещенного контента, размытия, выраженных пикселей и прочего)
  • Близость к тексту
  • Отсутствие лишних тегов в коде для вставки изображения

Вы замечали, что некоторые модные СМИ используют на своих новостных страницах абстрактные и порой алогичные изображения? Так вот это делается по нескольким причинам: дань моде, удержание внимание, социальный шеринг, поведенческие факторы. Как следствие всего этого – хайп и трафик. А так, где трафик, там рекламные контракты.

Оптимизация картинок для поискового SEO-продвижения

Мало подобрать грамотные, качественные и тематические изображения. Ведь еще надо их уметь оптимизировать.

Поисковые машины определяют принадлежность картинки или изображения по двум параметрам:

Мета-тег ALT

В HTML-коде прописывается в следующем виде в специальных полях. Служит для идентификации изображения ботами поисковых систем. Обычно, в тег Alt прописывается главное ключевое слово, по которому ищут контент.

Требования к тегу Alt:

  • Должен быть содержательным и описывать содержимое картинки
  • Состоять из 3–5 слов, но не больше 250 символов
  • Содержать ключевой запрос
  • Не содержать спам

Мета-тег Title

Данный тег отвечает за подсказку для пользователя сайта. Когда на картинку наводится курсор, высвечивается подсказка с названием этой картинки.

Требования к тегу Title:

  • Должен отвечать интенту страницы или конкретного абзаца
  • Состоять из 3–5 слов, но не больше 250 символов
  • Не должен быть слишком большим, так как всплывающее описание может перекрывать часть важного контента и попросту быть неудобным.
  • По возможности содержать ключевой запрос;
  • Не должен быть спамным

Размеры и форматы изображений

По данным портала HTTPARCHIVE по статистике, до 65% всех сайтов содержат в себе изображения со средним весом 1,5Мб. Чтобы Вы понимали, 1,5 Мб – это 1 500 Кб и речь только об одной картинке, а на среднем корпоративном сайте их может быть сотни. Про интернет-магазины и говорить нечего – там десятки тысяч товарных позиций с анонсами и товарными изображениями.

Владельцы сайтов в погоне за качеством изображений забывают об их весе и формате. А форматы сегодня допустимы следующие:

  • JPEG – самый распространенный формат картинок и фотографий. Используйте его по причине баланса веса и качества.
  • PNG – если требуется разместить предельное качество в растре и соблюсти прозрачный фон
  • SVG – качественное векторное изображение. Обычно для сайта используются векторные SVG-логотипы, которые на всех устройствах и при любых растяжениях смотрятся на высоте.

Есть еще и такие современные форматы, как WebP и JPEG-XR, но мы не делаем на них акцент в силу их новизны и не все браузеры могут их корректно отображать.

Рекомендуем для сайта придерживаться размера картинок не более 150 Кб и формата JPEG, таким образом вы обеспечите своему сайту быструю загрузку и низкую потерю аудитории и конверсий.

Уникальность картинок и авторское право

Высший уровень позиционирования своей компании в Интернете – это уникальность контента, а именно фотографий. Когда вы специально снимаете персонал на профессиональную камеру с последующей обработкой материала, или готовите съемку товара для интернет-магазина, это видно. Пользователь чувствует, что компания серьезно подошла к делу и начинает интуитивно доверять компании.

Такие изображения требуется защищать авторским правом и наложением водяного знака. Есть очень много плагинов для WordPress, которые могут реализовать данную задачу. У Битрикса тоже есть аналогичные решения.

 

Подумайте несколько раз прежде, чем брать стоковое фото или с сайта конкурента. Поисковые системы научились определять первоисточник изображения и обрабатывают данную информацию нейронными алгоритмами. Проверить уникальность фото можно сервисом Tineye.com

 

Если у вас все же не хватает времени и ресурсов на подготовку уникального контента, стоковые картинки преобразите под себя при помощи сервиса Канва.ком. Здесь вы сам себе дизайнер и фотошопер.

Сжатие картинок

Обязательно задавайте в CSS-стилях ширину и высоту изображений, чтобы при загрузке контент автоматически подстраивался под верстку страницы как в декстопном, так и мобильной вариантах.

Обеспечить сжатие картинок можно несколькими способами:

  • Установка плагина

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

  • Самостоятельное сжатие сервисами

Compressor — сжимает изображения с уменьшением объема до 90% и при этом сохранить высокое разрешение. Он работает с JPEG, PNG, GIF и SVG-файлами. Ограничение по размеру — 10 Mb.

Tinypng.com — можно загружать до 20 изображений, размер каждого из которых не может превышать 5 Mb.

Punypng.com — ограничение по размеру — 500 KB, по количеству файлов — 20 штук. Возможно сжатие JPG, GIF и PNG-файлов.

Compressnow.com — можете самостоятельно задать степень сжатия. Обратите внимание, что при включенном AdBlock сервис не работает

  • Photoshop

Открываем картинку в фотошопе и меняем размер, а также ужимаем качество изображения до оптимального (60-80%). Вес картинки также изменится и ее можно будет загружать на сайт.

  • Сжатие изображений на сервере

На большинстве хостинг-провайдеров можно настроить сжатие JPEG в Gzip. Для Nginx и Apache доступен модуль PageSpeed для сжатия данных на уровне сервера

 

Каждая секунда решает две глобальные задачи любого сайта – останется ли посетитель на странице и совершит покупку или уйдет, так и не выполнив своей цели.

Название картинок и хранение на сервере

Если вы загружаете массово изображения через 1С или напрямую на сайт интернет-магазина, обязательно позаботьтесь над названием файлов.

Замените названия картинок вида DSC108224534.jpg на более понятные и человекоподобные – chainik_tefal_DRE0928474. Поисковые системы гораздо лояльнее отнесутся к латинице, чем непонятному набору символов.

Яндекс отлично учитывает транслитерацию, а вот Google негативно воспринимает кириллицу, поэтому рекомендуем называть все файлы картинок на латинице. К тому же надо учитывать, что некоторые CMS-системы могут некорректно обрабатывать кириллические конструкции и выдавать еще больший ад в названиях файлов.

Адаптивность изображений

Очень часто на уровне юзера я сталкиваюсь с не адаптированными картинками и очень неприятно видеть зарезанные по краям изображения. То же самое, кстати, относится и к видео-контейнерам. Чтобы этого избежать используйте специальные настройки ваших плагинов или попросите программиста прописать в CSS-файлах специальный код, отвечающий за адаптивность.

 

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

Оптимизация запросов к серверу

Одна картинка – это один запрос к серверу. Представьте, сколько изображений может располагаться на одной странице. Это анонсы, баннеры, иконки социальных сетей, гиф-изображения, баннеры в тексте и прочие. Все эти файлы потребляют много ресурсов сервера.

Для того, чтобы сайт «летал» включить CDN, данная опция позволит многократно снизать нагрузки на сервер и исключить даже минимальные лаги в процессе прорисовки изображений на странице

 

CDN (Content Delivery Network) — это географически распределённая сетевая инфраструктура, обеспечивающая быструю доставку контента пользователям веб-сервисов и сайтов. Входящие в состав CDN cерверы географически располагаются таким образом, чтобы сделать время ответа для пользователей сайта/сервиса минимальным. Источник: Habr

Социальные микроразметки

Хорошо оформленный контент должен быть и в деталях безупречным. Когда URL страницы расшаривается в социальных сетях, важно учитывать подгружается ли картинка к сообщению в Фейсбук, Вконтакте или других социальных сетях. За это отвечает Open Graph –придуманная социальной сетью Facebook букварная система отображения контента и уже используемая во всем мире как стандарт.

Карта сайта для изображений

Обычно это актуально для больших порталов, например интернет-магазинов. Там, где много картинок, создается отдельная карта сайта, что особенно нравится поисковой системе Google. Не забывайте прописывать путь этой карты в отдельной директиве Роботс.

Выводы по оптимизации картинок

  1. Используйте качественные и уникальные изображения
  2. Оптимизируйте изображения под требования поисковой оптимизации
  3. Не допускайте загрузку PNG-изображений на сайт, а также картинок с большим весом более 150 кБ.
  4. Загружайте изображения в формате JPEG, логотипы в формате SVG
  5. Добивайтесь адаптивности всех изображений
  6. Используйте с умом возможности сервера, включайте сжатие и CDN
  7. Каждая картинка должна иметь уникальное название на латинице, желательно с вхождением ключевого запроса
  8. Картинка на сайте должна быть полезной, близкой к тексту или абзацу, релевантной
  9. Используйте микроразметку Open Graph и Shema
  10. Используйте отдельную карту сайта для картинок, если их очень много
Оглавление