ℹInfoImagem

og:image:alt ausente — Acessibilidade para imagens em redes sociais

Adicionar texto alternativo à imagem OG melhora a acessibilidade e o SEO.

O que é og:image:alt?

A meta tag og:image:alt fornece texto alternativo para a sua imagem Open Graph. Ela descreve o conteúdo da imagem para usuários que não podem vê-la — seja por deficiência visual, conexões lentas ou links de imagem quebrados.

Por que isso importa?

Acessibilidade

Leitores de tela nas plataformas sociais usam esse texto para descrever a imagem a usuários com deficiência visual
Estima-se que mais de 2 bilhões de pessoas no mundo tenham alguma forma de deficiência visual
Plataformas como Facebook e Twitter usam alt text nos recursos de acessibilidade

Benefícios de SEO

Os mecanismos de busca usam o alt text para entender o conteúdo da imagem
Contribui para uma melhor indexação das suas páginas
O Google considera a acessibilidade como um sinal de ranking

Conteúdo de fallback

Quando a imagem falha ao carregar, o alt text é exibido no lugar
Oferece contexto mesmo sem o visual

Como corrigir

<meta property="og:image:alt" content="Screenshot of OpenGraph.to showing a website analysis with score of 95/100" />

Boas práticas para alt text de imagem OG

Seja descritivo, mas conciso — Mire em 1-2 frases (menos de 125 caracteres é ideal)
Descreva o que está na imagem — Não do que a página trata, e sim o que a imagem mostra
Não comece com “Imagem de” ou “Foto de” — Leitores de tela já anunciam que é uma imagem
Inclua detalhes relevantes — Mencione texto mostrado na imagem e elementos visuais principais
Evite keyword stuffing — Escreva para humanos, não para mecanismos de busca

Exemplos

Bom:

<meta property="og:image:alt" content="Dashboard showing website performance metrics with a 95/100 score" />

Ruim:

<meta property="og:image:alt" content="image" />
<meta property="og:image:alt" content="og image website seo open graph meta tags social media" />

Implementação por framework

Next.js (App Router):

export const metadata = {
  openGraph: {
    images: [{
      url: 'https://yoursite.com/og-image.jpg',
      width: 1200,
      height: 630,
      alt: 'Description of the image content',
    }],
  },
}

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 poderia ser mais longa

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

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.

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"