SEO-оптимизация

От Alt до Я или как оптимизировать картинки для SEO

Время чтения - 10 мин

Количество прочтений

1112

Дата публикации —
11 июня 2021

Андрей Павлович

Частный SEO-специалист и автор статьи

Навигация по статье:

1. Пошаговая инструкция для оптимизации изображений
2. Инструкция по уменьшению веса изображений
3. Как правильно заполнять атрибуты Alt и Title
4. На что смотрят поисковые системы
5. Ответы на вопросы

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

Google Images
Яндекс Картинок

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

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

Пошаговая инструкция для оптимизации изображений

— Оригинальные изображения всегда лучше

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

Для этого в начале нужно проверить оригинальность картинки с помощью сервисов — https://tineye.com/, так и с помощью поиска по картинкам в Яндекс и Google. Заносите туда своё изображение и проверяете, если поисковики ничего не нашли, то с большой вероятностью, что картинка оригинальная. Также, по возможности, делайте собственные скриншоты и фотографии.

— Используйте картинки правильного размера

Проанализировав десяток сайтов и взяв в учёт опыт других SEOшников, можно сделать вывод, что в ТОП картинок в Яндекс и Googleпопадают изображения размером 4:3, в разрешении от 1200 пикселей в ширину и 800 пикселей в высоту.

За основу вы можно взять эти размеры:

1280 х 960
1152 x 864
1024 x 768

Если изображение большого размера, то уменьшите его, если оно меньше 150-200 пикселей, то лучше найдите изображение побольше, так как маленькие изображения поисковики могут принять за элемент дизайна и не проиндексировать вовсе.

— Подберите подходящий формат

Форматы изображений, поддерживаемые всеми видами браузеров:
JPEG — используется для фотографий, теряет качество при многоповторном скачивании;
PNG — используется для изображений в которых отсутствует задний фон;
GIF — используется для изображений, поддерживающих анимацию (гифки).

Форматы, не поддержиемые в Safari, IOS Safari, Internet Explorer, но имеют преимущества перед другими изображениями:
SVG— не теряет качество при увеличении или уменьшении изображения. Используется для иконок и анимации;
WebP— используется как для фотографий, так и для анимаций. Имеет меньший вес в сравнении с PNG и JPEG, но чтобы он корректно отображался во всех браузерах необходимо подключить необходимые полифиллы + добавить альтернативные версии изображений.

— Уменьшите вес изображений

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

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

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

Инструкция по уменьшению веса изображений

1. Поменяйте формат изображения

Лучший формат изображений, который уменьшает вес файла — это WebP, но он имеет свои недостатки, которые мы описывали выше. Если вы сможете их обойти, то смело используйте данный формат. Если нет, то используйте стандартный JPEG формат.

2. Уменьшить вес изображения

Благодаря предыдущему действию мы уменьшили размер изображения, но вес при этом никак не уменьшился. Теперь требуется уменьшить сам вес изображения, при этом не потеряв в качестве. Делается это с помощью специальных сервисов вроде https://tinypng.com/

Как правильно заполнять атрибуты Alt и Title

Прописывайте названия через транслитерацию

Если перед добавлением изображений на сайт их название выглядит как на картинке, то роботы поисковых систем не покажут её в ТОПе, так как она будет не релевантна запросу.

Для максимально релевантной выдачи запроса поисковые роботы используют не только ALT и Title изображений, но также смотрят на название загруженного файла, которое должно удовлетворять 3-м критерим:

1. Для дружбы с поисковыми роботами

2. Для продвижения в поиске — включать запрос, который люди ищут в поиске. Иначе это будет пустым изображением, а нам ведь нужен трафик.
3. Для простоты — состоять не более чем из 5 слов.
Оптимизированные изображения выглядят примерно таким образом:

«Писать в атрибуте alt не просто то что изображено на картинке, а то, как пользователь будет искать данное изображение»

2. Для продвижения в поиске — включать запрос, который люди ищут в поиске. Иначе это будет пустым изображением, а нам ведь нужен трафик.
3. Для простоты — состоять не более чем из 5 слов.
Оптимизированные изображения выглядят примерно таким образом:

Повторим ещё раз. Если вы добавляете, например, фото яблочного пирога, то перед добавлением фотографии на сайт:

Как неправильно: y_3119bb40.jpg

Как правильно: yablochnyj-pirog.jpg или pirog-s-yablokami.jpg

Заполнить атрибут alt

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

В коде страниц он выглядит следующим образом:
<imgsrc="wp-content/image/pirog-s-yablokami.jpg" alt="пирог с яблоками">

В различных CMSсистемах всё выглядит куда проще:

Пример заполнения Altв MODX

Правила заполнения:

1.     Длина не более 150 символов;
2.     Вставляйте ключевое слово, которые наиболее подходит для текста рядом с изображением. (Только не более 1 ключевой фразы);
3.     Схожим фотографиям с разных ракурсов прописывать уникальный Alt, добавив ракурс или номер.

Немного про Title изображения

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

То, что отображается при наведении на картинку, если прописать её Title

Обязательно следите за тем, чтобы Title не дублировал Alt.

В каких случаях Title НЕ заполняется:

На логотипе;
На мелких элементах дизайна;
На баннерах.

Влияние окружающего текста

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

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

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

Текст, написанный картинке не отображается в коде

Текст, прописанный в коде html

Выбор необходимых изображений (изображение обязательно должно отображать смысл текста или дополнять его);
Качество изображения — лучше без изображения, чем с отвратительным изображением;
Наличие текста на странице.

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

Что нужно делать:

1. Размещайте изображения по смыслу текста;
2. Прописывайте alt, который подходит под кусок текста;
3. Не используйте галереи.

Занесите труднодоступные изображения в файл sitemap

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

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

Пример карты сайта для изображений

<url> — является родительским тегом для каждого URL-адреса. Т.е он как бы является контейнером в который вы кладёте адрес каждой отдельной страницы и изображений.

<loc> — указывается URL, в котором находятся изображения. Один такой тег может включать до 1000 изображений.

<image:image> — является контейнером для 1 изображения.

<image:loc> — содержит адрес самой картинки. Обязательно проверьте, чтобы она не была запрещена для индексации.

Также, в карте сайта можно разместить дополнительную информацию об изображении, о чём подробнее можно узнать в Документации Google и Яндекс.

Ответы на частые вопросы:

Понравилась статья?

Есть предложения по поводу статьи?

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

Еще статьи по данной теме:

35 лучших сервисов для продвижения своего сайта

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

Профессия SEO-специалист. Кто это и чем занимается

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

Что такое SEO продвижение и что оно даст вашему сайту

SEO — это процесс точного анализа конкурентов, тестирования гипотез и отслеживание результата.