Проверка Open Graph онлайн: как ссылка на сайт выглядит в соцсетях и как это исправить

Короткий ответ: чтобы проверить Open Graph онлайн, вставьте адрес страницы в бесплатный Open Graph Debugger PromoPilot. Он прочитает все теги og:* и Twitter Card, проверит наличие и размер картинки, оценит полноту разметки и покажет превью ссылки для Facebook, X (Twitter) и LinkedIn — плюс рекомендации, что добавить. Регистрация не нужна. Ниже — какие теги обязательны, какой нужен размер og:image и как обновить «застрявшее» превью.

Я 12 лет делаю сайты, и вопрос «почему ссылка в Telegram без картинки» слышу от клиентов чаще, чем вопросы про позиции. Обычно это пять минут работы — если знать, где смотреть.

Что проверяет Open Graph Debugger?

Когда вы вставляете ссылку в пост или сообщение, площадка заходит на страницу и ищет теги Open Graph. Нашла — рисует аккуратную карточку. Не нашла — берёт что попало или показывает голый адрес. Инструмент проверяет ровно то, что прочитают соцсети.

Как проверить Open Graph страницы онлайн?

1. Откройте Open Graph Debugger.
2. Вставьте адрес страницы, которой собираетесь делиться: статьи, товара, лендинга под рекламу. Нажмите «Проверить».
3. Пройдите по списку тегов: какие заданы, какие пустые, нет ли в og:url чужого или тестового адреса.
4. Посмотрите превью для каждой сети: обрезан ли заголовок, видна ли картинка, нет ли на ней важного текста по краям.
5. Добавьте недостающие теги по рекомендациям и проверьте страницу снова.

Страница инструмента: поле для адреса, кнопка «Проверить», список проверок и FAQ.

Инструмент лёгкий: гостю хватает дневного лимита, чтобы проверить все шаблоны сайта — главную, категорию, товар и статью. После бесплатной регистрации лимит в три раза больше.

Какие ошибки в Open Graph встречаются чаще всего?

Вот что я нахожу почти на каждом втором сайте, и в каком порядке это чинить.

1. Нет og:image или он указан относительным адресом. content="/img/cover.jpg" соцсети не поймут — нужен полный адрес с https://. Без картинки охват поста заметно падает.
2. Картинка слишком маленькая. Логотип 200×200 превращает карточку в маленький квадрат сбоку. Нужна картинка 1200×630.
3. Одна og:image на весь сайт. Каждая статья и каждый товар в соцсетях выглядят одинаково — с логотипом. Для блога и каталога картинка должна подставляться из главного фото страницы.
4. og:url ведёт на другой адрес — на главную, на тестовый домен или на версию с http://. Площадка может склеить все ссылки в одну карточку.
5. Нет twitter:card. Без него X часто показывает маленькую карточку. Для крупной картинки нужен summary_large_image.
6. og:title дублирует title с «купить» и брендом. В ленте соцсети это выглядит как реклама; лучше живой заголовок, как для поста.

Минимальный правильный набор выглядит так:

<meta property="og:title" content="Как выбрать кожаный рюкзак: 7 признаков качества">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/kozhanyj-ryukzak/">
<meta property="og:image" content="https://example.com/img/og/kozhanyj-ryukzak.jpg">
<meta name="twitter:card" content="summary_large_image">

Как подготовить картинку для og:image?

Картинка — самая заметная часть карточки, и на ней чаще всего экономят. Несколько правил, которые я соблюдаю:

• Размер 1200×630 и горизонтальная ориентация. Квадратное фото товара соцсеть обрежет сверху и снизу, и товар может оказаться без головы или без подошвы.
• Важное — в центре. Площадки по-разному кадрируют края, а в мобильной ленте карточка ещё и уменьшается. Текст держите крупным и подальше от краёв.
• Минимум текста. Заголовок уже есть под картинкой; на самой картинке достаточно 3–6 слов или вовсе без надписей.
• Лёгкий файл. JPG или PNG разумного веса загрузятся быстро, и площадка не «потеряет» картинку по таймауту.
• Своя картинка для каждой ключевой страницы. Для статей и товаров её удобно собирать автоматически: обложка статьи или главное фото товара.

