Как пользоваться: Генератор мета-тегов
- Введите заголовок страницы, мета-описание и канонический URL. Счётчики предупредят вас до того, как Google обрежет текст.
- Укажите изображение Open Graph, название сайта и локаль, выберите тип карточки X — предпросмотр Google, Facebook и X обновляется по мере ввода.
- При необходимости задайте директивы robots, цвет темы и пути к иконкам.
- Скопируйте вывод Full <head> для сайта, написанного вручную, или переключитесь на Пользовательский код Webflow, чтобы получить только те теги, которые Webflow не генерирует из своих настроек.
Что такое мета-теги?
Мета-теги — это HTML-элементы в <head> страницы, которые описывают её браузерам, поисковикам и социальным сетям. На самой странице они не видны, но определяют, как она выглядит в результатах Google, как раскрывается ссылка в Slack, LinkedIn или WhatsApp, можно ли её индексировать и как она масштабируется на телефоне.
Теги, которые действительно важны
| Тег | Кто использует | Назначение |
|---|---|---|
<title> | Google, вкладки браузера | Кликабельный заголовок в результатах поиска — подтверждённый сигнал релевантности. |
meta description | Google, Bing | Часто показывается под заголовком в сниппете; влияет на кликабельность, но не на позиции. |
link rel="canonical" | Google, Bing | Указывает предпочтительный URL, если один и тот же контент доступен по нескольким адресам (параметры, слеши в конце, http/https). |
meta robots | Все основные краулеры | noindex убирает страницу из результатов; max-image-preview:large разрешает крупные миниатюры изображений в Discover. |
og:* | Facebook, LinkedIn, Slack, Discord, iMessage… | Протокол Open Graph — заголовок, описание, изображение и тип отправленной ссылки. |
twitter:* | X | Тип карточки (summary или summary_large_image) и привязка к аккаунту; при отсутствии используются теги og:. |
viewport, charset | Браузеры | Корректное масштабирование на мобильных устройствах и кодировка текста. |
Устаревший тег meta keywords намеренно не генерируется: Google игнорирует его уже более десяти лет, а он лишь раскрывает конкурентам вашу стратегию ключевых слов.
Типичные ошибки, которых позволяет избежать генератор
- Относительные URL в og:image. Парсерам соцсетей нужен абсолютный URL
https://. Добавьтеog:image:widthиog:image:height, чтобы изображение отображалось уже при первом шаринге, а не после повторного сканирования. - Noindex и canonical одновременно. Canonical на другой URL при
noindexдаёт противоречивые сигналы; выберите что-то одно. - Неэкранированные кавычки. Символ
"внутри описания ломает атрибут. Все значения в выводе экранируются HTML. - Дубли тегов. Платформы вроде Webflow, SEO-плагины WordPress и Shopify уже выводят многие теги. Если добавить второй
<title>илиog:imageвручную, краулеры будут гадать, какой из них важнее.
Webflow: поля настроек или пользовательский код
Webflow сам выводит title, description, Open Graph title/description/image, canonical, charset и viewport из настроек Page и Site, поэтому вставка полного head в пользовательский код их продублирует. Выберите Пользовательский код Webflow выше, и результат будет содержать только то, что Webflow не может задать нативно: директивы robots, theme-color, og:site_name, og:locale, аккаунты X и дополнительные ссылки на иконки. На страницах шаблонов CMS в то же поле пользовательского кода можно вставлять поля CMS. После публикации проверьте итоговый вывод с помощью Meta Tag Checker и Open Graph Checker или создайте изображение для шаринга в OG Image Generator.
Также ищут как: генератор open graph, генератор twitter card, html мета-теги, seo мета-теги, теги head, мета-теги webflow.
Инструменты, которые хорошо сочетаются с Генератор мета-тегов
- Превью SERP — Напишите тег title и meta description и посмотрите, где Google, скорее всего, обрежет текст.
- Генератор фавикона — Создайте полный набор фавикона из логотипа, буквы или эмодзи: favicon.ico с несколькими размерами, Apple touch icon, иконки Android/PWA, webclip для Webflow, веб-манифест и HTML-теги для вставки.
- Генератор Schema-разметки — Выберите тип схемы, заполните форму и скопируйте готовый JSON-LD.
- Расшифровка robots.txt — Правила в robots.txt короткие, но их легко понять неправильно.
Часто задаваемые вопросы
Важны ли мета-теги для SEO?
Какой должен быть размер изображения Open Graph?
Нужны ли и теги Open Graph, и теги Twitter?
og:title, og:description и og:image как запасные варианты, поэтому поверх Open Graph нужен только twitter:card (и при желании twitter:site).