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

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

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

Не всегда, но безопаснее включить и то, и другое. X возвращается к тегам Open Graph, когда отсутствует твиттер: эквиваленты, поэтому страница только с og:title, og:description, и og:image все равно произведет карту. Что вы не можете выразить в Open Graph, так это стиль карты: 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: изображение, которое является относительным путем, а не абсолютным URL-адресом, изображение, обслуживаемое по простому http, теги, размещенные вне , теги, введенные JavaScript на стороне клиента, которые скребок никогда не запускается, или страница, возвращающая статус не 200 или перенаправление входа в систему на скребок. Проверьте, чтобы теги появлялись в необработанном HTML, который возвращает ваш сервер - просмотр источника, а не инспектора браузера, поскольку инспектор показывает DOM после запуска JavaScript.

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

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

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

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

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

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

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

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

Является ли инструмент Open Graph Preview бесплатным и приватным?

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

Open Graph Предварительный просмотр

Предварительный просмотр того, как будет выглядеть ваша ссылка на 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