Todas as Ferramentas|100% no Cliente

Guia Técnico de Open Graph e Cartões de Redes Sociais

Guia completo sobre meta tags Open Graph, formato Twitter Cards, proporções ideais de imagem e otimização de compartilhamento.

Target: toolsaa.com
Caracteres Título
58 charsOpt: 50-60
Caracteres Descrição
171 charsOpt: 120-160
Proporção da Imagem1200 x 630 (1.91:1)
Formato do Cartãosummary_large_image
Live Visual Render
OG Previewtoolsaa.com

Open Graph & Social Media Card Preview Generator | ToolsAA

Visually preview Open Graph and Twitter/X social share cards in real-time. Optimize title lengths, inspect image aspect ratios, and export production-ready HTML meta tags.

Meta Tags HTML Geradas
<!-- HTML Meta Tags -->
<title>Open Graph & Social Media Card Preview Generator | ToolsAA</title>
<meta name="description" content="Visually preview Open Graph and Twitter/X social share cards in real-time. Optimize title lengths, inspect image aspect ratios, and export production-ready HTML meta tags.">

<!-- Facebook Meta Tags (Open Graph) -->
<meta property="og:url" content="https://toolsaa.com/tools/open-graph-preview">
<meta property="og:type" content="website">
<meta property="og:title" content="Open Graph & Social Media Card Preview Generator | ToolsAA">
<meta property="og:description" content="Visually preview Open Graph and Twitter/X social share cards in real-time. Optimize title lengths, inspect image aspect ratios, and export production-ready HTML meta tags.">
<meta property="og:image" content="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&h=630&fit=crop&q=80">
<meta property="og:site_name" content="ToolsAA Universal Developer Hub">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="toolsaa.com">
<meta property="twitter:url" content="https://toolsaa.com/tools/open-graph-preview">
<meta name="twitter:title" content="Open Graph & Social Media Card Preview Generator | ToolsAA">
<meta name="twitter:description" content="Visually preview Open Graph and Twitter/X social share cards in real-time. Optimize title lengths, inspect image aspect ratios, and export production-ready HTML meta tags.">
<meta name="twitter:image" content="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&h=630&fit=crop&q=80">

Private Local Composition

Draft your upcoming product launches and unreleased blog posts locally without prematurely notifying web crawlers or scrapers.

Dual Spec Compatibility

Simultaneously outputs Open Graph (`og:*`) tags and Twitter Card (`twitter:*`) tags tailored for seamless fallback on all platforms.

Truncation & Ratio Guard

Monitors optimal character limits for mobile timelines and guides exact 1.91:1 high-resolution asset preparations.

Referência técnica e guia de arquitetura

Guia Técnico de Open Graph e Cartões de Redes Sociais — Guia de referência

Guia completo sobre meta tags Open Graph, formato Twitter Cards, proporções ideais de imagem e otimização de compartilhamento.

Parâmetros principais e controles

og:titlestring (máx 60-70 car.)

Título do conteúdo nos feeds sociais.

og:descriptionstring (máx 155-200 car.)

Resumo explicativo exibido abaixo do título.

og:imageurl (1200x630px)

Endereço absoluto da imagem de capa.

og:urlurl

Link canônico da publicação.

Dicas profissionais e melhores práticas

Use imagens com 1200x630 pixels para enquadramento perfeito em todas as redes.

Defina sempre twitter:card como 'summary_large_image' para cartões visuais amplos.

Nunca use caminhos relativos em og:image; utilize URLs absolutas seguras.

Problemas comuns e solução de problemas

Verifique se a URL da imagem é pública e usa protocolo HTTPS.

Utilize o Depurador de Compartilhamento do Facebook para forçar a atualização do cache.

Perguntas frequentes (FAQ)

O que é o Open Graph Protocol?▼

É uma especificação criada pelo Facebook para enriquecer links compartilhados.

Qual a diferença para os Twitter Cards?▼

O Twitter tem tags próprias, mas utiliza as tags Open Graph como fallback.

Qual a melhor resolução de imagem?▼

1200 x 630 pixels na proporção 1,91:1.

Ajuda no posicionamento no Google?▼

Gera mais tráfego qualificado e melhora as taxas de clique em redes sociais.

Ferramentas e utilitários relacionados

Todas as ferramentas →