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

Cada plataforma principal armazena o resultado de raspar sua página, geralmente por uma semana ou mais, então um link que você compartilhou antes da correção continua mostrando o cartão obsoleto. A atualização das tags não invalida esse cache por conta própria. re -Raplique o URL no depurador de plataforma — o depurador de compartilhamento do Facebook, o inspetor de postagens do LinkedIn ou compartilhando novamente o Slack — para forçar uma nova busca. Adicionar uma string de consulta inofensiva ao URL também produz uma pré-visualização sem cache para testes.

Preciso de OG: e Twitter: tags?

Nem sempre, mas é mais seguro incluir ambos. x volta para abrir as tags do grafo quando faltam os equivalentes, então uma página com apenas og:title, og:description e og:image ainda produz um cartão. O que você não pode expressar no Open Graph é o cartão: Twitter:Card Decide entre o grande banner e o layout compacto de resumo, e Twitter:site e Twitter:Creator atribuem o cartão às suas contas. Adicione os três e deixe as tags OG: cobrirem o resto.

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

Mantenha OG:Título ou menos de cerca de 60 caracteres — a maioria das cartas truncam além disso e o clip das placas móveis mais cedo. Para og:description, os limites divergem: x mostra cerca de 110 personagens, o Facebook e o LinkedIn mostram mais perto de 155 a 200. Se você escrever para o limite de x mais apertado, sua descrição lê totalmente em todos os lugares. Qualquer coisa passada que não seja perdida, ela está apenas escondida atrás de uma reticência, então faça o carregamento no início das palavras importantes.

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

As causas usuais são uma OG:image que é um caminho relativo e não uma url absoluta, uma imagem servida em http simples, tags colocadas fora do , tags injetadas por JavaScript do lado do cliente que o raspador nunca executa, ou a página que retorna 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 — veja a fonte em vez do inspetor do navegador, pois 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 é o principal motivo para usar uma ferramenta como essa em vez de um depurador de plataforma. Os depuradores oficiais devem buscar seu URL ao vivo, para que sejam inúteis para uma página que não foi implantada. Aqui você simplesmente cola as tags que pretende enviar — do seu modelo, do seu objeto de estrutura de metadados ou de uma compilação local — e as pré-visualizações são renderizadas imediatamente, sem necessidade de implantação.

O que acontece se eu deixar uma etiqueta?

Os raspadores caem para trás e os reservas são imprevisíveis. Sem OG:TITLE, eles geralmente usam a tag e, sem OG:description, podem usar a meta descrição ou raspar o texto do corpo. Sem OG:Image, a maioria das plataformas mostra um cartão somente para texto, embora alguns agarrem 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 compartilhamentos. Definir as tags explicitamente é a única maneira de controlar o resultado.

A marcação de gráficos abertos ajuda na classificação de pesquisa?

não diretamente. As tags de grafos abertos 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 ação do seu link, que gera tráfego e, com o tempo, os sinais que importam. Trate-os como uma otimização de conversão para links compartilhados e não como uma alavanca de classificação de SEO.

A ferramenta de visualização do Open Graph é 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.

Abrir visualização do gráfico

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