Кратко постарался описать, как выводить картинки на страницах сайта, чтобы они хорошо ранжировались в Google. А точнее сказать, чтобы гугл их нормально понимал и в следствии показывал пользователем вместе с вашей страницей, если то требует интент последнего. Как должен выглядеть код, качество изображений и с какими атрибутами.
Это будет как бы конспект, который я записывал на клочок бумаги во время просмотра видео Шакина с Деми Мурычем про правильную оптимизации картинок на страницах сайта. Сейчас разгребаю завал на столе и решил перенести эту наиполезнейшую инфу с тетрадного листа в блог.
Правила вывода изображений
- Качество изображений должно быть выше чем у конкурентов в топе. Т.е. картинка должна иметь разрешение выше. Минимум 1080 по горизонтали.
- Картинка должна быть уникальная в идеале. Собственная или купленная фотография, коллаж, векторная графика и т.п. Про уникальные изображения и анимализацию не в этом посте.
- Использовать фото-стоки, чтобы получать наиболее качественные картинки.
- Картинка должна быть в контексте текста, т.е. быть смысловым дополнением текста. Исключение — галереи.
- Альты нужно писать до 100 символов и описывать, что изображено на картинке + туда пихать ключи. Ключевые слова ставить в начало тега alt. Т.е. если картинка побьется к примеру, то этот alt будет виден и должен дополнять текст.
- Самые важные теги картинки
<img decoding="async" scr="/img.jpg" alt="Как оптимизировать изображения на сайте под Google?"/> - Необходимо так же выводить все возможные разрешения картинки для любых браузеров и разрешений экранов.
- Нужно выводить множество форматов, подходящих под разные экраны устройств. Можно с помощью разных плагинов. Основыне форматы, которые точно должны быть: 16:9, 4:3, 1:1.
- Необходима микро разметка shema — image object.
- Важно заполнять данные картинки (EXIF), наиболее важные: by line artist, creator, copirite notes (ссылка на лицензию на сайте или просто ссылка на сайт), Source (ссылка на изображение, сложно муторно). Я еще заполняю ключевое слово, туда пихаю подходящий ключ и Object name, туда пишу то, что изображено на картинке коротко.
Плагины и софт
Пробовал эти два, но сейчас использую самописное решение с ограниченным функционалом. Хотя паблик ничем не хуже, только есть лишние фичи, которые не юзаю. Используйте для оптимизации самих картинок и кода вывода.
- Perfect Images wp-retina-2x — retina, images, replace, size, thumbnail, regenerate, sizes, high-dpi
- True Image & Lazy Load от WP Booster — Премиум плагин для добавления правильного Lazy Load изображений, валидной микроразметки, правильного LightBox, прописыванию в атрибуте src ссылки на максимальное качество изображений.
Можно ставить оба плагина, но использовать разные их функции, чтобы не было конфликтов между ними.
Для заполнения EXIF данных изображений использую десктопную программу на Windows — EXIF Pilot плюс плагин к ней batchediting для массового редактирования данных. Удобно прописать ссылку на сайт сразу для пачки изображений и далее редактировать отдельные поля уже для каждого изображения.
Про GEO метки на фото
Отдельно хочу дополнить про geo метки. Если документ продвигается под город, ставлю в exif gps вкладке программы координаты из google maps, предварительно выбрав широту, долготу. На скрине ниже показал редактирование именно координат во вкладке EXIF GPS. Другая meta информация заполняется на соседних вкладках: EXIF, IPTC и Keywords. Остальные настройки не трогаю.
Есть еще онлайн инструменты для изменения координат фотографий. Имхо способ выше удобнее и быстрее, чем делать аплоад, двигать курсор по карте, скачивать.
Всё. Это самое минимальное, что надо, чтобы нормально ранжироваться в Google по картинкам. + картинки несут пользу для продвижения в основном поиске по ключам, которые подразумевают наличие картинок на документе.
PS само видео очень длинное. Мурыч любит копнуть глубже глубин в любом вопросе. Осилил в 3 захода. Вот кстати линк на это видео: https://www.youtube.com/watch?v=F6KGcb6trXc. Кто тоже смотрел его и/или есть чем дополнить этот пост, напишите в комментарии.
