Генератор мета-тегов

Что делает инструмент

Генератор мета-тегов пишет теги для <head> HTML-страницы: <title>, meta description, ключевые слова и автора, директиву robots, каноническую ссылку, цвет темы, объявления viewport и charset, полный набор тегов Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale) и теги карточек X / Twitter.

По мере ввода он показывает, как страница может выглядеть в результатах поиска и в карточке соцсети, и проверяет частые ошибки: заголовок длиннее примерно 60 символов, отсутствующее, слишком короткое или длиннее примерно 160 символов описание, относительный канонический URL, изображение без абсолютного URL, неверно записанные локаль или цвет. Всё происходит в браузере, а предпросмотр намеренно не загружает ваше изображение, поэтому страница не отправляет сетевых запросов.

Как пользоваться

1. Заполните данные страницы. Главное — заголовок и описание; счётчики показывают их длину относительно обычных пределов отображения. Нажмите Пример, чтобы увидеть полный вариант.
2. Укажите канонический URL страницы и изображение для превью. Относительный путь вроде /images/cover.jpg разрешается относительно канонического URL.
3. В настройках выберите тип Open Graph (website для большинства страниц, article для записей блога), размер карточки, можно ли поисковикам индексировать страницу и переходить по ссылкам, и какие группы тегов включить.
4. Прочитайте предупреждения под HTML, проверьте предпросмотр и скопируйте HTML в шаблон страницы.

Настройки хранятся в адресе страницы, а форма — в браузере, так что к ней можно вернуться или поделиться ссылкой с теми же настройками.

Пример

Пример страницы даёт такие теги (с сокращениями):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough Bread for Beginners — Step-by-Step Guide</title>
<meta name="description" content="Bake your first sourdough loaf at home: …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/recipes/sourdough-for-beginners">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough Bread for Beginners — Step-by-Step Guide">
<meta property="og:image" content="https://example.com/images/sourdough-loaf.jpg">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">

Значения экранируются для HTML, поэтому кавычки и амперсанды в заголовке не ломают разметку, а локаль en-US приводится к виду en_US, которого ожидает Open Graph.

Советы

• Пишите уникальные заголовок и описание для каждой страницы: дубли затрудняют различение результатов.
• Ставьте самые важные слова в начало заголовка — длинные заголовки обрезаются с конца.
• Канонический URL должен быть точным адресом для индексации — с протоколом и предпочтительным вариантом с www или без.
• robots со значением noindex убирает страницу из поиска, но только если роботы по-прежнему могут её загрузить: не блокируйте её одновременно в robots.txt.