Open Graph: как ссылка на ваш сайт выглядит в Telegram и WhatsApp — и почему это заявки

Скиньте прямо сейчас ссылку на свой сайт себе в Telegram. Просто вставьте URL главной в личный чат с собой и отправьте. Что вы видите? Если под ссылкой развернулась аккуратная карточка с картинкой, заголовком и описанием — поздравляю, у вас настроен Open Graph. А если серая строчка голого адреса, обрезанный кусок мусорного текста из футера и никакой картинки — вы годами теряете клики, репосты и заявки, даже не подозревая об этом.

За 20 лет практики я насмотрелся на десятки сайтов, где владельцы вкладывали деньги в контент, в рекламу, в SMM — а потом собственными руками убивали половину эффекта, потому что ссылка на их материал в мессенджере выглядела как спам. Человек репостит вашу статью в рабочий чат на 200 человек, и вместо сочной карточки там появляется безликий URL. Угадайте, сколько людей по нему кликнет? Правильно — почти никто.

Open Graph — это та невидимая разметка, которая превращает вашу ссылку из мёртвого текста в кликабельную витрину. И самое обидное, что настраивается она один раз, а работает годами. В этой статье я разберу по косточкам, что это за зверь, чем он отличается от SEO-мета, какая картинка нужна и как всё это завести на WordPress без танцев с бубном.

Что такое Open Graph и почему это не то же самое, что SEO

Open Graph — это протокол микроразметки, который придумали в Facebook ещё в 2010 году. Идея простая: дать сайтам возможность самим сказать соцсетям и мессенджерам, как именно должна выглядеть их ссылка при репосте. Не гадать, выдёргивая первый попавшийся текст со страницы, а брать готовые данные из специальных тегов в шапке HTML.

Технически это набор мета-тегов в блоке head вашей страницы. Выглядят они примерно так: og:title, og:description, og:image, og:url, og:type. Каждый отвечает за свой кусочек карточки. И вот тут кроется первое заблуждение, из-за которого горят проекты: люди путают Open Graph с обычными SEO-мета-тегами и думают, что это одно и то же.

Это разные сущности. SEO-теги — title и meta description — работают на поисковые системы. Они формируют то, как ваша страница показывается в выдаче Яндекса и Google. Если вы не разобрались, как правильно составлять эти теги, почитайте отдельно про заполнение мета-тега title и про правильный meta description — это база, без которой дальше двигаться нет смысла. А Open Graph работает на мессенджеры и соцсети: Telegram, WhatsApp, ВКонтакте, Facebook, LinkedIn. Это два параллельных мира, и они читают разные теги.

На замерах видел ситуацию десятки раз: у сайта отлично прописан title под поиск, сниппет в Яндексе выглядит идеально — а в Telegram та же страница разворачивается уродливым обрубком. Потому что og-тегов просто нет, и мессенджер берёт то, что найдёт: обрезанный title, первый абзац из бокового меню и логотип 60 на 60 пикселей вместо картинки.

Как выглядит ваша ссылка без разметки — и во что это обходится

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

Я специально считал разницу на одном из проектов — B2B-сервис, который активно расшаривали в отраслевых Telegram-каналах. До настройки Open Graph кликабельность ссылок в этих каналах болталась в районе 2-3 процентов от просмотров поста. После того как мы прописали нормальную карточку с фирменной картинкой и цепляющим og:title, CTR подскочил до 7-8 процентов. Это не магия — это разница между «мимо пролистал» и «о, интересно, тыкну».

Вот типичные проблемы ссылки без разметки, которые я вижу постоянно:

• Нет картинки вообще. Мессенджер не находит подходящее изображение и показывает либо ничего, либо крошечную иконку сайта. Карточка выглядит пустой и недоверчивой.

• Мусорный заголовок. Вместо заголовка статьи подтягивается название сайта или обрезанная фраза из шаблона темы. Человек не понимает, о чём вообще ссылка.

• Кривое описание. В поле описания вылезает текст из хлебных крошек, меню или служебный текст плагина. Читается как ошибка.

• Картинка не по теме. Мессенджер хватает первое изображение на странице — а это часто иконка соцсети из футера или аватарка комментатора.

И самое коварное — вы этого не видите. В браузере страница открывается нормально, всё красиво. Проблема вылезает только в момент репоста, а до этого момента вы можете годами не догадываться, что теряете половину социального трафика. Это как сниппет в поиске: пока не проверишь специально, не поймёшь, что там показывается ерунда.

Анатомия og-тегов: что за что отвечает

Разберём базовый набор, который реально нужен. Не тридцать тегов из спецификации, а те пять-шесть, которые делают 95 процентов результата.

og:title — заголовок карточки. Тут важный нюанс: это НЕ обязательно ваш SEO-title. Для поиска вы затачиваете заголовок под запрос, впихиваете ключ, следите за длиной под сниппет. А для соцсетей заголовок должен быть человечным и цепляющим — таким, чтобы захотелось кликнуть в ленте. Иногда это одно и то же, но часто выгоднее развести их. О том, как вообще устроены цепляющие формулировки, я писал в материале про SEO-заголовки.

