SEO оптимизация картинок

Что нам известно о SEO-оптимизации картинок? Довольно много. Что делают большинство владельцев сайтов для SEO-оптимизации картинок? Обычно ничего.

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

Рассмотрим лучшие практики работы с изображениями.

HTML тег изображения <IMG>

Во первых, давайте рассмотрим как выглядит изображение в HTML коде.

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате. Адрес файла с картинкой задаётся через атрибут src.

Синтаксис:

<img src="URL" alt="альтернативный текст">

Также, часто используемые атрибуты:

  • align — Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
  • alt — Альтернативный текст для изображения.
  • height — Высота изображения.
  • hspaceт — Горизонтальный отступ от изображения до окружающего контента.
  • vspace — Вертикальный отступ от изображения до окружающего контента.
  • width — Ширина изображения.

Называйте изображения понятными словами

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

Плохое название: 234234.jpg

Хорошее название: gazovyj-kotel-brandname-model.jpg

Если не знаете, как писать транслитом, то можете использовать сервис http://translit-online.ru/. Хотя стоит добавить, что поисковые системы понимают разные стандарты транслитерации.

Из справки Google:

Название файла может подсказать Google тематику изображения. Старайтесь, чтобы в названии файла содержалось описание тематики изображения. Например, название moj-novyj-chernyj-kotenok.jpg намного информативнее, чем IMG00023.JPG. Описательные названия файлов могут помочь и пользователям: если мы не сможем найти подходящий текст на странице, где нашли изображение, то используем название файла для описания изображения в результатах поиска.

Используйте короткие и информативные имена файлов и alt-текст
Используйте краткие описательные имена файлов и текст в атрибутах alt

Справка Google

Заполняйте ALT-атрибуты у картинок

Атрибуты Alt — это текстовая альтернатива изображениям, когда браузер не может правильно их отобразить (или если отображение картинок отключено специально). Даже когда изображение отображается, если навести на него курсор, вы увидите текст атрибута alt (в зависимости от настроек вашего браузера).

Атрибут alt также добавляет SEO-оптимизации вашему сайту. Добавление соответствующих атрибутов alt, включающих ключевые слова, к изображениям на вашем сайте может помочь вам лучше ранжироваться в поисковых системах. На самом деле, использование атрибутов alt — это, вероятно, лучший способ для ваших продуктов электронной коммерции отображаться в поиске изображений и веб-поиска Google.

Рассмотрим HTML код изображения:

<img src=»gazovyj-kotel-brandname-model.jpg » alt=»Газовый котел бренд модель»>

Некоторые правила для заполнения ALT:

  • Описывайте свои изображения простым языком, так же, как и имена файлов изображений.
  • Если вы продаете товары, имеющие номера моделей или серийные номера, используйте их в атрибутах alt.
  • Не забивайте атрибуты alt ключевыми словами (например, alt=»купить газовый котел котлы газовые котлы купить»).
  • Не используйте атрибуты alt для декоративных изображений (фоны, иконки). Поисковые системы могут наказать вас за чрезмерную оптимизацию.

Выдержки из справки поисковых систем:

В атрибуте alt следует писать не все ключевые слова сайта или страницы, а лишь те, которые действительно относятся к картинке. Это поможет роботу точнее найти картинку, а пользователю Яндекса — выбрать ее в результатах поиска и перейти на ваш сайт.

Яндекс Справка

Гугл: «Робот Googlebot обрабатывает каждую сканируемую страницу, чтобы составить полный индекс всех найденных слов, а также отметить, в какой части страницы они находятся. Кроме того, мы обрабатываем данные из основных тегов и атрибутов, например тегов title и атрибутов alt. «

«Кроме того, если вы используете изображение в качестве ссылки, то текст в атрибуте alt будет служить текстом обычной ссылки. Однако мы рекомендуем не злоупотреблять изображениями там, где для навигации по сайту можно использовать текстовые ссылки. Наконец, оптимизация имен графических файлов и текста в атрибутах alt упрощает поиск изображений, например в Google Картинках.»

