Блог

От А до Я: Оптимизация картинок на сайте для поисковых систем

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

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

112

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

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

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

Содержание:

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

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

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

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

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

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

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

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

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

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

Для начала определимся с форматом изображения.

Форматы изображений, поддерживаемые всеми видами браузеров:

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

Форматы, которые не поддерживаются в Safari, IOSSafari, InternetExplorer, но имеют преимущества перед другими изображениями:

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

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

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

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

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

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

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

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

Проанализировав десяток сайтов и взяв в учёт опыт других SEO-шников, можно сделать вывод, что в ТОП картинок в Яндекс и Googleпопадают изображения размером 4:3. Самые оптимальные размеры, следующие: 1024x768, 1152x864, 1280х960. Если изображение большого размера, то уменьшите его, если оно меньше 150-200 пикселей, то лучше найдите большое изображение и уменьшите его, так как маленькие изображения ПС могут принять за элемент дизайна и не проиндексировать вовсе. Лично я меняю размер изображений в Figma.

2. Поменять формат изображения

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

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

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

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

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

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

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

Оптимизированные изображения выглядят примерно таким образом:

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

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

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

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

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

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

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

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

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

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

6. Title изображения

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

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

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

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

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

7. Окружающий текст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На что смотрят поисковые системы

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

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

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