Tags Open Graph
Técnico e InfraestruturaMeta tags que controlam como o conteúdo aparece quando compartilhado em redes sociais como o Facebook.
Definição
Tags Open Graph (OG) são [meta tags](/glossary/meta-tags) HTML colocadas na seção `<head>` de uma página web que controlam como essa página aparece quando sua URL é compartilhada em plataformas de mídia social, aplicativos de mensagens e outros serviços que geram pré-visualizações de links. O protocolo foi originalmente criado pelo Facebook em 2010 e desde então se tornou o padrão universal para pré-visualizações de links em toda a web. As tags OG definem quatro propriedades principais: `og:title` (o título exibido na pré-visualização), `og:description` (o texto resumo), `og:image` (a miniatura de pré-visualização) e `og:url` (o link canônico). Propriedades adicionais como `og:type`, `og:site_name` e `og:locale` fornecem contexto adicional. Sem tags OG, as plataformas tentam adivinhar o que exibir analisando a página, o que frequentemente produz imagens quebradas, texto truncado ou conteúdo irrelevante.
Por Que É Importante
Todo link compartilhado em mídias sociais gera um cartão de pré-visualização. Esse cartão é a primeira e frequentemente a única coisa que as pessoas veem antes de decidir se clicam. Uma imagem OG bem configurada, um título claro e uma descrição convincente podem multiplicar as taxas de clique comparadas a uma pré-visualização genérica ou ausente. Para editores que distribuem [flipbooks](/glossary/flipbook) através de canais sociais, o cartão de pré-visualização funciona como um anúncio em miniatura do conteúdo. As tags OG também afetam como os links aparecem em aplicativos de mensagens como WhatsApp, Slack e iMessage, o que significa que influenciam o comportamento de cliques muito além dos feeds de mídias sociais.
Como Funciona no FlipLink
O recurso de [SEO e Pré-visualizações Sociais](/features/seo-and-social-previews) do FlipLink permite configurar tags OG para cada publicação. Você define um título personalizado, uma descrição e uma imagem de pré-visualização através das configurações da publicação, e o FlipLink gera automaticamente as meta tags `og:title`, `og:description`, `og:image`, `og:url` e `og:type` corretas. Isso significa que todo link de [flipbook](/glossary/flipbook) compartilhado exibe um cartão de pré-visualização polido e com a marca, sem exigir nenhuma edição de HTML. A imagem OG pode ser a capa do flipbook ou um gráfico personalizado projetado para compartilhamento social.
Lista de Verificação
Siga estes passos para configurar tags OG corretamente para máximo impacto no compartilhamento social:
1. **Defina og:title** - Mantenha abaixo de 60 caracteres. Use um título descritivo que inclua o tópico do conteúdo, não apenas o nome da marca. Exemplo: "Catálogo Coleção Primavera | SuaMarca" em vez de apenas "SuaMarca."
2. **Escreva og:description** - Mire em 120-155 caracteres. Inclua uma proposta de valor ou call-to-action. Descreva o que o leitor encontrará dentro do flipbook.
3. **Escolha og:image** - Use uma imagem de pelo menos 1200x630 pixels. A capa do flipbook funciona bem, mas um gráfico social personalizado com texto sobreposto pode ter melhor desempenho. Evite imagens com texto muito pequeno, pois são exibidas como miniaturas.
4. **Verifique og:url** - Este deve ser a [URL canônica](/glossary/canonical-url) da publicação. Se seu flipbook é acessível através de múltiplas URLs, og:url deve apontar para a principal.
5. **Defina og:type** - Use "website" para páginas de destino e "article" para publicações individuais ou posts de blog.
6. **Teste antes de compartilhar** - Use o Sharing Debugger do Facebook, o Card Validator do Twitter ou o Post Inspector do LinkedIn para visualizar como seu link aparecerá antes de compartilhá-lo publicamente.
Perguntas Frequentes
**O que acontece se eu não definir tags OG?**
A plataforma social tentará analisar sua página e adivinhar o título, descrição e imagem. Os resultados são imprevisíveis: você pode obter uma imagem aleatória da página, um título HTML truncado ou nenhuma pré-visualização. Definir tags OG explícitas remove essa incerteza completamente.
**As tags OG afetam o ranking SEO?**
As tags OG não influenciam diretamente o ranking nos mecanismos de busca. No entanto, afetam significativamente as taxas de clique em links compartilhados, o que gera tráfego. Mais tráfego e engajamento podem indiretamente melhorar sua visibilidade de busca ao longo do tempo.
**As tags OG são iguais às Twitter Cards?**
O Twitter tem suas próprias meta tags (`twitter:card`, `twitter:title`, `twitter:image`), mas recorre às tags OG quando tags específicas do Twitter não estão presentes. A maioria das plataformas, incluindo LinkedIn, WhatsApp, Slack e iMessage, usam tags OG como fonte primária para pré-visualizações de links.
Detalhes Técnicos
As tags OG seguem uma estrutura HTML direta dentro do elemento `<head>`:
- `og:title` - O título exibido na pré-visualização. Deve diferir da tag `<title>` da página se o título inclui breadcrumbs de navegação ou sufixos que não fazem sentido no contexto social.
- `og:description` - Um resumo conciso. Diferente da meta description usada para mecanismos de busca, a descrição OG deve ser otimizada para o contexto social: mais curta, mais direta e orientada à ação.
- `og:image` - Uma URL absoluta para o arquivo de imagem. O Facebook recomenda 1200x630 pixels. Imagens menores que 200x200 pixels podem não renderizar em algumas plataformas.
- `og:type` - Categoriza o conteúdo. Valores comuns são "website", "article", "product" e "video.other".
- `og:url` - A URL canônica. Isso previne cartões de pré-visualização duplicados quando o mesmo conteúdo é acessível de múltiplas URLs.
- `og:locale` - Especifica o idioma do conteúdo (ex: "en_US", "pt_BR"). Útil para publicações multilíngues.
Quando uma URL é compartilhada, o crawler da plataforma busca a página, lê as tags OG do HTML e armazena o resultado em cache. Por isso mudanças nas tags OG não têm efeito imediato em plataformas que já armazenaram a pré-visualização antiga. Use a ferramenta de debug de cada plataforma para forçar uma nova análise após atualizar as tags.
Termos Relacionados
Gateway de Pagamento
Um serviço que processa pagamentos online, como o Stripe, permitindo a venda de documentos pelo FlipLink.
PDF.js
A biblioteca JavaScript de código aberto da Mozilla que renderiza arquivos PDF diretamente nos navegadores.
Progressive Web App (PWA)
Uma aplicação web que funciona offline e pode ser instalada em dispositivos como um app nativo.
Design Responsivo
Adaptação automática do layout e conteúdo para funcionar bem em telas de todos os tamanhos e dispositivos.
Incorporação Responsiva
Um código de incorporação que ajusta automaticamente o tamanho do flipbook para caber em qualquer contêiner ou largura de tela.
Recursos Relacionados
Disponível em outros idiomas
Pronto para Transformar
Seus PDFs?
Junte-se a milhares de empresas que usam o FlipLink para criar conteúdo envolvente e interativo a partir de seus PDFs. Comece grátis — sem cartão de crédito.