gerador open graph

Gerador de Open Graph

Open Graph é o protocolo que a maioria das plataformas usa para montar a pré-visualização de um link. Sem essas tags, sua URL compartilhada vira texto cru e perde cliques. Aqui você gera o bloco og: completo e vê o cartão antes de publicar.

Preview do resultado de busca

exemplo.com.brGuia completo de SSR no Next.jsAprenda quando usar renderização no servidor, streaming e cache no Next.js, com exemplos práticos e armadilhas comuns de performance.

Preview do card social

Diagrama de renderização no servidor com Next.js

exemplo.com.brGuia completo de SSR no Next.jsAprenda quando usar renderização no servidor, streaming e cache no Next.js, com exemplos práticos e armadilhas comuns de performance.

HTML gerado

18 tags

<title>Guia completo de SSR no Next.js</title>
<meta name="description" content="Aprenda quando usar renderização no servidor, streaming e cache no Next.js, com exemplos práticos e armadilhas comuns de performance." />
<link rel="canonical" href="https://exemplo.com.br/blog/ssr-next-js" />
<meta name="robots" content="index, follow" />
<meta property="og:title" content="Guia completo de SSR no Next.js" />
<meta property="og:description" content="Aprenda quando usar renderização no servidor, streaming e cache no Next.js, com exemplos práticos e armadilhas comuns de performance." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://exemplo.com.br/blog/ssr-next-js" />
<meta property="og:image" content="https://exemplo.com.br/og/ssr-next-js.png" />
<meta property="og:image:alt" content="Diagrama de renderização no servidor com Next.js" />
<meta property="og:site_name" content="Exemplo" />
<meta property="og:locale" content="pt_BR" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@exemplo" />
<meta name="twitter:creator" content="@exemplo" />
<meta name="twitter:title" content="Guia completo de SSR no Next.js" />
<meta name="twitter:description" content="Aprenda quando usar renderização no servidor, streaming e cache no Next.js, com exemplos práticos e armadilhas comuns de performance." />
<meta name="twitter:image" content="https://exemplo.com.br/og/ssr-next-js.png" />

Tudo roda no navegador. Nada do que você digita é enviado a servidores, salvo em logs ou usado em analytics.

Continuar na ferramenta

Abrir ferramenta completa

Mais páginas desta ferramenta

As quatro tags Open Graph essenciais

og:title, og:description, og:image e og:url formam o núcleo de qualquer cartão. og:type (website, article, product) ajuda a plataforma a entender o objeto. og:image deve idealmente ter 1200×630 pixels e ser servida por https para não ser bloqueada.
Plataformas fazem cache agressivo dessas tags. Se você atualizar a imagem, pode precisar forçar uma nova leitura nas ferramentas de depuração de cada rede para ver a mudança refletida.

Exemplo de bloco Open Graph

Artigo de blog

Entrada: type=article, image=https://site.com/og.png
Saída esperada: <meta property="og:type" content="article" />

og:type=article sinaliza um conteúdo editorial, não a home do site.

Imagem segura

Entrada: image=http://site.com/og.png
Saída esperada: Aviso: prefira https

Imagens em http podem ser silenciosamente descartadas por algumas plataformas.

FAQ da ferramenta completa

Qual a diferença entre a tag <title> e o <h1>?

O <title> vive no <head> e define o texto da aba do navegador e o título do snippet de busca; é um sinal de página inteira. O <h1> é o cabeçalho visível dentro do conteúdo. Eles podem ter textos diferentes: o title costuma ser mais conciso e otimizado para a SERP, enquanto o h1 fala diretamente com quem já está na página. Não confunda os dois nem repita exatamente o mesmo texto sem necessidade.

A meta keywords ainda ajuda no SEO?

O que é a tag canonical e quando devo usá-la?

Qual a diferença entre noindex, nofollow e o robots.txt?

Por que Open Graph e Twitter Card são conjuntos de tags separados?

Existe um tamanho ideal para title e meta description?

Gerar essas meta tags melhora meu ranking automaticamente?

Os dados que eu digito aqui são enviados para algum servidor?

Perguntas frequentes

Qual o tamanho ideal da og:image?

A recomendação mais segura é 1200×630 pixels (proporção 1.91:1), que funciona bem no card grande da maioria das plataformas. Imagens muito pequenas podem cair no formato de miniatura quadrada e perder destaque.

Open Graph funciona no X (Twitter)?

Sim. O X lê as tags twitter:, mas faz fallback para Open Graph quando elas faltam. Por isso um Open Graph completo já cobre a maioria dos casos, e você só adiciona tags twitter: para ajustes específicos.