og:description — описание под заголовком. Одно-два предложения, которые раскрывают суть и добивают человека до клика. Опять же, это не обязательно ваш meta description для поиска. Мессенджеры показывают примерно 2-4 строки, дальше обрезают, так что бейте в главное сразу.

og:image — самое важное. Это картинка карточки, и именно она делает или ломает всё превью. Про размеры и требования расскажу отдельным разделом ниже, потому что тут больше всего граблей.

og:url — канонический адрес страницы. Нужен, чтобы соцсеть понимала, какую именно страницу вы шарите, и не размазывала статистику лайков и репостов по разным вариантам URL (с www и без, с параметрами и без). По логике это близко к тому, зачем нужны канонические сигналы структуры — вы говорите системе, что первично.

og:type — тип контента. Для статьи ставим article, для главной или карточки услуги — website. Мелочь, но помогает соцсетям правильнее обработать карточку.

Отдельно стоит упомянуть Twitter Cards — теги вида twitter:card, twitter:image. Это диалект Open Graph для X (бывшего Twitter). Если ваша аудитория там есть, добавьте и их, но для рунета, где правят Telegram и ВКонтакте, чистого Open Graph почти всегда достаточно.

Картинка og:image — главная боль и главный рычаг

Если запомнить из статьи только одно, пусть это будет раздел про картинку. Потому что 80 процентов проблем с превью — это проблемы с og:image. И тут есть жёсткие технические требования, которые нельзя нарушать.

Рекомендуемый размер — 1200 на 630 пикселей. Это соотношение сторон примерно 1.91 к 1, горизонтальный прямоугольник. Именно под этот формат заточены карточки в большинстве соцсетей и мессенджеров. Если вы поставите квадрат или вертикаль, система либо обрежет картинку как попало, либо покажет её маленькой иконкой сбоку вместо крупного баннера сверху.

Вот мой чек-лист по картинке, отработанный на практике:

• Размер 1200×630. Минимально допустимо 600×315, но лучше не мельчить — на ретина-экранах мелкая картинка выглядит мыльно.

• Вес до 5 МБ, а лучше до 300-500 КБ. Telegram и WhatsApp не любят тяжёлые картинки, могут просто не подгрузить превью. Сожмите изображение — как это делать, я разбирал в материале про скорость загрузки сайта.

• Формат JPG или PNG. WebP местами поддерживается криво — не все мессенджеры его корректно рендерят в превью. Для og:image берите проверенный JPG.

• Абсолютный URL с https. В теге должен стоять полный адрес картинки, а не относительный путь. Иначе мессенджер её просто не найдёт.

• Текст на картинке — крупный и по центру. Помните, что в ленте карточка маленькая. Мелкий текст превратится в нечитаемую кашу.

Отдельная беда, которую я вижу постоянно на WordPress-сайтах, — дубли og:image. Тема и SEO-плагин наперегонки вставляют этот тег, и в итоге на странице оказывается два, а то и три разных og:image. Мессенджер в лучшем случае берёт первый попавшийся, в худшем — путается и не показывает ничего. Так что после настройки обязательно проверьте, что тег на странице ровно один. Дубли в разметке вообще зло — почти как дублирование контента, только на техническом уровне.

Как настроить Open Graph в WordPress

Теперь практика. На WordPress есть три пути, и я разложу их от простого к сложному.

Путь первый — через SEO-плагин. Если у вас стоит Yoast SEO, Rank Math или All in One SEO, поздравляю: у них у всех есть встроенная поддержка Open Graph, её надо просто включить. В настройках плагина ищите раздел Social или «Соцсети», активируйте Open Graph, задайте картинку по умолчанию для всего сайта и, при желании, отдельную картинку для каждой важной страницы. Это закрывает потребности 90 процентов проектов. Плагин сам подставит og:title, og:description и og:image, подтянув их из ваших SEO-настроек или из обложки записи.

Путь второй — руками в теме. Если вы не хотите тащить тяжёлый плагин или у вас своя реализация мета-тегов, og-теги можно вписать напрямую в шапку темы через хук wp_head в файле functions.php дочерней темы. Пишете функцию, которая для каждой записи вытягивает заголовок, описание и картинку записи, и выводит нужные теги. Это чуть сложнее, зато полный контроль и ноль лишнего кода. Именно так реализована разметка на многих аккуратных проектах, где мета-теги ведёт кастомный модуль темы, а не универсальный плагин.

Путь третий — гибрид. Иногда SEO-плагин генерит базу, а специфичные страницы (главная, посадочные, услуги) вы дооформляете руками, задавая им особые картинки и заголовки под репост. Так делаю на проектах, где посадочные страницы — главный источник заявок, и карточка репоста должна работать как мини-лендинг.

