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

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

Когда ссылка на ваш сайт публикуется на Facebook, LinkedIn, Slack, Discord или X (Twitter), эти платформы ищут мета-теги Open Graph в <head> страницы, чтобы создать карточку предпросмотра с заголовком, описанием и изображением. Без этих тегов социальная сеть часто показывает голую ссылку или невыразительный стандартный предпросмотр. Этот инструмент генерирует теги og:title, og:description, og:url, og:image и og:type, а также эквиваленты twitter:card, чтобы карточка корректно отображалась и на X.

Куда вставлять эти теги?

Вставьте результат непосредственно в раздел <head> вашей HTML-страницы, перед закрывающим тегом </head>. В большинстве фреймворков (Nuxt, Next.js и т. д.) есть специальный компонент для управления head, который принимает эти же мета-теги.

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

Рекомендуемый размер обычно 1200x630 пикселей (соотношение 1.91:1), что соответствует формату, ожидаемому Facebook, LinkedIn и X для отображения в виде большой карточки. Слишком маленькое изображение или неправильное соотношение сторон может быть неудачно обрезано платформой.

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

Большинство социальных сетей кэшируют мета-теги Open Graph URL при первом добавлении ссылки. После изменения тегов используйте официальный инструмент отладки платформы (например, "Sharing Debugger" от Facebook), чтобы принудительно запустить повторное сканирование страницы.

Обработка 100% локально в вашем браузере — ничего не отправляется на сервер.