ErroOpen Graph

og:description ausente — Por que toda página precisa de uma

A tag og:description fornece um resumo do conteúdo da página para as plataformas sociais.

O que é og:description?

A meta tag og:description fornece um resumo breve do conteúdo da página. Quando alguém compartilha o seu link nas redes sociais, essa descrição aparece abaixo do título, dando contexto sobre o que o usuário vai encontrar se clicar.

Por que é crítico?

Sem um og:description:

  • O Facebook pode tentar extrair texto da página, muitas vezes gerando trechos aleatórios ou irrelevantes
  • O LinkedIn pode não mostrar descrição nenhuma
  • Discord e Slack vão exibir um link seco ou conteúdo irrelevante da página
  • O WhatsApp vai mostrar uma pré-visualização mínima ou vazia

A descrição é o seu pitch de elevador — é o segundo elemento mais importante (depois do título) para convencer o usuário a clicar no seu link.

Como fica

❌ Sem og:description

example.com

My Website Title

No description available

✅ Com og:description

example.com

My Website Title

Learn how to optimize your Open Graph tags for better social media presence.

Como corrigir

Adicione a seguinte tag dentro do seu <head>:

<meta property="og:description" content="A concise and compelling summary of your page content. Aim for 110-160 characters." />

Boas práticas

  1. Mire em 110-160 caracteres — Longa o bastante para informar, curta o bastante para evitar truncamento
  2. Complemente o título — Não repita; expanda com detalhes adicionais
  3. Inclua uma chamada para ação — “Aprenda como…”, “Descubra por que…”, “Comece com…”
  4. Seja preciso — Descrições enganosas prejudicam a confiança e aumentam a taxa de rejeição
  5. Use de forma diferente de <meta name="description"> — A descrição OG pode ser mais casual e amigável para redes sociais

Exemplos

Bom:

<meta property="og:description" content="Learn how to implement Open Graph tags correctly. Step-by-step guide with examples for Next.js, Astro, and WordPress." />

Ruim:

<meta property="og:description" content="Welcome to our website." />

Implementação por framework

Next.js (App Router):

export const metadata = {
  openGraph: {
    description: 'Your page description for social sharing',
  },
}

Astro:

<meta property="og:description" content="Your page description for social sharing" />

Artigos relacionados