⚠AvisoImagem

Imagem OG sem HTTPS — Problemas de segurança e compatibilidade

Algumas plataformas podem bloquear imagens sem HTTPS. Use HTTPS na sua imagem OG.

Qual é o problema?

A URL da sua og:image usa HTTP em vez de HTTPS. Na web atual, preocupada com segurança, muitas plataformas bloqueiam ou recusam carregar imagens servidas por conexões HTTP inseguras.

Por que HTTPS importa para imagens OG

Compatibilidade com plataformas

Facebook — Prefere fortemente HTTPS; imagens HTTP podem não aparecer nas pré-visualizações
Twitter/X — Exige HTTPS para imagens de cards
LinkedIn — Pode bloquear imagens HTTP
Discord — Mostra aviso de conteúdo misto
Slack — Pode não expandir (unfurl) imagens HTTP

Segurança

Imagens HTTP podem ser interceptadas e modificadas em ataques man-in-the-middle
Navegadores exibem avisos de “conteúdo misto” quando páginas HTTPS carregam recursos HTTP
Os usuários prestam cada vez mais atenção a indicadores de segurança

SEO

O Google favorece sites e recursos em HTTPS
Problemas de conteúdo misto podem prejudicar o seu ranking

Como corrigir

Basta mudar a URL da imagem de HTTP para HTTPS:

<!-- Before -->
<meta property="og:image" content="http://yoursite.com/og-image.jpg" />

<!-- After -->
<meta property="og:image" content="https://yoursite.com/og-image.jpg" />

E se o servidor não suportar HTTPS?

Obtenha um certificado SSL grátis — Use o Let’s Encrypt para um certificado SSL grátis e automatizado
Use um CDN — Serviços como Cloudflare, Vercel ou Netlify oferecem HTTPS grátis
Use um serviço de hospedagem de imagens — Plataformas como Cloudinary, Imgix ou AWS S3 servem imagens em HTTPS por padrão
Configure redirecionamentos — Faça o servidor redirecionar HTTP para HTTPS

Dica extra: use og:image:secure_url

Para máxima compatibilidade, você também pode especificar a URL HTTPS de forma explícita:

<meta property="og:image" content="https://yoursite.com/og-image.jpg" />
<meta property="og:image:secure_url" content="https://yoursite.com/og-image.jpg" />

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"