Валидатор CSS

<meta property="og:title" content="">
<meta property="og:site_name" content="">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property="og:type" content="">

О программе Валидатор CSS

Генератор Open Graph тегов — онлайн-инструмент для создания HTML-разметки, которая управляет отображением страницы при публикации ссылки в социальных сетях и мессенджерах. Генератор от ToolsPivot поддерживает более 27 типов контента (от статей и товаров до ресторанных меню и музыкальных плейлистов), позволяет указать до 10 изображений и выдаёт готовый код без регистрации.

Возможности Генератора Open Graph от ToolsPivot

Инструмент принимает данные о странице и превращает их в корректно оформленные мета-теги, которые считывают Facebook, ВКонтакте, LinkedIn, Telegram, WhatsApp и другие платформы.

• Тег og:title: задаёт кликабельный заголовок в превью ссылки. Facebook обрезает заголовки длиннее 88 символов, но для стабильного отображения на всех платформах лучше укладываться в 60 символов.

• Тег og:site_name: указывает название сайта или бренда. В Telegram это название подтягивается над заголовком, а в Facebook — отображается рядом с URL.

• Тег og:url: фиксирует каноническую ссылку на страницу. Если пользователь поделится URL с параметрами или редиректом, платформа всё равно подтянет данные правильной страницы.

• Тег og:description: формирует текст описания под заголовком. По сути, это аналог мета-описания для поисковиков, только для соцсетей.

• Тег og:type: сообщает платформам тип контента. Генератор поддерживает более 27 вариантов: article, product, website, business, video.movie, music.song, restaurant.menu, book.author, fitness.course, election и другие.

• До 10 слотов для изображений: каждому изображению присваивается отдельный мета-тег og:image. Полезно для товарных карточек, портфолио и галерей — платформа выберет подходящее фото или покажет несколько.

• Готовый HTML-код: результат можно скопировать одной кнопкой и вставить в секцию без правок. Код использует атрибуты property и content — стандартный формат протокола Open Graph.

Как пользоваться Генератором Open Graph от ToolsPivot

1. Введите заголовок страницы. Укажите текст, который будет отображаться как кликабельный заголовок в соцсетях. Старайтесь уложиться в 60 символов.

2. Добавьте название сайта. Впишите бренд или домен. Telegram и ВКонтакте отображают это поле над заголовком превью.

3. Вставьте URL страницы. Используйте полный адрес с https:// — относительные ссылки не распознаются протоколом Open Graph.

4. Напишите описание. Кратко опишите содержание страницы в пределах 155–160 символов. Текст появится под заголовком в карточке ссылки.

5. Выберите тип контента. В выпадающем списке доступны article, product, website, video, music, restaurant и десятки других вариантов.

6. Укажите количество изображений. Выберите от 1 до 10 слотов для og:image — по одному мета-тегу на каждое изображение.

7. Скопируйте код. Нажмите кнопку «Copy» и вставьте полученные теги в секцию HTML-страницы перед закрывающим тегом .

Перед генерацией новых тегов проверьте, нет ли на странице старой OG-разметки. Дублирование тегов приводит к непредсказуемому отображению. Используйте проверку Open Graph, чтобы увидеть текущие теги.

Зачем использовать Генератор Open Graph от ToolsPivot

• Работает без регистрации и ограничений. Создавайте столько наборов тегов, сколько нужно. Многие конкурирующие сервисы (например, HEADMasterSEO, RankWatch) требуют аккаунт для доступа к генератору. Здесь — нет.

• 27+ типов контента. Большинство генераторов предлагают 5–8 типов (website, article, product, video). Инструмент покрывает нишевые сценарии: restaurant.menu, music.playlist, book.author, fitness.course, election. Правильный og:type помогает платформам показать контент в подходящем формате.

• Поддержка нескольких изображений. Можно задать до 10 og:image одновременно. Актуально для интернет-магазинов на Ozon и Wildberries, где ссылки на товары активно расшариваются в Telegram-чатах и группах ВКонтакте.

• Чистый код без лишнего. Результат — стандартные мета-теги без inline-стилей, JavaScript или дополнительной обёртки. Код работает на любой CMS: WordPress, 1С-Битрикс, Tilda, OpenCart, Joomla.

• Совместимость с основными платформами. Теги читают Facebook, LinkedIn, Pinterest, WhatsApp, Slack, Discord, Telegram, ВКонтакте и Одноклассники. Один набор тегов — превью на всех платформах.

• Дополняет SEO-разметку. OG-теги отвечают за соцсети, а стандартные мета-теги — за поисковую выдачу. Используйте генератор мета-тегов вместе с этим инструментом, чтобы полностью заполнить секцию .

