Gerador de meta tags Open Graph
Crie meta tags Open Graph para as prévias de links no Facebook, LinkedIn, WhatsApp, Slack e Discord: título, descrição, imagem com tamanho e alt, tipo, URL e localidade.
URL absoluta; 1200×630 px funciona na maioria das redes.
en_US, vi_VN, fr_FR…
<meta property="og:type" content="article"> <meta property="og:title" content="My Awesome Article"> <meta property="og:description" content="A short summary shown when the link is shared."> <meta property="og:url" content="https://example.com/article"> <meta property="og:site_name" content="Example"> <meta property="og:locale" content="en_US"> <meta property="og:image" content="https://example.com/og-image.png"> <meta property="og:image:secure_url" content="https://example.com/og-image.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Article cover">
O que é Gerador de Open Graph?
Esta ferramenta gera as tags Open Graph <meta property="og:…"> que controlam a aparência de um link compartilhado no Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram e em muitos outros apps. Ela cobre og:type, título, descrição, URL, nome do site, localidade e imagem com URL segura, largura, altura e texto alternativo, e avisa quando faltam propriedades obrigatórias.
Como usar Gerador de Open Graph
- Preencha og:title, og:type, og:url e og:image (as quatro propriedades obrigatórias).
- Adicione a descrição, o nome do site, a localidade e o tamanho e o texto alternativo da imagem.
- Corrija qualquer aviso de propriedade ausente.
- Copie as tags para o <head> da página.
Quando usar Gerador de Open Graph
Use sempre que uma página for compartilhada e você quiser controlar a prévia em vez de deixar cada app adivinhar. As redes guardam as prévias em cache; depois de mudar as tags, use o depurador da plataforma (por exemplo o Sharing Debugger do Facebook) para atualizá-las. Para o X (Twitter), veja também o gerador de Twitter Card.
Como funciona Gerador de Open Graph
Cada campo preenchido vira uma tag <meta property="og:…" content="…"> com o conteúdo escapado em HTML, na ordem recomendada pelo protocolo Open Graph. Quando a URL da imagem usa https, uma tag og:image:secure_url com a mesma URL é acrescentada; largura, altura e alt da imagem só são escritos quando há uma imagem definida.
Casos de Uso Comuns
- Dar aos posts do blog uma prévia com imagem grande no LinkedIn e no Facebook.
- Definir og:locale para uma página localizada, como pt_BR.
- Acrescentar og:image:alt por acessibilidade.
- Fazer as páginas de produto mostrarem o nome e a foto do produto no WhatsApp.
Perguntas Frequentes
Qual tamanho de imagem funciona melhor?
1200×630 px (1,91:1) é bem exibido pela maioria das plataformas. Mantenha o conteúdo importante centralizado, porque alguns apps cortam para um quadrado.
Quais tags og são obrigatórias?
O protocolo exige og:title, og:type, og:image e og:url. Descrição e nome do site são opcionais, mas recomendados.
Por que o Facebook ainda mostra a imagem antiga?
As prévias ficam em cache. Faça uma nova coleta da URL no Sharing Debugger ou mude a URL da imagem.