Хорошая проверка — открыть превью в отладчике на телефоне. Если без увеличения не понятно, о чём ссылка, картинку стоит переделать.

Как обновить старое превью после исправления?

Частая история: теги поправили, а соцсеть упорно показывает старую картинку. Причина — кэш: площадка запомнила превью при первом шаринге. В Facebook помогает повторный сбор данных в Sharing Debugger, в LinkedIn — Post Inspector, в Telegram — бот @WebpageBot, которому отправляют ссылку. Если ничего не помогло, добавьте к адресу безобидный параметр, например ?v=2: для площадки это новая ссылка.

Сравнение: Open Graph Debugger и альтернативы

Вывод: официальные отладчики площадок нужны, чтобы сбросить кэш, но каждый показывает только свою сеть. Чтобы за один заход увидеть все превью и список недостающих тегов, удобнее универсальный отладчик.

Кстати, у PromoPilot 87 бесплатных SEO-инструментов. Если вы ещё не написали теги — в нашей серии есть статья про генератор мета-тегов, он соберёт блок Open Graph с превью.

Чем отладчик Open Graph отличается от анализа мета-тегов?

Анализ мета-тегов смотрит страницу глазами поисковика: title, description, canonical, hreflang, а Open Graph — лишь одна из групп. Отладчик сосредоточен на соцсетях: рисует карточки для разных площадок, проверяет размер картинки и даёт рекомендации именно по превью. Если ссылки на ваш сайт активно расходятся в соцсетях и мессенджерах, отладчик полезнее.

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

Когда бесплатного инструмента мало?

Отладчик покажет, что на странице нет og:image. Но если страниц тысячи, вручную картинки не расставить. Специалист нужен, когда:

• у каждого товара или статьи должна быть своя картинка превью, собранная автоматически;
• сайт отдаёт теги скриптом, и соцсети их не видят;
• вы запускаете рекламу и рассылки, где каждое превью влияет на стоимость клика;
• нужна связка «сайт + Telegram-канал + автопубликация» с правильными карточками.

Что я могу сделать для вашего сайта?

Я Валерий Данюк, разработчик и SEO-специалист: 12 лет, 200+ клиентов. Красивое превью ссылки — это бесплатный охват, и я настраиваю его на каждом проекте.

SEO и продвижение

• SEO-аудит сайта под ключ: проверяю теги всех шаблонов, настраиваю автоматические картинки превью и исправляю код.

Сайты и интернет-магазины

• Перенос магазина из Instagram на сайт — товары с правильными превью, чтобы ими удобно было делиться.
• Лендинг для нового товара за вечер — кейс NordHarvest с готовой карточкой для соцсетей.
• Сайт клиники пластической хирургии с ИИ и заявками через Telegram.
• Сайт на 1001site: превью для соцсетей и авто-публикация в Telegram настраиваются автоматически.

Боты и автоматизация

• Telegram-бот с ИИ для интернет-магазина соусов.
• QuestFlow — SaaS-конструктор Telegram-ботов с ИИ.
• Агенты электронной коммерции вместо чат-ботов.

Пришлите ссылку, которая некрасиво выглядит в мессенджере, мне в Telegram — скажу, какого тега не хватает.

Итог

1. Проверка Open Graph онлайн показывает, как ссылка выглядит в Facebook, X и LinkedIn, и каких тегов не хватает.
2. Обязательный минимум — og:title, og:type, og:image (1200×630, полный адрес) и og:url, плюс twitter:card.
3. После исправления сбросьте кэш площадок: Sharing Debugger, Post Inspector, @WebpageBot.
4. Для каталога и блога картинки превью должны собираться автоматически — как на 1001site.

Проверьте страницу, которой собираетесь поделиться, в бесплатном Open Graph Debugger — до того, как пост увидят подписчики.

Источники

• Страница инструмента «Open Graph Debugger» PromoPilot — список проверок и FAQ.
• Протокол Open Graph (ogp.me) — обязательные и дополнительные свойства.
• Sharing Debugger от Meta и LinkedIn Post Inspector — официальные инструменты площадок.