SEO-оптимизация изображений

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

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

Релевантность изображений

Один из важнейших факторов ранжирования для поисковых систем — это соответствие иллюстраций тематике страницы. Значит, картинка должна иметь смысловую связь с текстом, находящимся рядом (до и после неё, включая подпись). Важно добавлять в текст как можно больше ключевых слов, поскольку это позитивно влияет на ранжирование.

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

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

Подписи к изображениям

На большую часть запросов предлагаются релевантные картинки. Можно сказать, что поисковые системы достаточно развиты, но ведь не настолько, чтобы на 100 % понимать, что находится на изображении. Поэтому наша основная задача — помочь поисковикам.

Один из элементов, которые используют в своём анализе роботы Яндекса и Google, — это подписи к изображениям. Именно они находятся ближе всего к тегу <img>, и по ним будет анализироваться тематическое соответствие визуального содержания и статьи. Поэтому подписи должны быть SEO-оптимизированы и обязательно содержать ключевые слова.

Оригинальность изображений

В SEO-оптимизации не последнее место занимает оригинальность картинок. Здесь всё так же, как и с текстом — поисковые системы очень ценят уникальный контент.

Например, если вы работаете с товарами или услугами, лучше провести самостоятельную или профессиональную фотосъёмку предлагаемых продуктов. Если такой возможности нет, возьмите стоковые фотографии, но постарайтесь видоизменить их посредством обработки в редакторе и добавьте несколько оригинальных элементов. Для этого можно воспользоваться известной программой для фотообработки Photoshop или же такими сервисами, как Canva (https://about.canva.com/ru_ru/) и Snapseed (доступно через AppStore и PlayMarket).

Чтобы убедиться, что картинка достаточно оригинальна, проверьте её через сервис поиска дубликатов изображений, например TinyEye (https://tineye.com/). Здесь можно как загрузить картинку, так и проверить её по URL.

Также это можно сделать через поиск по картинкам от Яндекса. Просто перейдите в Яндекс.Картинки (https://yandex.ru/images/). В поисковой строке нажмите на значок камеры и загрузите изображение удобным для вас способом.

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

Если дубликатов изображения не найдено — оно уникально.

Лицензии на изображения

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

1. Creative Commons CC-BY (Attribution) — максимально свободная. Если вы видите, что графический контент размещён под данной лицензией, это значит, что его разрешено распространять и видоизменять для некоммерческих целей.
2. CC BY-SA (ShareAlike) — допустимо распространение, изменение, использование изображений в коммерческих целях, но следует указывать авторство и лицензирование картинок.
3. CC BY-NC-SA (NonCommercial-ShareAlike) — даёт возможность редактировать и распространять изображения, если указан автор и изменённые картинки обладают аналогичной лицензией.
4. CC BY-ND (NoDerivs) — данная лицензия разрешает использовать изображения для любых целей, указав авторство, однако не позволяет никаким образом видоизменять фотографии и картинки.
5. CC BY-NC (NonCommercial) — допускает использование изображений с указанием авторства и видоизменение. Но эти действия с картинками разрешены лишь в некоммерческих целях.
6. CC BY-NC-ND (NonCommercial-NoDerivs) — одна из максимально требовательных. Позволяет загружать и делиться изображениями, указав авторство, однако изменения и коммерческое использование запрещены.
7. CC0 (Creative Commons Zero) — изображение под такой лицензией означает, что автор отказался от прав на него, ограничений по использованию данной фотографии или картинки нет.

Популярнейшей лицензией, охватывающей любые типы контента, является Creative Commons. Занимаясь поиском картинок, обращайте внимание именно на неё.

Среди самых лёгких способов найти изображения, которые допустимо взять для коммерческих целей, — это поиск через сервис Google.Картинки (https://www.google.ru/imghp?hl=ru). Вбейте в поисковую строку интересующую вас тематику, далее перейдите в Инструменты -> Права использования -> Лицензии Creative Commons.

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

Оптимизация изображений для сайта

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

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

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

Более того документы, имеющие вес более 10 МБ, не индексируются Яндексом.

Оптимальный вес изображения для сайта составляет около 200 КБ. Если на площадке, например в каталоге товаров, много картинок, то вес может быть ещё меньше — 40–70 КБ. Чтобы добиться такого результата, изображение необходимо оптимизировать. Для этого нужно:

Сделать это можно через многофункциональный графический редактор Photoshop или специальные сервисы для сжатия фото, такие как TinyPNG (https://tinypng.com/), TinyJPG (https://tinyjpg.com/) или Compressjpeg.com (https://compressjpeg.com/).

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

Также не забывайте о важности адаптивности картинок. Это значит, что изображения должны соответствовать размерам экрана устройства, с которого их будут просматривать. С этой задачей вам поможет справиться атрибут srcset. Он позволяет указать набор из нескольких вариаций исходного изображения, которые могут использоваться браузером.

Ситуация решается применением инструментов HTML <img>. Так выглядит стандартный путь к файлу. Таким способом можно указать только один путь к изображению.

<img src=”my-dog-800w.jpg” alt=”That’s my dog Bingo”>

Однако мы можем воспользоваться атрибутом srcset и добавить список из нескольких версий изображения.

<img srcset=”my-dog-320w.jpg 320w,
                        my-dog-480w.jpg 480w,
                        my-dog-800w.jpg 800w”
src=”my-dog-800w.jpg” alt=”That’s my dog Bingo”>

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

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

Наиболее часто для изображений на сайтах используются форматы JPG, PNG, GIF. Реже — SVG и WebP.

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

Векторная графика (SVG)

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

Основные плюсы векторной графики:

Векторная графика очень полезна при составлении логотипов, значков и прочего, поскольку такие изображения остаются яркими и чёткими в любом формате и при использовании на экране любого разрешения.

При необходимости оптимизировать векторные изображения можно воспользоваться библиотекой SVGO (https://github.com/svg/svgo). С её помощью получится удалить с картинок лишние метаданные, скрытые элементы, комментарии. Благодаря этому файлы теряют в весе, но качество изображений остаётся на прежнем уровне.

Оптимизация изображений для поиска

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

Атрибут alt тега img

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

Задать атрибут можно следующим образом:

<img border="0" alt="[альтернативный текст]" src="risunok.jpg"
width="[ширина картинки]" height="[высота картинки]">

В справочной системе Google прописаны рекомендации по оптимизации данного атрибута:

Рекомендации от Яндекса отличаются по некоторым пунктам. Например, система советует ставить ключевые слова/фразы в текст атрибута alt, но лишь действительно относящиеся к изображению. Такой подход упростит ботам поиск картинки по запросу, а пользователям поможет выбрать её в результатах выдачи. Яндекс не рекомендует оставлять пустым поле атрибута, советует прописывать alt всегда.

ЧПУ названия файла изображения

Довольно часто в URL используется хаотичный набор символов, которые сложно воспринимаются и иногда даже не читаются. Для решения этой проблемы был придуман ЧПУ, иначе называемый Friendly URL. Это простые и понятные адреса, легко считываемые как человеком, так и роботами. ЧПУ используют не только для URL сайта, но и для изображений.

Главные цели применения ЧПУ — привлечение дополнительного трафика и упрощение считывания информации поисковыми роботами. Прописывая Friendly URL, необходимо учитывать содержимое изображения, поскольку текст должен соответствовать ему.

Например, если на картинке изображён набор заварных пирожных, то название файла должно быть написано транслитерацией и выглядеть так: zavarnye-pirozhnye.jpg. Для сравнения: наименование DSC123.jpg не несёт в себе смысловой составляющей, соответственно, это осложняет работу поисковых систем.

Если у вас возникают сложности с преобразованием текста, воспользуйтесь специальными сервисами для транслитерации, например сайтом translit.ru или translitonline.com.

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

Например, вместо читаемого URL-адреса https://ru.depositphotos.com/stock-photos/мобильные мы получаем следующее: https://ru.depositphotos.com/stock-photos/%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D1%82%D0%B5%D0%BB%D0%B5%D1%84%D0%BE%D0%BD%D1%8B.html

Соответственно, при проведении оптимизации изображения, ссылка на него должна записываться шифром, а не просто кириллицей.

Например, в файле robots.txt придется использовать шифр, если необходимо запретить или разрешить индексацию изображения. То есть при необходимости прописать команду, нельзя написать:

Disallow: /мобильные-телефоны

Чтобы поисковик нас понял, нужно использовать шифр:

/%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D1%82%D0%B5%D0%BB%D0%B5%D1%84%D0%BE%D0%BD%D1%8B

При формировании sitemap.xml нужно контролировать, как прописаны адреса в файле — обязательно шифровкой.

Sitemap-файл для изображений

Создание файла sitemap.xml способно помочь поисковым системам находить на сайте изображения, которые изначально он увидеть не мог (к примеру, загружаемые посредством JavaScript). Это повысит шанс на появление именно ваших изображений в выдаче.

Основные моменты при создании Sitemap изображений:

1. Указать карту изображений сайта можно в отдельном файле (не забудьте оставить ссылку на него в robots.txt) и в имеющемся sitemap.xml.
2. В Sitemap-файле указываются специальные теги, а не только ссылки (<image:image>, <image:loc>, <image:title>, <image:caption>, <image:geo_location>, <image:license>).
3. Формировать карту изображений можно вручную и спецсредствами (например, через бесплатный сервис angeldigital.marketing или платную программу Netpeak Spider).
4. На WordPress действует плагин Google XML Sitemap for Images, он автоматически создаёт Sitemap-файл для картинок, загружаемых вами на сайт.

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

Микроразметка изображений

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

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

Изображения, размеченные с помощью schema.org, привлекают дополнительный трафик на сайт и вообще более удобны пользователям.

Существует стандарт семантической разметки schema.org, с которым можно ознакомиться здесь: https://schema.org/ImageObject. Пользуясь ею, вы улучшите представление своей площадки в результатах поиска на Яндекс.Картинках.

Если на сайте имеются данные о лицензировании, то мини-копии изображений в Google.Картинках могут отмечаться значком «Лицензия». Поэтому обязательно указывайте в свойствах license URL страницы, на которой прописаны условия лицензии.

Вся соль

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

Для наглядности структурируем основные положения статьи. Итак, при СЕО-оптимизации картинок отталкивайтесь от следующих рекомендаций:

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