Почему ваша ссылка похожа на обрывок
Каждый, кто скидывал ссылку на статью в чат, видел вместо красивой карточки голый URL. Знакомая картина. Соцсети показывают не ту картинку, обрезают заголовок на полуслове, а описание не показывают вовсе. Виноват не сайт, не браузер и не Telegram. Виновато отсутствие Open Graph. Разберёмся, что это такое и как настроить.
Что такое Open Graph
Open Graph - это интернет-протокол, который придумали в Facebook примерно в 2010 году. Его задача - превратить любую веб-страницу в «богатый объект» социального графа. Богатый объект означает, что страница представляется в соцсети так же полно, как профиль пользователя или паблик. С технической точки зрения это набор мета-тегов в HTML.
Протокол создавался под влиянием Dublin Core, Microformats и RDFa. Спецификация открыта и доступна на сайте ogp.me. Каждый сайт может использовать её бесплатно. Сегодня Open Graph поддерживают LinkedIn, X, Threads, Slack, WhatsApp, Discord, VK, Telegram и десятки других сервисов. Даже если вы никогда не открывали спецификацию, вы видели результат её работы.
Как выглядят og-теги
Добавить разметку несложно. Достаточно вставить в секцию <head> несколько строк. Вот минимальный набор для статьи:
<meta property='og:title' content='Пример статьи'>
<meta property='og:description' content='Короткое описание, которое увидит пользователь'>
<meta property='og:image' content='https://example.com/image.jpg'>
<meta property='og:url' content='https://example.com/article'>
<meta property='og:type' content='article'>og:title отвечает за заголовок карточки. Соцсеть возьмёт его вместо HTML title, если тег задан. og:description - это короткое описание под заголовком. og:image - картинка превью. Платформы любят изображения минимум 1200 на 630 пикселей, в форматах JPEG или PNG. og:url указывает канонический адрес страницы, чтобы все превью и лайки вели на один и тот же URL. og:type говорит, что находится на странице: статья, видео, сайт компании.
Дополнительно можно задать og:locale, og:site_name, og:image:alt. Эти теги необязательные, но помогают платформам показать более точную информацию.
Почему без Open Graph страдают клики
Когда социальная сеть не находит og-теги, она начинает гадать. В результате вместо яркого заголовка появляется случайный текст с сайта, вместо картинки - первый попавшийся баннер, а описание может вообще отсутствовать. Выглядит это как мусор. На такой клик люди не идут.
С красивым превью ссылка становится заметнее. Ссылка с аккуратным баннером 1200x630 выигрывает у серой карточки в любой ленте. На Reddit практикующие маркетологи не раз отмечали, что после настройки og-тегов кликабельность ссылок растёт на десятки процентов. Мой опыт это подтверждает.
Как правильно заполнять теги
Со стороны всё просто. На практике я выделяю пять правил.
- Заголовок og:title делайте до 60-90 символов. Дальше соцсети обрезают.
- og:description должен быть до 200 символов. Так он помещается в одну строку в большинстве интерфейсов.
- og:image используйте абсолютный URL, начиная с https://. Относительные пути роботы соцсетей не понимают.
- Картинка должна быть не меньше 1200x630 пикселей. Меньше растянется или обрежется.
- og:url должен совпадать с финальным адресом страницы после всех редиректов.
Если вы используете CMS вроде WordPress, достаточно установить SEO-плагин, например Yoast SEO или Rank Math. Они подставляют теги автоматически. На кастомных сайтах проще добавить в шаблон пару функций. Тут уже без разработчика не обойтись.
Ошибки, которые я вижу чаще всего
Первая и самая частая ошибка - это отсутствие og:image. Без картинки превью выглядит плоской и теряется в ленте. Вторая ошибка - слишком длинный og:title. Соцсеть обрезает его многоточием, и смысл заголовка теряется.
Третья ошибка - относительный путь к изображению. Например, content='uploads/photo.jpg' вместо полного URL. Робот соцсети не сможет открыть файл и просто не покажет картинку. В документации Yoast об этом предупреждают отдельно. Четвёртая ошибка - забытый og:url. Без него аналитика разваливается, потому что для соцсети адрес страницы оказывается неоднозначным.
Ещё одна неприятность - кэширование. Соцсети кэшируют превью после первого запроса. Если вы изменили картинку или заголовок, снаружи всё равно будет старый вариант. Сброс кэша делается в отладочных инструментах каждой соцсети.
Как проверить, что всё настроено
Прежде чем публиковать ссылку в соцсетях, проверьте, как она выглядит. Для этого существуют отладочные инструменты: Facebook Sharing Debugger, LinkedIn Post Inspector и универсальный сервис opengraph.xyz. Вставляете URL, и сервис показывает все теги, которые видит робот. Там же видны ошибки.
Кэш сбрасывается той же кнопкой. Обновили картинку и заголовок, сразу прогоните ссылку через такой инструмент. Только после этого можно безопасно кидать ссылку в публичный канал.
Open Graph для разных типов контента
og:type не просто формальность. От него зависит, как соцсеть отобразит вашу ссылку. Для статьи используйте og:type article. Для товара в магазине - product, для видео - video. Есть даже отдельные типы для музыки и профилей.
Если у вас на сайте есть видео, не забудьте добавить og:video и og:video:secure_url. Соцсеть сможет запустить плеер прямо в предпросмотре. Для обычного сайта достаточно article или website.
Как создать идеальную og:image
Картинка решает, кликнут по ссылке или проскроллят мимо. Стандартный размер - 1200x630 пикселей. На ней размещайте заголовок крупным шрифтом и логотип. Текст не должен занимать больше трети площади, иначе на мобильных он превращается в кашу.
Фон лучше выбирать контрастный, с фирменным цветом. Не используйте много мелких деталей. Платформы сжимают изображение до небольших размеров, и детали исчезают. Отличный вариант - сгенерировать картинку с помощью нейросети. Задали стиль, получили баннер, загрузили как og:image. Минутная работа.
Зачем здесь нейросети
Меня часто спрашивают в комментариях, зачем в статье про Open Graph нейросети. Когда вы ведёте блог или интернет-магазин, постоянно нужно создавать описания, заголовки и картинки. Хочется, чтобы контент был качественным, а на ручное написание уходят часы. Здесь на помощь приходят нейросети. Но в России доступ к последним моделям то блокируется, то требует зарубежную карту. Ситуация знакомая.
ИИ-роутер 3GPT от 3SELLER даёт доступ ко всем флагманским нейросетям прямо из России. Стоимость всего 149 рублей в месяц. Никаких иностранных карт. Оплата российской картой, через СБП или крипту.
Внутри есть Chat GPT 6 Astra, Claude Fable 5, Claude Fable 5.1, Claude Opus 5.5, Chat GPT 5.5, Chat GPT 6.1 Sol. Для изображений доступна модель Nano Banana. Плюс генерация видео. Вы можете написать статью, сгенерировать иллюстрацию, подобрать заголовок и сразу вставить их в og-теги. Всё в одном окне, без переключения между сервисами.
Оформить доступ можно на официальном сайте: https://3seller.com/3gpt
У 3GPT есть ещё одна фишка, которая многим нравится. Речь про готовых ИИ-агентов под конкретные задачи. Например, агент для продающих текстов, агент для SMM или агент для переговоров. Вы просто выбираете нужного и начинаете общение. Модель агента можно менять прямо в чате, если стандартные ответы не подходят.
Посмотреть каталог агентов можно здесь: https://3seller.com/ai/agents
Open Graph не магия, а обычная разметка. Следующий шаг: откройте исходный код своей страницы и проверьте, есть ли в <head> хотя бы og:title, og:description и og:image. Если нет - начните с них. Потратьте на настройку полчаса, а потом каждая ваша ссылка будет выглядеть аккуратно во всех мессенджерах и соцсетях.