Как оптимизировать изображения для сайта

pageblock_iconКонтекстная реклама
pageblock_icon11 июня 2021
pageblock_icon28 просмотров
pageblock_iconСредняя сложность
pageblock_icon8 минут
Поделиться

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

Содержание статьи:


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

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

В статье расскажем, как картинки влияют на SEO, а также как их правильно оптимизировать.


Принципы оптимизации

Для того, чтобы картинки правильно воспринимались поисковиком и индексировались, учитывают:

1. Качество и разрешение.

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

2. Наличие alt-атрибута.

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

3. «Окружение».

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

4. Нет плагиату.

Уникальные фотографии для статьи – сигнал поисковику поднять вас в выдаче, как релевантный ресурс.

5. Скорость загрузки, адаптация изображений.

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

 picture 11-2.png  picture 12-4.png

Что сделать, чтобы картинки сканировались и индексировались

Как улучшить SEO за счет визуальных элементов:

  • Создайте ценность в медиа для посетителей при релевантном тексте, которому они соответствуют.

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

  • Не забывайте о структурированных данных. Это помогает обозначать тип контента – товар, услуга или рецепт.

  • Безопасный поиск. Функция, скрывающая материалы сексуального или жесткого характера. Если есть вероятность, что контент распознается так, то отделите их в структуре URL метаданными <meta name=»rating» content=»adult» />.

  • Заполняйте атрибуты alt, title, подписывайте, называйте файлы.

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

  • Создайте карту сайта для картинок.

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


Как влияет формат на SEO

Медиа в среднем занимает 21% веса страницы, поэтому стоит оптимизировать их размер.

Форматы бывают:

  1. JPEG. Распространенный тип файлов, при сжатии сохраняет качество.

  2. PNG. Качество сохраняет лучше, весит больше. Чаще используют для инфографики и для элементов дизайна.

  3. BMP. Передает высокое качество, но не сжимает изображения.

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

  5. SVG. Логотипы, значки и самые мелкие визуальные элементы. Универсальный, проблемы в стилях шрифтов. Не используйте встраиваемый формат, чтобы картинка легче индексировалась.

  6. GIF. Весят много. Добавляет контенту привлекательности и увеличивает трафик. Сканируются также, как и прочие графические файлы.

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

 picture 11-3.png  picture 11-1.png


Почему важен уникальный контент

С несплагиаченным контентом больше шансов попасть в ТОП. Больше пользы для пользователя, так как в картинках есть ценность.

Но иногда можно обойтись готовыми медиа, если знать, как сделать из них уникальные.

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

Как сделать не похоже на оригинал:

  • отразить зеркально, часто поисковик понимает, что контент не уникален;

  • обрезка с изменением композиции;

  • корректировка яркости, контрастности;

  • применить фильтры и эффекты;

  • удалить элементы на изображении.

Но, если вы все-таки создали контент для сайта, стоит его защитить. Для того, чтобы картинку не скопировали, используют метаданные. Также, существует общепринятый стандарт копирайта - IPTC Photo Standard.

С помощью него указывают:

  • Имя автора, название компании. Кому принадлежит контент.

  • Источник изображения.

  • Значок копирайта. Для заявления об авторских правах.

  • Права в интернете. URL с информацией о лицензии.

  • Лицензиар. URL, где можно покупать право на использование медиа.

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

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


Атрибуты, структурированные данные

Что касается технической оптимизации, существуют следующие возможности:

  • Загружать весь контент по мере прокрутки страницы. С помощью техники lazy load картинки могут загружаться асинхронно. Также можно хранить изображения в кэше, с помощью атрибута decoding, показывать так же по мере прокрутки.

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

Сейчас многие CMS, например WordPress, включают встроенную адаптивность изображений. Атрибуты srcset и sizes автоматически заполняются после загрузки. Где такой возможности нет – нужно вручную задавать параметры.

  • Связывайте текст в атрибуте alt с релевантными запросами. Текст понадобится для доступности контента, короткий и понятный, для отображения сути медиа. В alt добавляют ключи, но главное сделать это органично.

  • Заполняйте title. Текст, который показывается при наведении курсора на элемент. Текст может быть больше, так как будет описываться контекст изображения. Не спамьте ключами.

  • Подписывайте картинки. Туда можно добавить дополнительную информацию.

  • URL делайте соответственным структуре сайта и его иерархии.

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

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

Оптимизация визуальных элементов улучшает поисковую видимость сайта и облегчает «общение» пользователя с контентом.

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

 
 
 
Скидка на разработку сайта 15%
при оставлении заявки на разработку до 25.03.2021
Поставить лайк
Добавить комментарий
Ваше имя и E-mail не будут опубликованы.
Отправляя данные, вы разрешаете обработку персональных данных и соглашаетесь с Политикой конфиденциальности.
Получить коммерческое предложение в WhatsApp
/blog/kontekstnaya-reklama/kak-optimizirovat-izobrazheniya-dlya-sayta/