Как сгенерировать мета-теги и теги Open Graph для моей страницы?

Заполните поля «Заголовок страницы», «Мета-описание», «URL страницы» и «URL изображения для соцсетей». Теги формируются по мере ввода. Выберите «Формат вывода» (HTML, Next.js, JSX или WordPress), затем используйте «Копировать» или «Скачать» и вставьте блок в head вашей страницы.

Какой длины должны быть заголовок и мета-описание?

Инструмент рекомендует 30–60 символов для заголовка и 70–160 для описания. Предпросмотр в Google с вариантами для компьютера и телефона показывает, где текст будет обрезан. Ширина указана примерно, так как Google обрезает по пикселям.

Почему в предпросмотре ссылки нет изображения или показывается не та картинка?

Обычно URL изображения отсутствует, использует http://, недоступен публично, или платформа закэшировала старый предпросмотр. Инструмент рекомендует 1200x630 пикселей, до 5 МБ, абсолютную ссылку https:// и предупреждает, если соотношение сторон или размер не соответствуют.

Можно ли проверить мета-теги уже существующей страницы?

Да. Откройте «Импортировать из существующего HTML», вставьте head страницы или весь HTML и нажмите «Заполнить форму из HTML». Затем раздел «Аудит» покажет список проблем. Анализ выполняется в вашем браузере и не запускает скрипты и не выполняет сетевых запросов.

Отправляет ли генератор данные моей страницы на сервер?

Нет. Теги собираются в вашем браузере, а вставленный HTML читается с помощью DOMParser браузера, который не выполняет скрипты и не делает сетевых запросов. Только предпросмотр изображения загружает указанный вами URL картинки.

Это правда бесплатно?

Да. Все инструменты бесплатны, без учётной записи и банковской карты. Работа выполняется на вашем устройстве, а не на наших серверах, что и позволяет оставаться бесплатными.

Работает на мобильных устройствах?

Да. Работает в современных мобильных браузерах на iOS и Android, ничего устанавливать не нужно.

🏷️

Генератор мета-тегов и Open Graph — бесплатно

Генерируйте SEO мета-теги, Open Graph и разметку Twitter Card с предпросмотром в Google и социальных сетях. Вставляйте прямо в заголовок страницы.

Работает в браузереБез регистрации и всплывающих оконРегистрация не требуетсяБесплатно навсегда

Работает офлайн после загрузки

Заголовок страницы0 · 0/580px

URL страницы

Мета-описание0 · 0/920px

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

Лучше всего: 1200×630 px, до 5 МБ, абсолютная ссылка https://.

Название сайта

Имя пользователя Twitter/X

Имя автора в Twitter/X

Тип карточки Twitter

Тип Open Graph

Также добавить

Включить каноническую ссылку (использует URL страницы)Кодировка и мобильный viewportНапоминание указать <html lang> со значением ruog:locale (язык страницы)Ссылка на faviconЦвет темы (панель браузера на телефонах)

Индексация поисковыми системами

Заголовок 0/580px (рекомендуется 30-60)Описание 0/920px (рекомендуется 70-160)

Предпросмотр в Google

example.com

Заголовок вашей страницы появится здесь

Мета-описание появится здесь. Сделайте его убедительным, чтобы улучшить CTR из результатов поиска.

Ширина приблизительная: Google обрезает по пикселям, а не по символам.

Предпросмотр карточки в соцсетях

Предпросмотр og:image

example.com

Заголовок страницы

Описание страницы

Вставьте в <head>

Заполните хотя бы одно поле выше, чтобы создать meta теги.

Частые применения

Мета-теги для постов в блогеСоздавайте заголовок, описание и социальные теги, чтобы ваши статьи выглядели отлично при поделении.
Мета-теги для страниц продуктовСделайте так, чтобы страницы продуктов красиво шарились и хорошо читались в результатах поиска.
Мета-теги для целевых страницТочно контролируйте, как ваши целевые страницы кампании отображаются при поделении и поиске.
Создавайте мета-теги для любого веб-приложенияБыстро создавайте полный набор мета-тегов head для новой страницы или сайта.
Исправить уродливые предпросмотры ссылокПерестаньте показывать ваши ссылки как простые URL — добавьте теги, создающие богатые карточки предпросмотра.

Как это работает

Вся сборка тегов и разбор head происходит прямо в вашем браузере — сервер не задействован. Инструмент использует useMemo React для реактивного построения строк HTML и нативный API DOMParser браузера для чтения существующей разметки страницы для функции импорта/аудита.

1
Ввод формы управляет живой сборкой
По мере ввода хук useMemo немедленно пересобирает весь блок тегов — заголовок, мета-описание, свойства Open Graph и атрибуты Twitter Card — экранируя специальные символы (&, <, >, "), так что вывод безопасен для вставки прямо в HTML.
2
Проверка URL через конструктор URL браузера
Каждое поле URL (URL страницы, социальное изображение) проверяется с использованием встроенного конструктора URL браузера. Проходят только корректно сформированные адреса http:// или https:// с именами хостов, содержащими точки; недопустимые значения блокируют кнопку копирования и показывают инлайн-ошибку.
3
Импорт: DOMParser читает существующую разметку head
Если вы вставите существующий HTML <head> для аудита, инструмент пропускает его через DOMParser в инертном режиме — скрипты не выполняются, и сетевые запросы не делаются. Затем он запрашивает разобранный документ на известные мета-селекторы (og:title, twitter:description, канонические ссылки и т.д.) и предзаполняет поля формы всем, что найдёт.
4
Живые предпросмотры Google и социальных карточек
Инструмент рендерит стилизованный результат поиска Google и предпросмотр карточки Open Graph в реальном времени, используя то же состояние формы, так что вы можете увидеть точно, как заголовок и описание будут обрезаны, перед тем как скопировать вывод.

Генератор мета-тегов и Open Graph — бесплатно

Частые применения

Как это работает

Похожие инструменты

Изменитель размера изображений для социальных сетей

Редактор тегов аудио (ID3)

Генератор слагов

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