Генератор мета-тегов онлайн — Open Graph и карточки X
Генератор мета-тегов для поиска и соцсетей с макетами превью ссылки
Работает в браузере · файлы никуда не загружаются
Поля заполнены примером. Замените значения данными своей страницы.
Укажите полный адрес, начинающийся с https:// (или http://).
Полный адрес изображения, которое показывается при отправке ссылки. Превью загружает изображение прямо с этого адреса.
С @ или без. Оставьте пустым, чтобы не добавлять тег.
Сгенерированные теги
Строк с тегами: 12, что проверить: 2
- Без изображения превью в KakaoTalk и Facebook будут без картинки.
- Выбрана карточка с большим изображением, но изображения нет.
<title>Счетчик символов — подсчет слов и знаков онлайн</title> <meta name="description" content="Вставьте текст, чтобы сразу посчитать символы с пробелами и без, слова и байты."> <link rel="canonical" href="https://www.example.com/ru/character-counter/"> <meta property="og:type" content="website"> <meta property="og:title" content="Счетчик символов — подсчет слов и знаков онлайн"> <meta property="og:description" content="Вставьте текст, чтобы сразу посчитать символы с пробелами и без, слова и байты."> <meta property="og:url" content="https://www.example.com/ru/character-counter/"> <meta property="og:site_name" content="Пример сайта"> <meta property="og:locale" content="ru_RU"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Счетчик символов — подсчет слов и знаков онлайн"> <meta name="twitter:description" content="Вставьте текст, чтобы сразу посчитать символы с пробелами и без, слова и байты.">
Вставьте их внутрь <head> вашего HTML.
Превью (макеты)
Счетчик символов — подсчет слов и знаков онлайн
Вставьте текст, чтобы сразу посчитать символы с пробелами и без, слова и байты.
example.com
Пример сайта
https://www.example.com/ru/character-counter/
Счетчик символов — подсчет слов и знаков онлайн
Вставьте текст, чтобы сразу посчитать символы с пробелами и без, слова и байты.
Это макеты настоящих приложений, поэтому длина и место обрезки могут отличаться. Ширину заголовка и описания в Google проверяйте инструментом предпросмотра выдачи (SERP). KakaoTalk может какое-то время хранить превью уже знакомой ссылки, поэтому после изменения тегов может показываться старое превью.
Имена тегов соответствуют протоколу Open Graph (ogp.me) и X (Twitter) Cards. KakaoTalk, Facebook, LinkedIn и Slack читают og:title, og:description, og:image и og:url; X читает twitter:card, а остальное может взять из тегов og. Кавычки, <, > и & в вашем тексте экранируются для HTML. Ничего из введенного не сохраняется и не отправляется.
Что это за инструмент
Генератор мета-тегов пишет теги для head, которые определяют, как страница выглядит в поисковой выдаче и при отправке ссылки. Мессенджеры и соцсети собирают карточки ссылок из тегов Open Graph, а X добавляет свои теги карточек. Заполните короткую форму и получите HTML, который можно сразу вставить в head страницы, — с корректным экранированием кавычек и макетами карточки ссылки KakaoTalk и результата в Google.
Как пользоваться
- Введите заголовок, описание и URL страницы. Для начала поля заполнены примером.
- Добавьте полный URL изображения для превью и его краткое описание. Если изображения нет, появится предупреждение, что карточки будут без картинки.
- Выберите название сайта, тип страницы, язык и тип карточки X. Аккаунт X указывать необязательно.
- Исправьте все, что перечислено под сгенерированными тегами, например относительные URL или пустой заголовок.
- Скопируйте теги в head вашей страницы.
- Посмотрите макеты превью, чтобы примерно представить результат.
Как это работает
- Имена тегов соответствуют протоколу Open Graph (ogp.me): og:type, og:title, og:description, og:url, og:site_name, og:locale, og:image и og:image:alt, а также теги X Card: twitter:card, twitter:site, twitter:title, twitter:description и twitter:image.
- URL страницы используется и для ссылки canonical, и для og:url.
- Кавычки, <, > и & экранируются как HTML-сущности, переводы строк и повторяющиеся пробелы сводятся к одному пробелу, а для пустых полей теги не создаются.
- Аккаунт X принимается только в виде 1–15 латинских букв, цифр или подчеркиваний.
- Превью — это макеты; настоящие приложения используют свои шрифты и правила обрезки.
Примеры
| Ввод | Сгенерированный тег |
|---|---|
| Заголовок: Счетчик символов | <title>Счетчик символов</title>, og:title, twitter:title |
| Описание с “кавычками” | content="Описание с "кавычками"" |
| Аккаунт X: toolsnack | <meta name="twitter:site" content="@toolsnack"> |
| Изображение /og.png | Предупреждение: используйте полный адрес https:// |
Частые вопросы
Какие теги используются для превью ссылок?
Telegram, ВКонтакте, Facebook, LinkedIn, Slack и KakaoTalk берут og:title, og:description, og:image и og:url. X сначала читает twitter:card, а заголовок, описание и изображение может взять из тегов og.
Почему в превью нет моего изображения?
og:image должен быть полным адресом, начинающимся с https://. Относительные пути вроде /og.png большинство краулеров игнорирует, а само изображение должно быть общедоступным.
Теги изменены, а показывается старое превью. Почему?
Мессенджеры и соцсети могут какое-то время хранить превью ссылки, которую уже видели. Со временем оно обновится, а инструменты для разработчиков на платформах позволяют попросить их перечитать страницу.
Какой длины должны быть заголовок и описание?
Google обрезает сниппеты по ширине, а не по числу символов. Воспользуйтесь инструментом предпросмотра выдачи (SERP), чтобы точно увидеть, где обрежутся заголовок и описание.
Мои данные сохраняются?
Нет. Теги и превью формируются в браузере. Если вы укажете URL изображения, браузер загрузит его напрямую, чтобы показать превью.
