Почему превью ссылки выглядит неправильно и как это исправить с помощью Open Graph

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

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

Как строится превью ссылки

Когда ссылку вставляют в пост или сообщение, приложение отправляет на страницу краулер. Он читает теги <meta> в <head> и по ним рисует карточку. Эти теги берутся из протокола Open Graph, в котором четыре обязательных:

• og:title: заголовок страницы в том виде, в каком он должен появиться в карточке.
• og:type: тип страницы, обычно website или article.
• og:image: изображение.
• og:url: канонический адрес страницы, который протокол называет её постоянным идентификатором.

Добавьте og:description, и карточка готова. Полный минимальный набор выглядит так:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Причина 1: теги отсутствуют

Если тегов og: нет, каждое приложение опирается на то, что найдёт на странице, например на <title> или на первое изображение, а что оно выберет, зависит от приложения. Поэтому одна и та же ссылка может выглядеть нормально в одном месте и сломанно в другом. Исправление: укажите четыре обязательных тега и описание на каждой странице, которой будут делиться, а не только на главной. Страница товара, которой поделились с тегами главной страницы, покажет карточку главной.

Причина 2: адрес изображения относительный

Это легко пропустить, потому что страница выглядит нормально в вашем собственном браузере. content="/images/og.jpg" работает, если браузер уже находится на вашем сайте, но краулер находится за его пределами. Пишите полный адрес, начиная с https:// и вашего домена. То же относится к og:url.

Причина 3: изображение не того размера или формы

Каждая платформа указывает, что ей нужно, и все они сходятся на широком изображении:

• LinkedIn в своём руководстве по тому, как сделать сайт пригодным для публикации, пишет, что изображение должно быть не меньше 1200 × 627 пикселей, при рекомендуемом соотношении 1,91:1, и не больше 5 МБ.
• Meta в своих рекомендациях по обмену контентом советует изображения шириной не менее 1080 пикселей для экранов высокой плотности и не менее 600 пикселей для показа в рекламе со ссылкой-картинкой.
• Большая карточка изображения у X поддерживает соотношение 2:1 от 300 × 157 до 4096 × 4096 пикселей, до 5 МБ, в форматах JPG, PNG, WEBP или GIF, и не поддерживает SVG, согласно её документации для разработчиков (исходная страница теперь перенаправляет, поэтому ссылка ведёт через Internet Archive).

Один размер подходит всем трём: 1200 × 630. Он проходит минимум LinkedIn 1200 × 627, шире 1080 у Meta, а его соотношение 1200 ÷ 630 = 1,905 отличается от 2:1 у X менее чем на 5%. Квадратное или высокое изображение обрежется до широкой карточки, поэтому держите главное в центре. Калькулятор соотношения сторон показывает, что остаётся при обрезке по центру.

Укажите размер и в тегах. Meta просит og:image:width и og:image:height, чтобы её краулер мог сразу отрисовать изображение, а не скачивать и обрабатывать его сначала. В её руководстве для вебмастеров сказано просто: укажите высоту и ширину, чтобы изображение правильно загрузилось при первом же обмене ссылкой.

Причина 4: теги добавляются через JavaScript

Некоторые конструкторы сайтов и одностраничные приложения добавляют мета-теги уже после загрузки страницы, в браузере. Краулер, который читает HTML, отданный вашим сервером, может так и не выполнить этот код и поэтому не увидит теги. Проверьте исходный код страницы (View Source, а не инспектор, который показывает страницу после выполнения скриптов). Если тегов нет в исходном коде, краулер, скорее всего, их тоже не увидит. Исправлять нужно в настройках сайта или в серверном шаблоне.

Причина 5: спецсимволы сломали тег

Заголовок с двойной кавычкой внутри, например The "only" linen you need, обрывает атрибут content="..." раньше времени, и остальная часть заголовка теряется. Символы, которые важны внутри атрибута, нужно экранировать: " становится ", & становится &, а < становится <. Браузеры и краулеры при чтении возвращают их к исходным символам. Генератор делает это за вас, и это уже половина причины им пользоваться.

Причина 6: приложение запомнило старую версию

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

• Facebook: вставьте адрес в Sharing Debugger от Meta. В руководстве для вебмастеров Meta сказано, что он показывает, какие теги собрал краулер, вместе с ошибками и предупреждениями, и запускает новое сканирование. В рекомендациях Meta добавлено, что собранный контент иначе обновляется по стандартному периоду в 24 часа.
• LinkedIn: прогоните адрес через Post Inspector. В справке LinkedIn ясно сказано об ограничении: обновление меняет превью только для новых постов. Посты, которые уже содержат ссылку, сохраняют старое превью.

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

Тег twitter:card: одна строка, а не четыре

X тоже читает Open Graph. В его справочнике по карточкам для каждого тега указан запасной вариант: twitter:title берётся из og:title, twitter:description из og:description, twitter:image из og:image, а twitter:image:alt из og:image:alt. Поэтому повторять всё не нужно. Единственная строка, которую стоит добавить, это twitter:card: summary_large_image для картинки на всю ширину или summary для маленького квадратного изображения. Если её пропустить, тот же справочник говорит, что X может показать маленькую карточку-сводку, поэтому большая картинка иногда приходит как миниатюра. Там же заголовок ограничен 70 символами, описание 200, а альтернативный текст 420.

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

1. Откройте исходный код страницы и найдите теги og:. Все четыре обязательных плюс описание.
2. Проверьте, что og:image и og:url начинаются с https://.
3. Откройте адрес изображения отдельно в браузере. Оно должно загрузиться размером 1200 × 630 или близким к нему.
4. Вставьте адрес в Sharing Debugger и Post Inspector и посмотрите карточки.
5. Только после этого делитесь ссылкой.

Место Hermoso

Hermoso это AI-агент для маркетинга: он изучает объявления, которые уже работают на вашем рынке, создаёт фирменные рекламные изображения и видео, планирует посты в ваши собственные аккаунты и ведёт платные кампании в ваших рекламных кабинетах. Хорошее превью делает эти посты такими, на которые хочется нажать. Hermoso работает в веб-приложении или внутри Claude, ChatGPT и Cursor через свой MCP-сервер.

Частые вопросы

Почему ссылка не показывает картинку в Facebook или LinkedIn?

Обычно тега og:image нет, он использует относительный путь вместо полного адреса https:// или указывает на слишком маленькое изображение. LinkedIn требует минимум 1200 × 627 пикселей. После исправления прогоните адрес через Sharing Debugger от Meta или Post Inspector от LinkedIn, чтобы они загрузили его заново.

Каким должен быть размер изображения Open Graph?

1200 × 630 пикселей подходят для крупных сетей. Это соответствует минимуму LinkedIn 1200 × 627 при соотношении около 1,91:1, шире 1080 пикселей, которые рекомендует Meta, и близко к 2:1, которое X поддерживает для больших карточек изображений.

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

Исправьте теги на странице, затем введите адрес в Post Inspector LinkedIn. Обновлённое превью применяется только к новым постам. Посты, которые уже содержат ссылку, сохраняют старое превью.

Нужны ли теги twitter:, если есть og:?

Нужен только twitter:card. Если версий twitter: нет, X берёт og:title, og:description, og:image и og:image:alt.