O que é uma imagem OpenGraph

Imagens OpenGraph são imagens usadas para tags OpenGraph, que são exibidas em prévias do Twitter, Facebook e Open Graph.

As imagens OpenGraph podem ser estáticas ou dinâmicas. Isso depende se elas são geradas usando um gerador OpenGraph ou outras ferramentas.

Imagens geradas usando um gerador OpenGraph são tipicamente estáticas porque são geradas com base nos metadados que você fornece, que geralmente são estáticos. Por exemplo, se você fornecer metadados para uma postagem de blog, o gerador OpenGraph criará uma imagem OpenGraph estática baseada nesses metadados.

Imagens geradas usando outras ferramentas podem ser dinâmicas. Por exemplo, se você usar um framework de renderização do lado do servidor para gerar imagens OpenGraph, essas imagens podem ser geradas com base no comportamento do usuário, hora, clima ou outras informações dinâmicas.

Criar imagens OpenGraph usando ferramentas

Código HTML OpenGraph

<meta property="og:url" content="https://example.com/article">
<meta property="og:title" content="My Article Title">
<meta property="og:description" content="This is my article description">
<meta property="og:type" content="article">
<meta property="og:image" 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:type" content="image/png">
<meta property="og:image:alt" content="OpenGraph">

Com este código HTML, a página exibirá a imagem https://example.com/og-image.png no OpenGraph.

Efeitos de Prévia

Após criar uma imagem OG, muitos sites fornecem ferramentas online de prévia e depuração para ajudar você a diagnosticar problemas. Aqui estão algumas ferramentas comuns: