SEO-оптимизация логотипа в шапке сайта. Подробная инструкция.
Здесь собраны основные рекомендации для поисковой оптимизации логотипа в шапке сайта.
Материал создавался в рамках встреч Open SEO 25.08.2023
Дата последнего обновления: Август 2023
Функциональные требования
Набор требований описывающий, какими функциями, возможностями должен обладать объект (страница), и каков должен быть результат выполнения этих функций.
— гарантирует качество изображения вне зависимости от устройства — гибкость настроек (размер, цвета, маски) — файл занимает меньше места — некоторые изображения невозможно качественно воссоздать в SVG – это надо учитывать
более гибкий формат
Рекомендации:
Стоит сделать отдельную версию логотипа для мобильной вёрстки
Подробнее:
— для мобильной вёрстки логотип можно уменьшить
заменить иконкой
убрать текст
изменить компоновку элементов
чтобы в мобильной вёрстке логотип не загромождал шапку и смотрелся лаконично
Рекомендации:
Логотипы МОЖНО делать побольше 🙂
Подробнее:
чтобы сделать бренд узнаваемым
Технические требования
Набор требований предъявляемых к объекту, для обеспечения корректной реализации той или иной функции.
— не использовать png, если не нужна прозрачность — оптимизировать изображение (например https://squoosh.app/) — не делать файл больше чем отображаемая область
Рекомендации:
Не использовать base64
Подробнее:
— формат не оптимизирован под хранение информации (размер больше) — отсутствует гибкость
Рекомендации:
Нужно прописывать параметр alt к логотипу
Подробнее:
— Например: “Логотип А25” — Антипример: “Лого1”
рекомендация поисковиков и возможность сообщить пользователю, что на изображении, если изображение не загрузилось
Рекомендации:
Логотип при клике должен вести на главную страницу
Ожидаемое пользователями поведение
Рекомендации:
Подменять логотип в зависимости от размера экрана
— использовать тег <picture> или <img srcset=”...”>