Важный момент про кэш. WordPress-сайты почти всегда под кэшированием, и когда вы меняете og-теги, старая версия может ещё висеть. Плюс сами мессенджеры и соцсети кэшируют карточку. Так что после настройки мало отредактировать файл — нужно сбросить кэш сайта и заставить мессенджер перечитать разметку. Про то, как правильно ускорять и кэшировать WordPress, не ломая при этом свежие правки, я писал в статье про скорость загрузки на WordPress.

Как проверить, что всё работает

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

1. Скиньте ссылку себе в Telegram. Самый быстрый тест. Отправьте URL в «Избранное» и посмотрите, как развернулась карточка. Картинка на месте? Заголовок внятный? Описание по делу? Если да — базово всё ок.

2. Проверьте в WhatsApp. Он капризнее Telegram и жёстче относится к весу картинки. Если в Телеграме превью есть, а в Ватсапе нет — почти наверняка слишком тяжёлая или неправильного формата картинка.

3. Используйте валидаторы соцсетей. У Facebook есть Sharing Debugger, у ВКонтакте — свой инструмент проверки. Они показывают, какие именно теги видит соцсеть, и позволяют принудительно сбросить кэш карточки. Незаменимо, когда вы поменяли картинку, а старая всё ещё висит.

4. Посмотрите исходный код страницы. Откройте код страницы (Ctrl+U) и найдите поиском og:. Убедитесь, что теги есть, что они заполнены осмысленно и — важно — что каждый тег ровно в одном экземпляре, без дублей.

Если карточка упорно не появляется, чаще всего дело в одной из трёх причин: картинка недоступна по указанному URL (проверьте, открывается ли она напрямую в браузере), страница закрыта от индексации или доступа роботам (загляните в файл robots.txt — мессенджеры тоже ходят ботами и уважают запреты), или мессенджер закэшировал старую пустую версию и её надо сбросить через валидатор.

Типичные ошибки, на которых горят даже опытные

Соберу в одном месте грабли, на которые я регулярно наступаю сам и вижу у клиентов.

• Одна картинка на весь сайт. Поставили дефолтный og:image с логотипом — и все страницы репостятся с одинаковым унылым лого. Для важных материалов и посадочных делайте индивидуальные картинки.

• Относительный путь к картинке. Написали в теге путь вида /images/cover.jpg вместо полного https-адреса. Мессенджер такой путь не разрулит, картинки не будет.

• Дубли тегов. Тема и плагин вставляют og:image независимо. Итог — два-три тега, каша в превью. Держите ровно по одному.

• Забыли про кэш. Поменяли картинку, а в мессенджере висит старая неделю. Всегда сбрасывайте кэш карточки через валидатор после правок.

• Слепое копирование SEO-title в og:title. Заголовок под поиск, набитый ключами, в ленте соцсети выглядит роботизированно. Разведите смыслы: для поиска — под запрос, для репоста — под человека. Это часть общей культуры работы с мета-тегами для продвижения.

• Текст на картинке мелкий или у края. В ленте карточка крохотная, и края часто обрезаются. Ключевой текст — крупно и по центру.

Ещё один недооценённый момент: Open Graph косвенно работает и на доверие в новой поисковой реальности. Когда ваши материалы аккуратно расшариваются, набирают репосты и переходы, это часть сигналов, которые формируют присутствие бренда в сети. А это уже смыкается с темой продвижения в нейросетях и AI-поиске, где машина учитывает, насколько уверенно ваш бренд представлен в цифровом пространстве. И конечно, красивые карточки помогают продвижению бренда в соцсетях — люди охотнее делятся тем, что выглядит солидно.

Выводы и короткий чек-лист

Open Graph — это дешёвая и разовая настройка с длинным хвостом отдачи. Один раз прописали теги, один раз сделали нормальную картинку — и годами каждый репост вашей ссылки работает как бесплатный рекламный баннер. Игнорировать это в 2026 году, когда половина трафика приходит через мессенджеры и соцсети, — значит добровольно дарить конкурентам клики.

Финальный чек-лист, пробегитесь по нему прямо сейчас:

• На странице есть og:title, og:description, og:image, og:url, og:type.

• Картинка 1200×630, формат JPG, вес до 500 КБ, абсолютный https-URL.

• Каждый og-тег ровно в одном экземпляре, дублей нет.

• og:title человечный и цепляющий, а не слепая копия SEO-заголовка.

• Ссылка проверена в Telegram И в WhatsApp — карточка разворачивается корректно.

• Кэш сайта и кэш карточки в соцсетях сброшены после правок.

Если хоть один пункт не выполнен — у вас утекают клики. А клики в мессенджерах — это тёплый трафик от людей, которым вас порекомендовали. Терять его на технической мелочи, которая чинится за час, просто глупо.

---

Хотите, чтобы каждая ссылка на ваш сайт в мессенджерах и соцсетях работала на заявки — а не отпугивала людей мёртвым серым текстом? Я занимаюсь продвижением сайтов в Яндексе уже больше 20 лет и готовлю сайты в том числе под выдачу нейросетей и AI-поиск. Разберу ваш проект, проверю разметку Open Graph, мета-теги и техничку — и покажу, где вы прямо сейчас теряете трафик и клиентов.