Softonic

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

Шаг 1 / 3
Базовый SEO
0/60
0/160
Robots
Далее

Заполните форму, заголовок страницы, описание, canonical URL, изображение для соцсетей, автор, название сайта, хэндл Twitter, и генератор выдаст готовый к вставке блок мета-тегов, покрывающий основы SEO, Open Graph (для Facebook, LinkedIn, Discord, Slack), Twitter Card, favicon/иконку Apple touch и опциональный Schema.org JSON-LD для Article или Product. Удобно, когда вы вручную собираете статический сайт или добавляете метаданные в CMS, открывающую только сырой редактор <head>.

Как собрать сниппет head

  1. 1

    Введите метаданные страницы

    Заголовок, описание, canonical URL, автор, название сайта.

  2. 2

    Добавьте URL изображения для соцсетей

    Используется и для `og:image`, и для `twitter:image`. Идеально 1200×630.

  3. 3

    Выберите опции

    Тип карточки Twitter, директивы robots, цвет темы, тип Schema.org.

  4. 4

    Скопируйте вывод

    Блок HTML-тегов `<meta>`, готовый к вставке между `<head>...</head>`.

Что производит генератор

<!-- Primary Meta -->
<title>Page title, Site name</title>
<meta name="description" content="A 150-character summary of the page content.">
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Page title">
<meta property="og:description" content="Same description or a social-optimized one">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Site name">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@siteaccount">
<meta name="twitter:creator" content="@authoraccount">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

<!-- Icons -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#0b5ed7">

Руководство по полям

  • Заголовок: 50-60 символов. Включите основное ключевое слово. Поставьте бренд в конце: Page title, Brand.
  • Описание: 140-160 символов. Хорошо читается отдельно. Избегайте шаблонного текста, повторяющегося на разных страницах.
  • Canonical: абсолютный URL, включая https://. Совпадает с og:url.
  • Изображение OG: минимум 1200×630 px (предпочитаемое Facebook соотношение 1.91:1). JPG или PNG. До 8 MB.
  • Карточка Twitter: summary_large_image, если у вас хорошее изображение; summary для маленькой миниатюры.
  • robots: index, follow для публичных страниц; noindex, nofollow для промежуточного (staging) или скудного контента.

Опциональные дополнения

  • JSON-LD для Article или Product позволяет Google показывать богатые результаты (автор, дата публикации, цена, звезды отзывов).
  • theme-color окрашивает хром браузера в Android Chrome и iOS Safari.
  • og:locale для многоязычных сайтов (например, en_US, es_ES).
  • Дополнения og:type=article: article:published_time, article:author, article:section, article:tag.

Частые ошибки, которые предотвращает этот генератор

  • Забывание тега viewport. Ваша страница отображается в десктопной ширине на мобильном, уровень зума 0.3.
  • Разные заголовки в <title>, og:title и twitter:title. Несогласованные карточки репостов.
  • Относительные URL изображений в og:image. Facebook не может их разрешить; карточка не отрисовывается.
  • Отсутствие og:type. Дефолты работают, но Facebook счастливее с явным значением.

Часто задаваемые вопросы

Технически Twitter откатывается на Open Graph, если его собственные теги отсутствуют, поэтому если вы зададите только OG, Twitter все равно отрисует карточку. Добавление тегов, специфичных для Twitter, позволяет настроить опыт (например, другое соотношение сторон изображения).

1200×630 px (1.91:1). Facebook и LinkedIn показывают это в полном размере; Twitter обрезает для summary-карточки. Не помещайте критичный контент по краям, центральные 60%, это безопасная зона.

Нет. Страницы ранжируются нормально без него. JSON-LD включает функции богатых результатов (карточки рецептов, аккордеоны FAQ, листинги товаров), когда тип контента соответствует схеме Schema.org. Добавляйте его там, где подходит.

Между <head> и </head> в вашем HTML, перед любыми внешними таблицами стилей или скриптами, которые могут задержать достижение их парсером.

Нет. Все генерируется локально в вашем браузере.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Конвертер CMYK в RGB

Преобразуйте проценты CMYK в приблизительные значения RGB и Hex для быстрого экранного предпросмотра по стандартной формуле.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Инструмент доступен на других языках