Как пользоваться
- Заполните заголовок и описание, адрес страницы и изображение для превью.
- Проверьте справа результат поиска и превью ссылки и исправьте то, на что указывают предупреждения.
- Скопируйте теги в
<head>своей страницы или скачайте их.
Тегами становятся только заполненные поля, а каждое значение экранируется, так что кавычки и & в тексте не сломают HTML.
Теги, которые важны
<title>— заголовок вашего результата в поиске и вкладки браузера. В результатах видно около 60 символов.<meta name="description">— фрагмент под ним, если поисковик сочтёт, что он соответствует странице. Ориентируйтесь на 70–160 символов.<link rel="canonical">называет единственный адрес страницы, чтобы копии по другим адресам с ней не конкурировали.- Теги Open Graph (
og:) читают Slack, LinkedIn, Facebook, iMessage и большинство мессенджеров для превью ссылок. twitter:cardпросит X показать большую карточку с изображением. В остальном X берёт данные из тегов Open Graph.
Изображение для превью
Используйте 1200 × 630 пикселей (1,91:1), PNG или JPEG, до 5 МБ, по полному адресу https://. Относительные пути вроде /og.png не работают: сервисы, которые строят превью, загружают изображение сами. Держите важный текст подальше от краёв — некоторые приложения обрезают картинку до квадрата.
Частые вопросы
Имеют ли значение meta keywords?
Нет. Google уже много лет игнорирует <meta name="keywords">, поэтому генератор его не пишет.
Почему превью ссылки не меняется после обновления тегов?
Сервисы кешируют превью, иногда на несколько дней. У большинства есть инструмент, чтобы заново получить страницу, например Post Inspector в LinkedIn и Sharing Debugger в Facebook.
Куда вставлять теги?
Внутрь <head>, перед закрывающим </head>. Если на странице уже есть <title> или описание, замените их, а не добавляйте второй.
Можно ли увидеть здесь в превью настоящее изображение?
Превью показывает имя файла изображения вместо самой картинки, потому что эта страница загружает изображения только с lobsite.com. Опубликуйте страницу и проверьте её в мессенджере, чтобы увидеть, как всё выглядит на самом деле.