Quando compartilhamos um link no WhatsApp, Facebook ou Slack, esperamos ver uma prĆ©via atraente com tĆ­tulo, descriĆ§Ć£o e imagem. No entanto, sem a configuraĆ§Ć£o correta das Open Graph Tags, essas plataformas exibem apenas uma URL seca ou informaƧƵes genĆ©ricas.

Este artigo explica como configurar essas tags no seu projeto Angular para garantir que sua aplicaĆ§Ć£o tenha uma presenƧa visual impecĆ”vel.

1. O que sĆ£o Open Graph Tags? Link para o cabeƧalho

Criadas originalmente pelo Facebook, as tags Open Graph (OG) sĆ£o meta tags inseridas no <head> do HTML que permitem que qualquer pĆ”gina da web se torne um ā€œobjeto ricoā€ em redes sociais. Elas dizem aos rastreadores (crawlers) exatamente o que exibir.

2. ImplementaĆ§Ć£o TĆ©cnica no Angular Link para o cabeƧalho

Como o Angular Ʃ uma SPA (Single Page Application), a forma mais direta de garantir que os robƓs de redes sociais leiam as informaƧƵes Ʃ inserindo-as diretamente no src/index.html.

As Tags Essenciais Link para o cabeƧalho

Copie e personalize o bloco abaixo dentro da tag <head>:

<title>Sua aplicaĆ§Ć£o - DescriĆ§Ć£o da aplicaĆ§Ć£o</title>

<meta property="og:type" content="website">
<meta property="og:url" content="https://seudominio/">
<meta property="og:title" content="Sua aplicaĆ§Ć£o - Breve descriĆ§Ć£o">
<meta property="og:description" content="Sua aplicaĆ§Ć£o - Breve descriĆ§Ć£o sobre compartilhar">
<meta property="og:image" content="https://seudominio/assets/banner-share.png">

<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Sua aplicaĆ§Ć£o">
<meta property="twitter:image" content="https://seudominio/assets/banner-share.png">

3. Requisitos da Imagem de Compartilhamento Link para o cabeƧalho

A imagem (og:image) Ć© o elemento que mais converte cliques. Para melhores resultados:

  • DimensƵes: 1200 x 630 pixels (proporĆ§Ć£o 1.91:1).
  • Formato: PNG ou JPEG.
  • URL: Deve ser um link absoluto (incluindo https://). O WhatsApp nĆ£o reconhece caminhos relativos como /assets/img.png.

4. Ferramenta de ValidaĆ§Ć£o: Social Share Preview Link para o cabeƧalho

Antes de publicar seu site ou enviar o link para grupos, vocĆŖ deve validar como as tags estĆ£o sendo interpretadas. A ferramenta SocialSharePreview.com Ć© a melhor aliada para isso.

Como usar: Link para o cabeƧalho

  1. Cole a URL do seu site (jĆ” hospedado no Firebase) na barra de busca.

  2. A ferramenta gerarĆ” uma simulaĆ§Ć£o em tempo real de como o link aparecerĆ” no WhatsApp, Facebook, Twitter, LinkedIn e Google.

  3. Se algo estiver errado (como a imagem nĆ£o carregando), vocĆŖ saberĆ” imediatamente sem precisar ā€œqueimarā€ a primeira impressĆ£o com seus usuĆ”rios reais.

5. Como Limpar o Cache das Redes Sociais Link para o cabeƧalho

ApĆ³s fazer o deploy de uma correĆ§Ć£o nas tags, as redes sociais podem continuar exibindo a versĆ£o antiga por causa do cache. Para forƧar a atualizaĆ§Ć£o:

  1. Facebook Sharing Debugger: Cole sua URL e clique em ā€œScrape Againā€.

  2. WhatsApp: Uma tĆ©cnica comum Ć© adicionar um parĆ¢metro irrelevante ao final da URL (ex: seudominio/?v=2) para forƧar o WhatsApp a ler o site novamente.

ConclusĆ£o Link para o cabeƧalho

Configurar as Open Graph Tags e validĆ”-las em ferramentas como o Social Share Preview Ć© um passo pequeno no desenvolvimento, mas gigante no marketing do seu produto. Com sua aplicaĆ§Ć£o configurada, cada compartilhamento se torna um convite visual irresistĆ­vel.