ℹInfoOpen Graph

og:description poderia ser mais longa — Aproveite o espaço da pré-visualização social

Você tem espaço para uma descrição mais detalhada e aumentar o engajamento.

Qual é o problema?

Sua og:description tem entre 50 e 70 caracteres. Embora não seja criticamente curta, você está deixando espaço valioso sem uso. As plataformas sociais dão espaço para um argumento bem mais persuasivo.

Por que descrições mais longas performam melhor

As pré-visualizações de links em redes sociais são mini anúncios do seu conteúdo. Uma descrição de 50 caracteres é como um outdoor com metade do texto faltando — você paga pelo espaço, mas não o usa.

Com 110-160 caracteres, você pode:

Explicar do que o conteúdo trata
Destacar por que isso importa
Incluir uma chamada para ação

Como melhorar

<!-- Could be longer (60 chars) -->
<meta property="og:description" content="A guide to improving your website's social media tags." />

<!-- Better (140 chars) -->
<meta property="og:description" content="Step-by-step guide to Open Graph tags that make your links stand out on social media. Includes examples for React, Next.js, and Astro." />

Estratégias para expandir

Adicione detalhes — Números, frameworks e ferramentas mencionadas
Inclua o benefício — O que o leitor vai ganhar?
Mencione o formato — “Tutorial em vídeo”, “Ferramenta grátis”, “Cola rápida”
Adicione prova social — “Usado por mais de 10.000 desenvolvedores”
Gere curiosidade — “O erro nº 1 que a maioria dos devs comete com tags OG”

Verifique suas etiquetas Open Graph

Artigos relacionados

og:image quebrada

A URL de og:image não retorna uma imagem válida. As plataformas sociais mostrarão uma pré-visualização quebrada ou ausente.

URL canônica diferente da URL da página

A URL canônica aponta para uma URL diferente da página atual.

Charset não é a primeira meta tag

A declaração de charset deve ser o primeiro elemento dentro de <head>.

og:description contém uma URL

A og:description deve ser um resumo legível, não uma URL.

Keyword stuffing em og:description

Repetir as mesmas palavras em excesso na descrição parece spam.

og:description idêntica a og:title

A og:description deve complementar o título, não duplicá-lo.

Servidor MCP do OpenGraph

Inspecione tags OG direto do seu editor

O servidor MCP do OpenGraph permite inspecionar e analisar meta tags Open Graph diretamente do seu editor com IA ou assistente. Ele oferece duas ferramentas:

inspect_og— Obter e pontuar tags OG de qualquer URL
suggest_og_tags— Gerar HTML de meta tags recomendadas

Adicione o servidor ao arquivo .cursor/mcp.json do seu projeto:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Reinicie o Cursor depois de adicionar a configuração.

Adicione ao seu arquivo .vscode/mcp.json (requer extensão GitHub Copilot):

{
  "servers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Certifique-se de ter o GitHub Copilot com suporte a MCP habilitado.

Adicione ao seu arquivo claude_desktop_config.json:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

O arquivo de configuração fica em ~/Library/Application Support/Claude/claude_desktop_config.json no macOS ou %APPDATA%\Claude\claude_desktop_config.json no Windows.

Adicione ao seu arquivo ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Reinicie o Windsurf depois de modificar a configuração.

Adicione ao seu settings.json do Zed em context_servers:

{
  "context_servers": {
    "opengraph": {
      "command": {
        "path": "npx",
        "args": ["-y", "opengraph-mcp"]
      }
    }
  }
}

Abra as configurações com Cmd+, e adicione a configuração.

Exemplos de uso

▶"Inspecione as tags OG de github.com"

▶"Sugira meta tags OG para o meu site https://example.com"

▶"Verifique se o meu blog tem etiquetas Open Graph corretas"