Por que minha visualização de link mostra a imagem antiga depois de atualizar as tags?

Cada plataforma principal armazena em cache o resultado de raspar sua página, muitas vezes por uma semana ou mais, de modo que um link que você compartilhou antes da correção continua mostrando o cartão obsoleto Atualizando as tags não invalida esse cache por conta própria Re-raspar o URL no depurador da plataforma - o Facebook Sharing Debugger, o LinkedIn Post Inspector, ou por re-compartilhamento no Slack - para forçar uma nova busca Adicionar uma string de consulta inofensiva ao URL também produz uma visualização sem cache para teste.

Preciso de OG: e Twitter: tags?

Nem sempre, mas é mais seguro incluir ambos X cai de volta para Open Graph tags quando o twitter: equivalentes estão faltando, então uma página com apenas og: title, og: description, e og: image ainda produzirá um cartão O que você não pode expressar em Open Graph é o estilo do cartão: twitter: card decide entre o banner grande e o layout de resumo compacto, e twitter: site e twitter: creator atribuem o cartão às suas contas Adicione esses três e deixe as tags og: cobrirem o resto.

Quanto tempo deve ser meu OG:TITLE e OG:DESCRIPTION?

Mantenha og: title em ou sob cerca de 60 caracteres - a maioria dos cartões truncam passado que, e cartões móveis estreitos clip mais cedo Para og: descrição os limites divergem: X mostra cerca de 110 caracteres, Facebook e LinkedIn mostrar mais perto de 155 a 200 Se você escrever para o mais apertado X limitar sua descrição lê totalmente em todos os lugares Qualquer coisa passado que não é perdido, ele é apenas escondido atrás de uma reticência, então front-load as palavras importantes.

Por que minha visualização está em branco ou mostrando apenas o url?

As causas usuais são uma og: imagem que é um caminho relativo em vez de uma URL absoluta, uma imagem servida sobre http simples, tags colocadas fora do , tags injetadas pelo JavaScript do lado do cliente que o raspador nunca executa, ou a página retornando um status não-200 ou um redirecionamento de login para o raspador Verifique se as tags aparecem no HTML bruto que seu servidor retorna - visualize a fonte em vez do inspetor do navegador, já que o inspetor mostra o DOM após a execução do JavaScript.

Essa ferramenta busca minha url para verificar as tags?

não . Ele não faz nenhuma solicitação de rede. Ele funciona a partir das tags que você digita no formulário ou cola como HTML, e tudo é analisado e renderizado no seu navegador. Essa é uma escolha deliberada de design: os navegadores não podem buscar páginas arbitrárias de terceiros por causa de COs, e um buscador do lado do servidor significaria enviar seus URLs inéditos para outra pessoa. Como nada é buscado, você pode validar páginas no localhost, preparação ou desinformação.

Posso visualizar uma página que ainda não foi publicada?

Sim, e é a principal razão para usar uma ferramenta como esta, em vez de um depurador de plataforma Os depuradores oficiais devem buscar sua URL ao vivo, então eles são inúteis para uma página que não está implantada Aqui você simplesmente cola as tags que pretende enviar - do seu modelo, do seu objeto de metadados de estrutura ou de uma compilação local - e as visualizações são renderizadas imediatamente, sem necessidade de implantação.

O que acontece se eu deixar uma etiqueta?

Os raspadores recuam e os fallbacks são imprevisíveis Sem og: title eles geralmente usam a tag , e sem og: description eles podem usar a meta description ou raspar o texto do corpo Sem og: image a maioria das plataformas mostra um cartão somente de texto, embora alguns peguem uma imagem arbitrária da página - geralmente um logotipo ou um pixel de rastreamento Sem og: url o endereço compartilhado é usado como está, o que significa que os parâmetros de rastreamento podem fragmentar suas contagens de compartilhamento Definir as tags explicitamente é a única maneira de controlar o resultado.

A marcação Open Graph ajuda minhas classificações de pesquisa?

Não diretamente. As tags Open Graph são lidas por plataformas sociais e de bate-papo, não usadas como fator de classificação pelos mecanismos de pesquisa. O que eles influenciam é a taxa de cliques em cada compartilhamento do seu link, que impulsiona o tráfego e, com o tempo, os sinais que importam. Trate-os como otimização de conversão para links compartilhados e não como uma alavanca de classificação de SEO.

A ferramenta Open Graph Preview é gratuita e privada?

Sim. É totalmente gratuito, sem nenhuma inscrição, e cada análise, validação e visualização acontecem em JavaScript dentro do seu navegador. Os títulos, URLs e links de imagem inseridos nunca são enviados a um servidor, e a ferramenta continua funcionando offline depois que a página é carregada.

Open Graph Visualização

Visualize sua aparência no Facebook, X, LinkedIn, Slack e Discord, valide seu OG: tags e copie um metabloco correto

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