O que é Imagem OpenGraph

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

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 com base 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, tempo, 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="Título do Meu Artigo">
<meta property="og:description" content="Esta é a descrição do meu artigo">
<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é-visualização

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