Гугл Справка

Как поисковые системы ищут картинки

Здесь просто приведу фрагмент из справки Яндекс:

Кроме значений атрибутов alt и title при поиске по картинкам используются следующие тексты:

  • тексты ссылок на картинки с других страниц и с других сайтов;
  • прилегающий к картинке текст — расположенный на странице в непосредственной близости к картинке;
  • тексты и заголовки коротких документов, обрамляющих одиночную картинку;
  • имена файлов и скриптов картинок, в том числе с учетом транслитерации и упрощенного подстрочного перевода.

Меняйте размер (разрешение) изображения перед загрузкой на сайт

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

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

Изображение 900 на 900 пикселей, а на сайте отображается как 331 на 331 пиксель.

В таком случае по факту на страницу загружается большое изображение, а отображается как маленькое. Это замедляет загрузку страницы.

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

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

Большие и тяжелые изображения = низкая скорость загрузки.

Менять разрешение изображения можно почти в любом графическом редакторе:

Изменение разрешения в программе FastStone Viewer

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

При этом мельчить не стоит:

Используйте яркие изображения с высоким разрешением, желательно изображения большого размера, которые лучше привлекают посетителей из рекомендаций. Большие изображения должны быть шириной не менее 1200 пикселей. Задайте для них параметр max-image-preview:large или используйте технологию AMP. Не используйте в качестве изображения логотип своего сайта.

Google

Используйте подходящий формат и сжатие

Изображение с одинаковым разрешением будет иметь разный размер файла в разных форматах. Для ускорения загрузки используйте эффективные для интернета форматы: jpg, png

Часто картинку можно сжать в разы без потери качества (заметного для глаза). Пример:

Изменение качества изображения

Если у вас нет редактора на компьютере, попробуйте онлайн-редакторы

Хотя существует множество форматов изображений, PNG и JPEG являются наиболее распространенными в Интернете.

  • PNG: создает изображения лучшего качества, но имеет больший размер файла.
  • JPEG: похуже качество изображения, но вы можете подобрать баланс, когда качество будет сравнимо с PNG но вес намного меньше.
  • WebP: Выберите сжатие без потерь или с потерями, используя этот формат изображений, поддерживаемый Chrome и Firefox.

Добавляйте изображения в карту сайта sitemap.xml

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

Гугл: Кроме того, можно предоставить Google дополнительную информацию о графических материалах, размещенных на вашем сайте, с помощью специальных функций файла Sitemap. Это поможет Google найти контент, который иначе нельзя было бы обнаружить (например, если он загружается с помощью JavaScript), а также позволит вам указать изображения, которые необходимо сканировать и индексировать.

Справка Гугл

Избегайте «тяжелых» декоративных изображений

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

Проверьте размеры изображений используемых в дизайне (в шаблоне) на вашем сайте .

Вот несколько советов по уменьшению размеров файлов декоративных изображений:

  • Для изображений, создающих границы или простые узоры, сделайте их в формате PNG-8 или GIF. Это может сократить размер до сотен байт (меньше килобайта).
  • Если возможно, используйте CSS для создания цветных областей и градиентов.
  • Внимательно посмотрите на большие фоновые изображения. Это могут быть огромные файлы. Сократите их настолько, насколько это возможно без ухудшения качества изображения.
  • Чтобы уменьшить размер фонового изображения, можно вырезать середину фонового изображения и сделать его прозрачным. Это значительно уменьшит размер файла.
Пример фона с вырезанным местом под контент.

Используйте уникальные изображения

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

Продумайте URL структуру изображений

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

Google

Не размещайте текст на картинках

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

Добавьте структурированные данные

Разметка структурированных данных позволяет поисковым системам сопоставить изображения с сущностями (товаром, местом, человеком) и тогда могут использовать связанную с ними информацию.