• Данные не сохраняются. Заголовки, описания и URL обрабатываются на стороне клиента. Это существенно для тех, кто работает с конфиденциальными проектами или соблюдает требования 152-ФЗ.

Как выбрать правильный og:type для страницы

По умолчанию многие ставят тип «website» на все страницы подряд. Работает — но не всегда даёт лучший результат.

Для статей блога или новостей используйте «article». Facebook подтягивает дату публикации и имя автора, если эти данные прописаны в разметке. Для товарных страниц — «product»: так платформы понимают, что ссылка ведёт на страницу с товаром, а не на информационную статью.

Если вы делитесь видеоконтентом, тип «video.movie» или «video.other» позволит платформам распознать медиаматериал. Яндекс.Видео тоже использует OG-теги для индексации роликов — указание og:video и корректного типа контента помогает видео попасть в поиск по Яндексу.

Этот генератор включает редкие типы, которых нет у большинства конкурентов. Ресторанный бизнес может использовать «restaurant.menu» и «restaurant.menu.item» для отдельных блюд. Музыкальные проекты — «music.song», «music.album», «music.playlist». Есть даже «election» для предвыборных кампаний и «fitness.course» для онлайн-курсов.

Не уверены в выборе? Проверьте, как страница отображается с типом «website» через отладчик Facebook. Если превью выглядит нормально — менять необязательно. Но для структурированных данных и специфического контента конкретный тип даёт преимущество.

Размеры изображений для OG-тегов

Тег og:image влияет на кликабельность сильнее остальных OG-свойств. Страница без изображения или с картинкой неправильного размера получает до 50 % меньше переходов по сравнению с корректно оформленным превью.

Универсальный размер — 1200 × 630 пикселей. Он корректно отображается в Facebook, ВКонтакте, LinkedIn, Telegram и WhatsApp без обрезки. Формат файла — JPEG для фото, PNG для графики с текстом. Вес — до 5 МБ.

Если изображение слишком тяжёлое, пропустите его через сжатие изображений перед загрузкой. Нужен точный кроп под OG-размер? Изменение размера изображения поможет.

Важный момент, который многие пропускают: добавьте теги og:image:width и og:image:height рядом с og:image. Без явных размеров Facebook сначала загружает изображение, измеряет его и только потом формирует карточку. Первый человек, который поделится ссылкой, может увидеть пустое превью.

Проверка и отладка OG-тегов

Сгенерировать теги — половина задачи. Вторая половина — убедиться, что платформы их корректно считывают.

Facebook. Откройте Sharing Debugger (developers.facebook.com/tools/debug), вставьте URL и нажмите «Отладка». Если превью показывает старые данные, нажмите «Повторный парсинг» — Facebook обновит кэш.

ВКонтакте. Используйте метод API pages.clearCache (vk.com/dev/pages.clearCache). Также можно вставить ссылку в поле нового поста — ВКонтакте подтянет свежие данные.

LinkedIn. Post Inspector (linkedin.com/post-inspector) показывает карточку ссылки. LinkedIn кэширует агрессивно — иногда нужно два запроса подряд.

Telegram. Бот @webpagebot позволяет обновить кэш превью. Без принудительного сброса Telegram может показывать старое превью до суток.

Типичные ошибки:

• Не подтягивается изображение. Скорее всего, в og:image указан относительный путь (/images/cover.jpg) вместо полного URL (https://yoursite.com/images/cover.jpg). Протокол OG требует абсолютных ссылок.

• Превью не появляется. Теги размещены в , а не в . Мета-теги вне не валидны и игнорируются.

• Маленькая картинка вместо большой карточки. Изображение менее 200 × 200 px. Facebook и ВКонтакте покажут миниатюру вместо полноразмерного превью.

После установки тегов проверьте общее состояние разметки через анализатор мета-тегов. Это быстрый способ убедиться, что ничего не потерялось при деплое.

Кому и когда нужен генератор OG-тегов

Контент-маркетологи и SMM-специалисты. Каждая статья, которую вы публикуете, рано или поздно попадёт в соцсети — вы сами её расшарите или это сделают читатели. Без OG-тегов Facebook и ВКонтакте подтянут случайную картинку с сайта, часть рекламного баннера или логотип из шапки. Генерируйте теги перед каждой публикацией.

Владельцы интернет-магазинов. Товарные страницы, которыми делятся в Telegram-чатах и группах ВКонтакте, должны показывать фото товара, название и ключевое преимущество. Тип «product» в сочетании с проработанными длиннохвостовыми ключевыми словами в описании даёт максимальную видимость и в поиске, и в соцсетях. Особенно актуально для ИП и небольших ООО, которые продвигаются через социальные каналы.

Веб-разработчики и фрилансеры. Клиенты редко думают об OG-тегах до момента, когда делятся новым сайтом в LinkedIn и видят сломанное превью. Добавьте генерацию OG-тегов в свой чек-лист перед сдачей проекта. Заодно запустите SEO-проверку сайта и тест скорости страницы — три минуты работы, которые избавят от неудобных писем через неделю.

Маркетологи в агентствах. Когда вы ведёте 5–10 клиентских аккаунтов, каждую неделю публикуете десятки ссылок. Несоответствие картинки и заголовка в превью выглядит непрофессионально. Создавайте теги для каждого URL кампании и отслеживайте результаты через проверку социальной статистики.

Популярные вопросы об Open Graph тегах

Что такое Open Graph теги?

Open Graph теги — это мета-элементы в секции HTML-страницы, которые задают заголовок, описание, изображение и тип контента для социальных сетей. Протокол разработал Facebook в 2010 году. Сегодня его поддерживают ВКонтакте, LinkedIn, Telegram, WhatsApp, Slack, Pinterest и Одноклассники. Четыре обязательных тега: og:title, og:type, og:image и og:url.

Генератор Open Graph от ToolsPivot бесплатный?

Да, полностью бесплатный и без ограничений. Регистрация не нужна — генерируйте теги для любого количества страниц в любое время.

OG-теги влияют на позиции в поиске Google и Яндекс?

Прямого влияния на ранжирование нет — Google и Яндекс игнорируют OG-теги при индексации и используют стандартные мета-теги. Но правильно оформленные превью увеличивают кликабельность ссылок в соцсетях, что приносит дополнительный трафик и поведенческие сигналы. Эти факторы косвенно помогают позициям сайта.

Что будет, если не добавить OG-теги на страницу?

Соцсети попробуют угадать содержимое. Facebook и ВКонтакте просканируют страницу и подтянут первый найденный текст и изображение. Результат — обрезанный заголовок, рекламный баннер вместо обложки или описание из сайдбара. По данным исследований, страницы без OG-тегов теряют до 50 % вовлечённости при расшаривании.

Можно ли использовать одинаковые OG-теги на всех страницах?

Технически — да. Практически — нет. Каждая страница должна иметь уникальные og:title, og:description, og:image и og:url. Одинаковые теги на всём сайте превращают каждую расшаренную ссылку в клон предыдущей. Пользователи перестают кликать.

Чем OG-теги отличаются от Twitter Cards?

Open Graph создал Facebook, и большинство платформ его поддерживают. Twitter (X) разработал собственный формат — Twitter Cards с тегами вроде twitter:title и twitter:image. Если на странице нет Twitter-тегов, X использует OG-теги как запасной вариант. Для полного покрытия добавьте оба формата: OG через этот генератор, а Twitter Cards через генератор Twitter Card.

Как добавить OG-теги в WordPress?

Два варианта. Вставьте код напрямую в header.php темы — подходит для разработчиков. Или используйте SEO-плагин (Yoast SEO, Rank Math, All in One SEO) — в редакторе каждой записи появятся поля для OG-тегов. Плагин удобнее, если у вас много страниц и нет доступа к коду темы.

Как добавить OG-теги на сайт на 1С-Битрикс или Tilda?

В 1С-Битрикс отредактируйте шаблон сайта и вставьте мета-теги в секцию через header.php или компонент bitrix:main.include. В Tilda зайдите в настройки страницы — раздел «SEO» — и заполните поля Open Graph: заголовок, описание, изображение. Tilda генерирует OG-разметку автоматически из этих полей.

OG-теги работают в WhatsApp и Telegram?

Да. Оба мессенджера считывают OG-теги при вставке ссылки в чат. WhatsApp формирует карточку с изображением, заголовком и описанием. Telegram делает то же самое и дополнительно показывает og:site_name. Для обновления кэша в Telegram используйте бота @webpagebot.

Какой размер изображения для og:image?

Стандарт — 1200 × 630 пикселей с соотношением сторон 1.91:1. Этот размер корректно отображается в Facebook, ВКонтакте, LinkedIn, Telegram и WhatsApp как большая карточка. Изображения меньше 600 × 315 px покажутся как миниатюры — кликов по ним значительно меньше. Вес файла — до 5 МБ.

Можно ли задать разные заголовки для SEO и соцсетей?

Да. Тег