Упрощенная инструкция по оптимизации изображений для блог-постов с т.з. SEO

Этот текст является только лишь небольшим дополнением к подкасту, где я общаюсь с Jason Barnard о SEO для изображений.

Загрузка и верстка изображений

Предпосылкой всех обобщений и рекомендаций по верстке служит документация, касающаяся элемента img: HTML Standard.
==
Обязательно убедитесь, что у тега img есть оба атрибута: alt и src.

Коротко, атрибут src должен указывать на ваше изображение в лучшем качестве и максимальном размере. Атрибут alt должен описывать действительное изображение, очень желательно включать в себя ключевое слово и соответствовать тексту, в котором он размещен. Очень желательно, чтобы он как бы продолжал или иным образом дополнял текст. Как будто это не изображение, а тоже текст.
==
Предпочтительна отзывчивая верстка изображений: вот документация.
==
Marko Fedorenko предложил отличный способ проверки корректного рендера HTML, отдаваемого боту Google, где вы в том числе сможете убедиться в наличии нужных вам изображений в коде: Rich Results Testing Tool. После чего можно проверить код в валидаторе, который всегда советует Мурыч: https://validator.w3.org/#validate_by_input.
==
Убедитесь, что вы используете корректный формат. Постарайтесь не использовать векторные изображения, если они играют важную роль. Используйте векторные изображения в качестве сервисных или украшения. Если возможно для браузеров, поддерживающих формат webp, отдавать в нем изображения, то сделайте это.
==
Мурыч советует использовать decode async.
==
Убедитесь, что изображения корректно сжаты. Обратите внимание на показатели web vitals.
==
Частые ошибки, которых лучше избегать:

• использование сервисных изображений с тегом img
• пустой или вводящий в заблуждение alt
• изображение отделено от текста, к которому относится
• неправильный формат изображения
• Google не видит изображения
• не та версия изображения в src: заглушка или уменьшенная копия

Мета теги

Добавляйте мета теги ко всем изображениям, которые считаете важными. Для этого вполне подойдет Python.

Или же сделайте себе шаблон xmp в Photoshop, просто не забудьте менять данные для каждого изображения. Еще есть ExifTool.

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

exiftool -iptc:by-line=”Olesia Korobka” -creator="Olesia Korobka" -artist="Olesia Korobka" -copyright="Fajela.com" -copyrightNotice=”Fajela.com” -source=”https://fajela.com/” -credit=”https://fajela.com/” -UserComment=”Find more useful SEO content on fajela.com” -licensorID=”fajela.com” -licensorName=”Fajela - Semantic Markup” -licensorURL=”https://fajela.com/” D:\fajela\

Замените данные на свои.

Если вы будете обрабатывать изображения по одному, то добавьте еще хотя бы headline. Только не путайте с title! Он отлично работает. Рекомендую также покопаться в документации по IPTC . Здесь вы найдете многие интересные, очень специфические данные, которые помогут вам решать более узкие задачи, включая работу с определенными сущностями, новостями, категориями новостей, персонами и т. д.

Легкая проверка мета тегов любых изображений онлайн: https://getiptcpmd.nitsvc.net/getpmd/html/stds/ipmd/

Сущности

Для проверки того, как Google различает сущности в ваших изображениях, воспользуйтесь Vision API. Чтобы вам не пришлось долго вникать и мучиться с настройками, можете воспользоваться вот таким простым кодом в Google Cloud SDK:

gcloud ml vision detect-web https://fajela.com/wp-content/uploads/2021/04/jason-barnard-sitting.jpg

Для работы с сущностями из таба Google по изображениям я использую расширение SEO Ruler. Это вообще прекрасный инструмент и сущности изображений далеко не единственное, на что он способен. Я о нем еще отдельно напишу.

Обратный просмотр по коду сущностей в графе знаний Google, если не хотите через их API, можно выполнять в Kalicube: https://tools.kalicube.pro/knowledge-graph-explorer-reverse

На сайте Kalicube много удобных и полезных инструментов. А еще курсы и мануалы. Тут запись на Kalicube Beta — инструмента, который поможет вам получить панель знаний.