Например Гугл и Яндекс могут выдавать изображения прямо в выдаче. А при поиске по картинкам могут вывести цену рядом с изображением.

Пример страницы в поисковой выдаче со структурированными данными

Вставляйте картинки через тег <img>

Часто встречаю в интернет-магазинах, что изображения товаров вставлены как фон

Картинки скачиваются по ссылкам из атрибута src тега img, а также атрибутов data-src и data-original (в этом случае наличие ссылки на изображение в атрибуте src не обязательно).

В поиск по картинкам попадают те изображения, которые не запрещены к индексированию в robots.txt или расположены на страницах, не запрещенных к индексированию в robots.txt.

Яндекс

Атрибут Title и отличие от Alt

У изображений есть еще один атрибут — Title. Если alt нужен для поисковых систем и для устройств и браузеров, которые не смогли отобразить картинку или читают текст в слух, то title нужен для пользователей.

<img src=»image-title-tag.png» alt=»атрибут title» title=»Объясняем разницу между title и alt атрибутами.»

  • img — тег изображения
  • src — атрибут, содержащий путь к картинке
  • alt — альтернативный текст
  • title — сопровождающий картинку текст во всплывающей подсказке

Атрибут alt сообщает поисковой системе (или любой программе, которая сканирует страницу) что находится на картинке, т.к. видеть программа не может (хотя с машинным обучением поисковики чаще всего понимают какой объект на картинке, но не всегда понимают контекст).

Атрибут title нужен для пользователей, для их удобства. Он может объяснять изображение, дополнить информацию. title видно, если навести мышку на изображение, туда можно добавить поясняющий текст или сообщение для пользователя.

картинка для показа атрибута title
Наведите мышку и увидите title изображения.

Атрибут title не является приемлемой заменой атрибута alt. Кроме того, избегайте повторения значения атрибута alt в атрибуте title, объявленном на том же изображении.

Атрибут title также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент <figure> вместе с элементом <figcaption>.

Если открыть свежую спецификацию HTML и почитать про тег <img>, то там уже нет описания атрибута title. Но можно найти такой комментарий:

(перевод) Полагаться на атрибут title в настоящее время не рекомендуется, поскольку многие агенты пользователя не раскрывают атрибут доступным образом, как того требует данная спецификация (например, для появления всплывающей подсказки требуется указательное устройство, такое как мышь, что исключает пользователей, использующих только клавиатуру, и пользователей, использующих только сенсорное управление, например, тех, у кого есть современный телефон или планшет).

https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute

На мобильных в браузере crhome можно сделать долгий тап на картинке и увидеть атрибут title, но врядли это кто-то будет делать.

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

Как поместить картинку на первое место в поиске?

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

Кроме того, на ранжирование влияет качество сайта, на котором размещена картинка, а также качество самого изображения. О том, какие сайты считаются качественными, можно прочитать в разделе Советы вебмастеру Справки Яндекс.Вебмастера.

Яндекс

Как посмотреть, какие картинки с сайта находятся в поиске?

Для этого используйте оператор site:адрес сайта на вкладке поиска по картинкам в Яндекс или Google

Смотрю какие картинки с моего сайта есть в Google

Заключение

В заключение хочу повториться, что большинство владельцев сайтов не обращают внимание на изображения. Возможно, они делают оптимизацию разово, когда привлекают подрядчика для SEO, но потом продолжают опять наполнять сайт по старинке. Если у вас есть регламент по работе с картинками, то вы уже делаете то, что 90% людей не делают.

Источники:

https://yandex.ru/support/images/indexing.html

https://yandex.ru/support/images/first-pict.html

https://developers.google.com/search/docs/advanced/guidelines/google-images

Илья Пронин

Илья Пронин

специалист по SEO продвижению

Обсуждение и вопросы:

0 Комментариев
Оставить комментарий

Ваш адрес email не будет опубликован.