Open Graph: como sua página aparece nas redes sociais

Configure as meta tags Open Graph para controlar o título, a imagem e o texto que aparecem quando alguém compartilha sua página.

Você já deve ter notado que, ao compartilhar um link no Facebook, WhatsApp, LinkedIn ou Twitter, a plataforma automaticamente gera um "cartão" com uma imagem, um título e uma descrição da página. Isso não acontece por mágica! É o resultado das meta tags Open Graph.

O protocolo Open Graph (OGP) permite que você controle exatamente como sua página web é exibida quando compartilhada em redes sociais. Ele transforma suas páginas web em "objetos ricos" em um grafo social.

O que são as meta tags Open Graph?

São meta tags especiais que você coloca dentro do <head> do seu documento HTML. Elas usam o atributo property em vez de name para indicar que pertencem ao protocolo Open Graph.

Estrutura básica:

<meta property="og:propriedade" content="valor">

Meta tags Open Graph essenciais

Existem muitas propriedades Open Graph, mas algumas são absolutamente essenciais para garantir uma boa exibição nas redes sociais:

1. og:title

  • Função: Define o título que aparecerá no cartão de compartilhamento.
  • Importância: Deve ser conciso e atraente. Se não for definido, a rede social pode usar o <title> da página, mas og:title permite um controle mais específico.
<meta property="og:title" content="Conheça o Novo Smartphone X: Inovação e Tecnologia">

2. og:type

  • Função: Define o tipo de objeto que você está compartilhando (ex: website, article, video.movie, book).
  • Importância: Ajuda a rede social a entender o contexto do conteúdo e pode influenciar como ele é exibido.
<meta property="og:type" content="article">
<!-- Ou para uma página inicial: -->
<meta property="og:type" content="website">

3. og:url

  • Função: Define a URL canônica (a URL preferencial) da página.
  • Importância: Garante que todos os "curtidas" e "compartilhamentos" sejam atribuídos à mesma URL, mesmo que a página possa ser acessada por URLs diferentes.
<meta property="og:url" content="https://www.meusite.com.br/blog/novo-smartphone-x">

4. og:image

  • Função: Define a URL de uma imagem que será exibida no cartão de compartilhamento.
  • Importância: Uma imagem atraente é crucial para chamar a atenção e aumentar o engajamento.
  • Recomendações:
    • Use imagens de alta qualidade.
    • Tamanho recomendado: pelo menos 1200x630 pixels para uma boa exibição.
    • Proporção: 1.91:1 (largura para altura).
<meta property="og:image" content="https://www.meusite.com.br/imagens/smartphone-x-capa.jpg">

5. og:description

  • Função: Define a descrição que aparecerá no cartão de compartilhamento.
  • Importância: Complementa o título e a imagem, fornecendo um resumo persuasivo do conteúdo. Se não for definido, a rede social pode usar a meta tag description padrão da página.
<meta property="og:description" content="Descubra todos os detalhes do lançamento do Smartphone X, com câmera avançada e bateria de longa duração.">

Exemplo completo de Open Graph

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meu Artigo Incrível</title>
  <meta name="description" content="Um resumo curto e direto para o Google.">

  <!-- Meta Tags Open Graph para Redes Sociais -->
  <meta property="og:title" content="Como Criar um Site Responsivo em 5 Passos Simples">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://www.meublog.com/artigos/site-responsivo">
  <meta property="og:image" content="https://www.meublog.com/imagens/capa-responsivo.jpg">
  <meta property="og:description" content="Aprenda o passo a passo para desenvolver um site que se adapta perfeitamente a qualquer tela, do celular ao desktop.">
  <meta property="og:locale" content="pt_BR"> <!-- Opcional: idioma do conteúdo -->
  <meta property="og:site_name" content="Meu Blog de Tecnologia"> <!-- Opcional: nome do site -->

</head>
<body>
  <h1>Conteúdo do Artigo</h1>
  <p>...</p>
</body>
</html>

Outras meta tags sociais (Twitter Cards)

Além do Open Graph, o Twitter tem seu próprio conjunto de meta tags, chamadas Twitter Cards. Embora o Twitter geralmente consiga interpretar as tags Open Graph, é uma boa prática incluir as Twitter Cards para um controle mais preciso na plataforma.

Twitter Cards essenciais:

  • twitter:card: O tipo de cartão (ex: summary, summary_large_image).
  • twitter:site: O @username do Twitter do site.
  • twitter:creator: O @username do Twitter do criador do conteúdo.
  • twitter:title: Título do cartão (pode ser o mesmo que og:title).
  • twitter:description: Descrição do cartão (pode ser o mesmo que og:description).
  • twitter:image: URL da imagem (pode ser o mesmo que og:image).
<!-- Exemplo de Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@meublogtech">
<meta name="twitter:creator" content="@joaosilva_dev">
<meta name="twitter:title" content="Como Criar um Site Responsivo em 5 Passos Simples">
<meta name="twitter:description" content="Aprenda o passo a passo para desenvolver um site que se adapta perfeitamente a qualquer tela, do celular ao desktop.">
<meta name="twitter:image" content="https://www.meublog.com/imagens/capa-responsivo.jpg">

Resumindo

  • As meta tags Open Graph (OGP) controlam como sua página aparece quando compartilhada em redes sociais.
  • Elas usam o atributo property (ex: og:title, og:image).
  • Essenciais:
    • og:title: Título do compartilhamento.
    • og:type: Tipo de conteúdo (website, article, etc.).
    • og:url: URL canônica da página.
    • og:image: Imagem para o compartilhamento (muito importante!).
    • og:description: Descrição do compartilhamento.
  • Twitter Cards: Meta tags específicas para o Twitter, que oferecem controle adicional na plataforma.

Configurar corretamente essas meta tags é fundamental para garantir que sua página tenha uma boa apresentação e gere mais engajamento quando compartilhada nas redes sociais.