Meta Tag Generator: создание SEO-мета-тегов

Что такое Meta Tag Generator?

Я использую этот инструмент каждый раз, когда выкатываю новую страницу и хочу увидеть, как она будет реально выглядеть в Google, Facebook и Twitter перед публикацией. Инструмент генерирует полный HTML-блок мета-тегов (базовый SEO, Open Graph, Twitter Card) и отрисовывает попиксельно точные предпросмотры каждой платформы рядом друг с другом. Заполняете вкладку Input, копируете из Output, проверяете во вкладке Preview.

Основные возможности

Инструмент генерирует три блока тегов из одного набора входных данных. Блок Базовый SEO охватывает <meta name="title">, <meta name="description">, <meta name="keywords">, <meta name="author">, <meta name="robots"> и <link rel="canonical">. Блок Open Graph охватывает og:title, og:description, og:type, og:url, og:image, og:site_name и og:locale, с типами website, article, product, video и music. Блок Twitter Card охватывает twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description и twitter:image, поддерживая карточки Summary и Summary Large Image.

Счётчики символов направляют вас к нужной длине. Title показывает текущее/60 и становится зелёным в диапазоне 30–60, жёлтым ниже 30, красным выше 60. Description использует ту же схему с целью 120–160. Три живых предпросмотра обновляются по мере ввода: предпросмотр Google SERP с реальным синим цветом ссылок (#1a0dab), зелёным URL (#006621) и серым описанием (#545454); предпросмотр Facebook, отрисовывающий карточку 1.91:1 с предоставленным OG-изображением; и предпросмотр Twitter Card, переключающийся между Summary и Summary Large Image в зависимости от настройки типа карточки.

Выпадающий список Robots предлагает четыре стандартных комбинации директив: index, follow (по умолчанию), index, nofollow, noindex, follow и noindex, nofollow. Вкладка Output разделяет Basic, Open Graph и Twitter на отдельные секции с индивидуальными кнопками копирования, плюс кнопка Copy All для объединённого блока.

Как использовать Meta Tag Generator

Шаг 1: заполните вкладку Input

Откройте Скоро: Meta Tag Generator. Инструмент открывается на вкладке Input с тремя секциями.

Секция Базовый SEO:

• Title: заголовок страницы. Счётчик символов обновляется в реальном времени. Держите его в диапазоне 30–60 символов (зелёный), чтобы избежать обрезки в результатах поиска. Пример: TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole (53 символа, зелёный).
• Description: ваше мета-описание. Цельтесь в 120–160 символов (зелёный диапазон) для полного отображения. Пример: TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75. (137 символов, зелёный).
• Keywords: ключевые слова через запятую. Современные поисковики во многом игнорируют этот тег, но включить его не вредит. Пример: hiking boots, trail running, waterproof boots, vibram outsole.
• Author: необязательное имя автора.
• Robots: выберите одну из четырёх комбинаций директив. Оставьте index, follow для публичного контента. Используйте noindex, nofollow для приватных страниц, админ-зон или дублирующего контента, который не хотите индексировать.
• Canonical URL: предпочтительный URL для этой страницы. Введите полный абсолютный URL (например, https://example.com/products/trailmaster-pro).

Шаг 2: настройте теги Open Graph

Прокрутите до секции Open Graph:

• OG Type: выберите "website" для главных и общих страниц, "article" для блог-постов, "product" для страниц электронной коммерции.
• OG Site Name: отображаемое имя вашего сайта (например, "TrailMaster Outdoor Gear").
• OG Image: полный URL изображения для социальных сетей. Facebook рекомендует 1200×630 пикселей. Если вы предоставите доступный URL, предпросмотр Facebook отрисует реальное изображение.
• OG URL: канонический URL для Open Graph, обычно тот же, что и ваш canonical URL.

Шаг 3: настройте теги Twitter Card

Прокрутите до секции Twitter Cards:

• Twitter Card Type: "Summary" показывает маленький квадратный thumbnail. "Summary Large Image" показывает большое изображение 2:1, лучший выбор для большинства контента с визуальными ресурсами.
• Twitter Site: имя пользователя Twitter/X сайта (например, @trailmaster).
• Twitter Creator: имя пользователя Twitter/X автора контента.

Шаг 4: проверьте вкладку Output

Кликните по вкладке Output. Три секции показывают сгенерированные теги:

Пример базовых тегов:

<meta name="title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta name="description" content="TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75." />
<meta name="keywords" content="hiking boots, trail running, waterproof boots, vibram outsole" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/products/trailmaster-pro" />

Пример тегов Open Graph:

<meta property="og:type" content="product" />
<meta property="og:url" content="https://example.com/products/trailmaster-pro" />
<meta property="og:title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta property="og:description" content="TrailMaster Pro boots combine a Vibram outsole..." />
<meta property="og:image" content="https://example.com/images/trailmaster-og.jpg" />
<meta property="og:site_name" content="TrailMaster Outdoor Gear" />
<meta property="og:locale" content="en_US" />

Кликните Copy All, чтобы получить полный блок тегов, готовый для вставки в ваш <head>.

Шаг 5: проверьте во вкладке Preview

Переключитесь на вкладку Preview. Три живых предпросмотра отрисовываются одновременно:

• Предпросмотр Google SERP: показывает title синим, canonical URL зелёным и description, обрезанный до двух строк, серым. Соответствует формату десктопного результата поиска. Если ваш title превышает 60 символов, он визуально обрежется здесь, что является ясным сигналом сократить его.
• Предпросмотр карточки Facebook: показывает OG-изображение (если предоставлено и загружаемо), домен сайта заглавными буквами, title жирным и description.
• Предпросмотр Twitter Card: показывает формат twitter:card (Small или Large Image), домен URL, title и description. Изображение для предпросмотра берётся из twitterImage, если задано, иначе из ogImage.

Практические примеры

Пример 1: блог-пост

Для блог-поста с заголовком "10 Best Hikes in the Scottish Highlands":

• Title: 10 Best Hikes in the Scottish Highlands - Complete Guide (53 символа, зелёный)
• Description: The 10 most rewarding hiking routes in the Scottish Highlands, from Ben Nevis to the Isle of Skye. Trail grades, maps, and kit lists included. (143 символа, зелёный)
• OG Type: article
• Robots: index, follow

Предпросмотр SERP подтверждает, что title помещается без обрезки, а description заполняет две доступные строки.

Пример 2: страница товара электронной коммерции

Для страницы товара OG type устанавливается в "product" и предоставляется URL изображения. Предпросмотр Facebook отрисовывает изображение товара в соотношении 1.91:1 с именем сайта, title товара и description. Twitter Large Image Card показывает то же изображение с обрезкой 2:1.

Пример 3: приватная staging-страница

Для страницы среды staging, не готовой к индексации, установите Robots в noindex, nofollow. Сгенерированный output включает <meta name="robots" content="noindex, nofollow" />, говоря поисковым краулерам не индексировать и не следовать по ссылкам на этой странице, даже если они её обнаружат.

Советы и лучшие практики

• Согласуйте OG URL и canonical URL: используйте один абсолютный URL для og:url и canonical-тега <link>. Несовпадения могут привести к тому, что социальный шаринг будет ссылаться на неверный URL.
• Длина title и обрезка: Google обрезает title, отрисовывающиеся шире примерно 600px в десктопных результатах. Цель 30–60 символов — надёжный прокси для этого; зелёный означает, что вы в безопасных границах.
• Размеры OG-изображения: инструмент генерирует тег og:image для любого предоставленного URL, но не валидирует размеры изображения. Используйте изображение 1200×630 пикселей для Facebook и 1200×600 для Twitter Large Image Cards.
• twitter:image имеет фолбэк на og:image: во вкладке Preview Twitter Card использует ваш twitter:image, если задан, иначе og:image. Задавайте отдельный twitter:image только если хотите разные социальные изображения для каждой платформы.
• Мета-тег Keywords: тег <meta name="keywords"> генерируется, но во многом игнорируется Google и Bing с 2009 года. Включите его для полноты, но не вкладывайте время в его оптимизацию.

Распространённые проблемы и устранение

Счётчик title красный, но description в порядке: title превышает 60 символов. Сократите его или перенесите детали в description. Счётчик title показывает текущее/60 (long) красным как ясный индикатор.

Счётчик description жёлтый: description менее 120 символов. Google может заменить её собственным сниппетом из контента вашей страницы. Добавьте 20–40 символов релевантного контента.

OG-изображение не показывается в предпросмотре Facebook: вкладка Preview загружает реальный URL изображения в теге <img>. Если URL не доступен публично из вашего браузера (например, локальный URL разработки), область изображения показывает текст-заглушку "No image". Тег при этом корректно генерируется в output.

Предпросмотр Twitter показывает только маленькую карточку, несмотря на большое изображение: Twitter Card Type установлен в "Summary" вместо "Summary Large Image". Измените выпадающий список Twitter Card Type на "Summary Large Image", чтобы увидеть предпросмотр 2:1.

Сгенерированные теги выглядят пустыми во вкладке Output: заполните как минимум title и description во вкладке Input. Output включает только непустые поля; пустое поле title не производит тег title.

Конфиденциальность и безопасность

Meta Tag Generator работает полностью в вашем браузере. Генерация тегов использует хук React useMemo для реактивного вычисления output из вашего input, без обращения к серверу. Если вы предоставите URL OG-изображения, вкладка Preview загрузит это изображение напрямую с исходного URL без прокси. Участники Supporter могут сохранять и восстанавливать именованные пресеты, используя локальное хранилище IndexedDB.

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

Какова оптимальная длина title и description в символах?

Инструмент использует 30–60 символов для title (зелёный диапазон) и 120–160 символов для description (зелёный диапазон). Они соответствуют типичным пределам пиксельной ширины рендеринга, которые Google использует для SERP-сниппетов. Title менее 30 символов (жёлтый) могут считаться скудными; более 60 (красный) могут обрезаться. Description менее 120 (жёлтый) могут привести к тому, что Google использует собственный отрывок; более 160 (красный) будут обрезаны.

Генерирует ли инструмент все свойства Open Graph?

Инструмент генерирует основные OG-теги: og:type, og:url, og:title, og:description, og:image, og:site_name и og:locale. Он не генерирует специфичные для статей теги вроде article:published_time или специфичные для товаров вроде product:price. Для них вы добавляете теги вручную после копирования сгенерированного output.

Какие значения OG locale доступны?

OG locale по умолчанию — en_US. Поле locale — текстовый ввод, куда можно ввести любой валидный код locale (например, fr_FR, de_DE, ja_JP). Инструмент не ограничивает это поле выпадающим списком.

Какие типы Twitter Card поддерживает инструмент?

Инструмент генерирует summary (маленький квадратный thumbnail, title, description и имя сайта) и summary_large_image (полноширинное изображение 2:1 с title, description и именем сайта). Он не поддерживает устаревшие типы карточек app и player.

Можно ли скопировать только теги Open Graph без базовых SEO-тегов?

Да. Вкладка Output показывает три отдельные секции (Basic, Open Graph, Twitter), каждая со своей кнопкой копирования. Кликните кнопку копирования в секции Open Graph, чтобы скопировать только эти теги. Используйте "Copy All", чтобы получить всё в комбинированном виде.

Как добавить сгенерированные теги на мой сайт?

Вставьте скопированные теги внутрь секции <head> вашего HTML. Если вы используете CMS вроде WordPress, Shopify или Webflow, вставьте их в поле кода кастомного <head> в настройках темы или используйте SEO-плагин, принимающий кастомные мета-теги. Для фреймворков вроде Next.js вставьте в компонент <Head> или используйте API metadata.

Связанные инструменты

• Скоро: Анализатор SEO страницы: проводит аудит текущих мета-тегов, структуры заголовков и сигналов on-page SEO существующей живой страницы для выявления пробелов, которые должны закрыть ваши новые мета-теги.
• Скоро: Предпросмотр SERP: выделенный инструмент предпросмотра SERP для тонкой настройки отображения title и description до и после обновления ваших мета-тегов.
• Скоро: Генератор Schema: добавьте разметку структурированных данных вместе с вашими мета-тегами, чтобы включить расширенные результаты в Google Search для статей, товаров, событий и не только.

Попробуйте Meta Tag Generator сейчас: Скоро: Glyph Widgets Meta Tag Generator