Почему моя ссылка Preview показывает старое изображение после обновления тегов?

Каждая основная платформа кэширует результат парирования вашей страницы, часто в течение недели или дольше, поэтому ссылка, которую вы поделились до исправления, продолжает показывать устаревшая карта. Обновление тегов не делает этого кэша недействительным. относительно - Сотрите URL-адрес в отладчике платформы — отладчике совместного использования Facebook, инспекторе сообщений LinkedIn или повторно поделитесь в Slack, чтобы принудительно вывести новую выборку. Добавление безвредной строки запроса к URL-адресу также создает предварительный просмотр без кэша для тестирования.

Нужны ли мне и og: и twitter: теги?

Не всегда, но безопаснее включать и то, и другое. X возвращается к открытому тегу графа, когда в Twitter: эквиваленты отсутствуют, поэтому страница с OG:TITLE, OG:Description и OG:Image по-прежнему будет производить карту. В открытом графике вы не можете выразить стиль карты: Twitter:card определяет между большим баннером и компактным сводным макетом, а Twitter:site и Twitter:Creator приписывают карту к вашим счетам. Добавьте эти три и дайте тегам OG: все остальные покрывать.

Какой длины должны быть мои og:title и og:description?

Сохраняйте og:title на уровне около 60 символов или ниже — большинство карт усечиваются мимо этого, а узкие мобильные карты сжимаются раньше. Для OG:Description пределы расходятся: X показывает примерно 110 символов, Facebook и LinkedIn показывают ближе к 155–200. Если вы пишете более плотный предел X, ваше описание полностью читается везде. Все, что не утеряно, оно просто спрятано за эллипсисом, так что на передние - загрузите важные слова.

Почему мой предварительный просмотр пуст или показывает только URL?

Обычные причины — это изображение og: image, который является относительным путем, а не абсолютным URL-адресом, изображением, подаваемым по простому HTTP, тегам, размещенным вне , теги, введенные клиентским JavaScript, который скребок никогда не запускает, или страница, возвращающая статус не 200 или перенаправление входа в скребок. Убедитесь, что теги отображаются в необработанном HTML-сервере, который возвращает ваш сервер — источник просмотра, а не инспектор браузера, поскольку инспектор показывает DOM после запуска javascript.

Этот инструмент извлекает мой URL-адрес, чтобы проверить теги?

нет , йо- Он вообще не делает сетевых запросов. Он работает с тегами, которые вы вводите в форму или вставляете в виде HTML, и все анализируется и отображается в вашем браузере. Это преднамеренный выбор дизайна: браузеры не могут получать произвольные сторонние страницы из-за CORS, а выборка на стороне сервера будет означать отправку ваших неизданных URL кому-то еще. Поскольку ничего не выбрано, вы можете проверить страницы на localhost, staging или за логином.

Могу ли я просмотреть страницу, которая еще не опубликована?

Да, и это основная причина использовать подобный инструмент, а не отладчик платформы. Официальные отладчики должны получить ваш Live URL, чтобы они бесполезны для страницы, которая не развернута. Здесь вы просто вставляете теги, которые собираетесь отправить — из вашего шаблона, объекта метаданных фреймворка или локальной сборки — и предварительные просмотры сразу же отображаются, не требуется развертывание.

Что будет, если я оставлю бирку?

Скребки отступают, а запасные части непредсказуемы. Без og:title они обычно используют тег , а без og:description они могут использовать мета-описание или очищать основной текст. Без OG:Image большинство платформ показывают только текстовую карту, хотя некоторые берут произвольное изображение со страницы — часто логотип или пиксель отслеживания. Без og:url общий адрес используется как есть, что означает, что параметры отслеживания могут фрагментировать количество ваших общих ресурса. Настройка тегов явно является единственным способом управления результатом.

Помогает ли Open Graph Markup мой поисковый рейтинг?

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

Является ли инструмент предварительного просмотра Open Graph бесплатным и частным?

да. Это совершенно бесплатно без регистрации, и каждый разбор, проверка и предварительный просмотр происходят в JavaScript в вашем браузере. Вводимые вами заголовки, URL-адреса и ссылки на изображения никогда не отправляются на сервер, и инструмент продолжает работать в автономном режиме после загрузки страницы.

ОТ

Открыть предварительный просмотр графика

Предварительный просмотр того, как будет выглядеть ваша ссылка на Facebook, X, LinkedIn, Slack и Discord, проверка тегов OG: и скопируйте правильный мета-блок

Paste existing meta HTML (optional)

Nothing is fetched or uploaded. Paste the tags from your page source and they are parsed in your browser.

og:title53/60

og:description127/200

og:image

og:url

og:site_name5/40

twitter:site

twitter:creator

og:type

twitter:card

Validation

8 1 0

og:title 53 characters — displays in full on every platform.
og:description 127 characters — fine for Facebook and LinkedIn, but X truncates past ~110.
og:image Absolute HTTPS image URL. Serve it at 1200x630 (1.91:1) for the best result.
og:url Absolute canonical URL set.
og:type Set to "website".
og:site_name 5 characters — shown above the title on most cards.
twitter:card Large banner card. Best when your image is 1200x630 or wider.
twitter:site Valid handle (@toolz).
twitter:creator Valid handle (@toolz).

Generated meta tags

<!-- Open Graph / Facebook / LinkedIn / Slack / Discord -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta property="og:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta property="og:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta property="og:site_name" content="Toolz" />
<meta property="og:image" content="https://toolz.dev/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph Preview: Test Social Cards Before You Ship" />

<!-- X / Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta name="twitter:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta name="twitter:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta name="twitter:image" content="https://toolz.dev/og-image.png" />
<meta name="twitter:site" content="@toolz" />
<meta name="twitter:creator" content="@toolz" />

Social card previews

Approximations of each platform's layout — exact rendering changes over time.

Facebook