Мета-теги для поиска и соцсетей с превью
Этот генератор мета-тегов пишет HTML, который определяет, как страница выглядит в результатах Google и при публикации ссылки в Facebook, LinkedIn, X, Slack, Discord или WhatsApp. Укажите заголовок, описание, канонический URL и изображение для превью — и получите основные SEO-теги, теги Open Graph и Twitter Card, корректно экранированные и готовые для вставки в <code><head></code>, с живым превью поискового сниппета и каждой карточки. Вставьте head существующей страницы, чтобы загрузить и улучшить её теги. Всё работает в вашем браузере.
Как создать мета-теги
- 1Напишите заголовок и описание. Счётчики краснеют, когда Google, скорее всего, их обрежет: около 600 пикселей (≈60 символов) для заголовка и около 160 символов для описания.
- 2Введите канонический URL страницы, название сайта и абсолютный URL изображения — лучше 1200 × 630 пикселей — с alt-текстом.
- 3Выберите тип Open Graph, локаль и вид карточки X, добавьте свои аккаунты X. Снимите флажок Разрешить индексацию для страниц, которые не должны попадать в поиск.
- 4Проверьте превью Google, Facebook, LinkedIn и X, затем переключитесь на HTML, выберите нужные группы и скопируйте теги в
<head>страницы. - 5Чтобы изменить существующую страницу, нажмите Импорт и вставьте её HTML или исходный код.
Теги, важные для SEO
- <title>
- Самый важный сигнал на странице и кликабельный заголовок в выдаче. Ставьте основную тему в начало, делайте его уникальным для каждой страницы и заканчивайте брендом. Google переписывает заголовки, которые считает бесполезными, слишком длинными или переспамленными.
- meta description
- Не фактор ранжирования, но часто используется как сниппет под заголовком, поэтому влияет на клики. Опишите страницу в 120–160 символах и дайте повод перейти.
- canonical
- <link rel="canonical"> указывает предпочтительный URL, когда один и тот же контент доступен по нескольким адресам (UTM-метки, http и https, слэш в конце).
- robots
- noindex исключает страницу из выдачи, nofollow запрещает роботам переходить по её ссылкам. Index, follow — значение по умолчанию, поэтому тег пишется, только если вы его меняете.
- viewport и charset
- Это не совсем SEO-теги, но они нужны каждой странице: UTF-8 и адаптивный viewport обязательны для mobile-first индексации.
- keywords
- Google и Bing не учитывают его в ранжировании уже больше десяти лет. Добавляйте его, только если его читает внутренний поиск или другая система.
Open Graph: как выглядят ссылки при публикации
Open Graph — протокол, созданный Facebook, который сейчас читают почти все платформы: LinkedIn, Slack, Discord, WhatsApp, Telegram, iMessage, Pinterest и многие другие. Основные теги — og:title, og:description, og:image, og:url и og:type; og:site_name и og:locale уточняют карточку.
Изображение решает всё. Используйте абсолютный URL https://, 1200 × 630 пикселей (соотношение 1.91:1), до 5 МБ, в формате JPEG, PNG или WebP, и держите текст и логотипы подальше от краёв, потому что платформы обрезают по-разному. Платформы кэшируют карточки: после изменения тегов обновите их через Sharing Debugger Facebook, Post Inspector LinkedIn или поделившись URL с параметром запроса.
Карточки Twitter / X
X читает собственный тег twitter:card для выбора макета — summary_large_image для изображения во всю ширину, summary для маленькой квадратной миниатюры — а также twitter:site и twitter:creator для аккаунтов сайта и автора. Заголовок, описание и изображение он берёт из тегов Open Graph, поэтому генератор пишет twitter:title, twitter:description и twitter:image, только когда Open Graph выключен, чтобы не дублировать разметку.
Сейчас X показывает карточки с большим изображением как картинку с наложенным заголовком и доменом под ней; описания видны только в карточках summary в некоторых клиентах.
Длина заголовка: символы или пиксели
Google обрезает заголовки по ширине, а не по числу символов: на десктопе предел — примерно 600 пикселей при шрифте, похожем на Arial 20 px, что вмещает около 50–60 символов в зависимости от букв — «WWW» втрое шире, чем «iii». Счётчик измеряет заголовок этим шрифтом в вашем браузере, поэтому отражает ваши реальные слова. Описания обрезаются примерно на 920 пикселях — около 155–160 символов на десктопе и меньше на мобильных.
Обрезка — не штраф, она лишь скрывает конец текста, но если важные слова стоят в начале, их точно увидят. Следите, чтобы заголовок и описание соответствовали видимому содержимому — тогда Google охотнее оставит их без изменений.
Куда вставлять теги
Все эти теги размещаются внутри элемента <head> страницы и должны присутствовать в HTML, который отдаёт сервер: роботы превью ссылок не выполняют JavaScript, поэтому теги, добавленные клиентским кодом, не видны Facebook, LinkedIn и X. В фреймворках вроде Next.js, Nuxt или Astro используйте их API метаданных для рендеринга на сервере. Все значения атрибутов экранируются, поэтому кавычки и амперсанды в заголовках не сломают разметку.
Дополните это файлом robots.txt, который открывает страницы роботам, XML-картой сайта с каноническими URL и favicon, чтобы в выдаче отображалась ваша иконка.
Часто задаваемые вопросы
- Какая идеальная длина meta title и description?
- Около 50–60 символов (до ~600 пикселей) для заголовка и 120–160 символов для описания. Счётчики показывают оба значения и краснеют, когда Google, скорее всего, обрежет текст.
- Какого размера должно быть изображение Open Graph?
- 1200 × 630 пикселей (1.91:1) подходит для Facebook, LinkedIn, X и мессенджеров. Используйте абсолютный https URL, размер до 5 МБ, и держите главное в центре.
- Почему в превью ссылки старое изображение или заголовок?
- Платформы кэшируют превью ссылок. Используйте Sharing Debugger Facebook или Post Inspector LinkedIn, чтобы заново считать URL; X обновляет кэш примерно через неделю или сразу для URL с новым параметром запроса.
- Нужны ли одновременно теги Open Graph и Twitter?
- Open Graph нужен для большинства платформ, а для X — как минимум twitter:card. X использует og:title, og:description и og:image как запасной вариант, поэтому остальные теги Twitter необязательны при наличии Open Graph.
- Помогает ли тег meta keywords в SEO?
- Нет. Google и Bing много лет не учитывают его в ранжировании. Здесь он необязателен и полезен, только если его читает какая-то внутренняя система.
- Можно ли изменить мета-теги существующей страницы?
- Да. Нажмите «Импорт», вставьте HTML страницы (подойдёт и исходный код), и значения title, description, canonical, Open Graph, Twitter и robots загрузятся в форму.
- Почему изображение не отображается в превью?
- URL должен быть абсолютным (https://…) и общедоступным. Некоторые серверы запрещают показ изображений на других сайтах; настоящие платформы загружают их на стороне сервера, так что там они могут работать.
- Что-нибудь загружается на сервер?
- Нет. Теги создаются в вашем браузере. С указанного URL загружается только изображение для превью, чтобы показать его в превью.