Вставьте страницу и посмотрите карточку для Facebook, LinkedIn, X, WhatsApp и Slack
Работает в вашем браузере. Ничего из того, что вы вводите, никуда не отправляется.Ссылка при репосте превращается в карточку из тегов, которые большинство страниц заполняет неправильно. Вставьте URL и посмотрите, как она будет выглядеть в Facebook, LinkedIn, X, WhatsApp и Slack — 5 превью сразу, с пропорциями изображения и указанием каждого недостающего тега.
Эта страница переведена машинным способом с английского оригинала. Перевод ещё не проверен человеком, поэтому ориентируйтесь на английскую версию. Читать английский оригинал
Откройте страницу и нажмите Ctrl+U, чтобы увидеть исходный код; сам инструмент открыть веб-адрес не может.
Вставьте исходный код в панель «HTML страницы».
Нажимайте варианты в строке «Сеть», от Facebook до Slack, чтобы увидеть карточку каждой сети.
Посмотрите, какой тег дал «Заголовок», «Описание» и «Изображение», а в строке «Не хватает» — что добавить.
Нажмите «Копировать отчёт» или скачайте его как open-graph-report.txt.
Этот предпросмотр Open Graph читает мета-теги вставленной страницы и рисует карточку, которую по ним построят Facebook, LinkedIn, X, WhatsApp и Slack. Каждая сеть показана со своим порядком запасных вариантов, поэтому видно, какой тег на самом деле дал заголовок, вторую строку и картинку.
Одного он не сделает: не загрузит страницу за вас. За этим сайтом нет сервера, а браузеру нельзя запрашивать чужие страницы, поэтому любой инструмент здесь, заявляющий, что читает живой URL, лгал бы о том, где выполняется работа. Откройте страницу, нажмите Ctrl+U, чтобы увидеть исходный код, и вставьте его сюда. Достаточно вставить только head или даже несколько мета-тегов.
Проверки охватывают ошибки, которые действительно ломают карточки: относительный путь og:image, отсутствующий og:url, значение twitter:card, которое не является типом карточки, повторяющиеся теги, из которых скрейпер молча берёт первый, и теги, добавленные JavaScript на клиенте, который скрейпер никогда не выполняет. Каждая проверка объясняет, что сеть делает вместо этого.
Вставьте ещё и базовый адрес — относительные пути будут разрешены, и отчёт покажет абсолютный URL, который должен был быть в теге. Связанные инструменты: Meta Tag Generator пишет правильный блок с нуля.
Нет, и ни один инструмент, работающий только в браузере, этого не может. Чтобы прочитать страницу другого сайта, нужен сервер, который её загрузит, или разрешение браузера, которого у этой страницы нет. Откройте страницу, нажмите Ctrl+U и вставьте исходный код сюда. Одного head достаточно.
В девяти случаях из десяти значение og:image — относительный путь вроде /card.png. Сети загружают изображение со своих серверов, поэтому это должен быть полный адрес https://. Другие частые причины — картинка за авторизацией и файл больше примерно 5 MB.
X закрыл публичный Card Validator в 2022 году. Теперь проверить карточку можно, только опубликовав ссылку или прочитав теги самостоятельно. Эта страница читает их так же, как X: сначала теги twitter:, затем og:, а по умолчанию — маленькая карточка со сводкой.
Facebook кеширует карточку при первом репосте ссылки и сам её не перечитывает. После изменения тегов прогоните URL через Sharing Debugger Facebook и выберите Scrape Again. Post Inspector в LinkedIn делает то же самое.
Обычно нет. Скрейперы Facebook, WhatsApp и Slack читают HTML, который отдаёт сервер, и не выполняют ваш JavaScript. Теги, вставленные клиентским фреймворком, для них невидимы, поэтому формируйте их на сервере или используйте пререндеринг.
Нет. Разбор — это простая работа со строками в вашем браузере, и страница вообще не делает сетевых запросов. Тестовые страницы и внутренние сайты можно проверять здесь, ничего не выпуская за пределы устройства.
Всё ещё не получается? Задайте вопрос об инструменте «Предпросмотр Open Graph» и ответить может любой, кто знает. Учётная запись не нужна.