Чтобы соцсети понимали, как показывать вашу ссылку, на странице должны быть специальные метатеги Open Graph (OG). Это код в разделе <head> вашего сайта, который подсказывает платформам, какой заголовок, описание и картинку использовать для превью .
Вот основные теги, которые нужно настроить:
og:title — заголовок превью (около 60 символов, чтобы не обрезался).og:description — краткое описание (120–155 символов), которое дополняет заголовок.og:image — ссылка на изображение для превью. Это самый важный элемент.og:url — канонический адрес страницы.og:type — тип контента (например, article для статьи) .Для X (Twitter) есть отдельный набор тегов twitter:card, но платформа также понимает и стандартные OG-теги. Для больших картинок используйте twitter:card="summary_large_image" .
Важно: Если эти теги не заданы, соцсеть будет сама «угадывать», что показать. Часто это выглядит не лучшим образом: случайная картинка со страницы или странно обрезанный текст .
Картинка — главный элемент превью, который привлекает внимание. Чтобы она не обрезалась и выглядела качественно, придерживайтесь рекомендаций по размерам. Универсальный совет — используйте изображение с соотношением сторон 1.91:1 и размером не менее 1200 x 630 пикселей. Такой вариант подойдет для большинства платформ .
Но у каждой площадки есть свои нюансы:
summary_large_image) используйте соотношение 2:1 и размер от 300x157 до 4096x4096 пикселей . Для обычных твитов изображение будет отображаться в размере 600x335 пикселей в ленте .Главный совет по картинкам: не размещайте важный текст и ключевые элементы по краям. Соцсети могут обрезать изображение под свои пропорции. Располагайте всю смысловую нагрузку в центре .
Технические настройки — это лишь половина дела. Вторая, не менее важная, — это содержание заголовка, описания и самой картинки.
og:title): Должен быть цепляющим, четким и передавать суть. Используйте цифры, вопросы, обращение к боли или выгоде аудитории. Вспомните, что в ленте пользователь видит обычно 140–180 символов текста поста, и решение о клике часто принимается именно по первым строкам .og:description): Это ваш мини-питч. Дополните заголовок, объясните, почему стоит кликнуть. Держитесь в пределах 120–155 символов, чтобы описание не обрезалось. Думайте о нем как о бесплатной рекламе вашего контента .Вы обновили OG-теги, а соцсеть все равно показывает старую картинку? Это потому, что платформа сохранила кэш вашей ссылки при первом шеринге . Нужно принудительно его обновить.
?v=1 (или любую цифру) и отправьте ссылку заново. Это заставит соцсеть воспринять ссылку как новую и перезапросить данные . Например: ваш-сайт.ru/page?v=1.og:title, og:description, og:image.?v=1.Правильно настроенное превью — это первый и часто решающий шаг к тому, чтобы ваш контент заметили. Уделите этому немного времени, и результат не заставит себя ждать.
Статистика: Добавлено Михаил Молчанов — Сегодня, 01:50