Проверка Open Graph
Вставьте публичный URL, и мы получим его og:title, og:image, og:description и карточку Twitter — именно так, как её отрисуют Slack, LinkedIn и X.
Как исправить превью, которое не показывается
- 01
Убедитесь, что теги есть именно на том URL, которым делятся
Не на главной странице и не на версии за редиректом — а на точном URL, который вставляют люди. Превью читается из финального ответа, поэтому тег, который есть только на странице до редиректа, для превью всё равно что отсутствует.
- 02
Сделайте изображение полностью доступным по адресу
og:image требует полный https-URL, который сможет загрузить посторонний: без относительного пути, без входа в аккаунт, без защиты от хотлинкинга, без редиректа. Если вы не можете открыть его в приватном окне, платформа тоже не сможет.
- 03
Придайте ему форму, которую ожидают платформы
1200 на 630 пикселей — безопасный вариант по умолчанию, это примерно 1,91:1. Держитесь в пределах нескольких мегабайт, используйте JPEG или PNG и оставляйте текст подальше от краёв, потому что разные платформы обрезают кадр по-разному.
- 04
Запрашивайте пересканирование, а не просто пробуйте снова
Каждая сеть кеширует то, что загрузила в первый раз, включая неудачу. После исправления используйте отладчик самой платформы, чтобы принудительно запросить свежую загрузку, — иначе вы смотрите на закешированную ошибку и правите то, что никогда не было сломано.
Что делает каждый тег
og:title и og:description
Заголовок и подзаголовок карточки. Для шеринга они переопределяют title страницы и meta description, и это полезно: формулировка, которая работает в поисковой выдаче, почти никогда не работает в ленте.
og:image
Тег, который замечают в первую очередь, и тот, который чаще всего не срабатывает, — почти всегда потому, что изображение недоступно, а не потому, что оно неправильное. Указывайте явные width и height, где это возможно: некоторые платформы вёрстают карточку ещё до того, как изображение полностью загрузится.
og:url
Канонический адрес того, чем делятся. Он объединяет счётчики вовлечённости, когда одна и та же страница расходится с разными трекинговыми параметрами, поэтому здесь должен быть чистый URL, а не размеченный.
twitter:card
Выбирает между маленькой миниатюрой и крупным изображением. Во всём остальном X использует теги Open Graph, поэтому обычно это единственный тег twitter:, который имеет смысл добавлять.
Вопросы про превью ссылок, которые задают чаще всего
Почему моя ссылка показывает пустое превью?
В девяти случаях из десяти изображение недоступно: относительный путь, приватный бакет или редирект, по которому загрузчик не пойдёт. Остальное — страницы, которые формируют теги через JavaScript, а большинство загрузчиков превью его вообще не выполняют.
Как сбросить закешированное превью?
Через отладчик самой платформы, потому что кеш у каждой свой: Sharing Debugger у Facebook, Post Inspector у LinkedIn, валидатор карточек у X. Единой очистки не существует, и простой повторный шеринг ссылки не поможет.
Нужны ли теги twitter:, если теги Open Graph уже есть?
Только twitter:card, и только если нужна раскладка с крупным изображением. Заголовки, описания и изображения по умолчанию берутся из соответствующих тегов og:.
Влияет ли превью на SEO?
Не напрямую — теги Open Graph не входят в сигналы ранжирования. Они влияют на то, кликнут ли по ссылке, когда ею поделятся, а это другая метрика, и часто более значимая.
Почему одна и та же ссылка выглядит по-разному на каждой платформе?
Разные пропорции обрезки, разная допустимая длина описания и разные кеши разного возраста. Проектируйте изображение так, чтобы оно считывалось, даже когда края обрезаны, а описание — сокращено.