Qual tamanho de imagem devo usar para Open Graph?

O Facebook recomenda imagens de pelo menos 1200 x 630 pixels para exibicao ideal em dispositivos de alta resolucao. O tamanho minimo recomendado e 600 x 315 pixels. Imagens menores que 200 x 200 pixels podem nao ser exibidas. Para cards Twitter summary_large_image, o tamanho recomendado e 1200 x 628 pixels com proporcao de 2:1. Para cards summary, use uma imagem quadrada de pelo menos 144 x 144 pixels. Mantenha o tamanho do arquivo abaixo de 5 MB para Facebook e 5 MB para Twitter. Use formatos JPEG, PNG, GIF ou WebP.

Ferramenta de Visualizacao Open Graph - Ferramenta Online

Q: O que sao tags Open Graph?

Tags Open Graph (OG) sao meta tags HTML que controlam como uma URL e exibida quando compartilhada em plataformas de midia social como Facebook, LinkedIn e outras. Elas foram introduzidas pelo Facebook em 2010 e se tornaram o padrao para metadados de compartilhamento social. As quatro tags OG obrigatorias sao og:title (o titulo da pagina), og:type (o tipo de conteudo, geralmente 'website' ou 'article'), og:image (a URL da imagem de preview) e og:url (a URL canonica). Tags adicionais como og:description e og:site_name fornecem mais contexto.

Q: Por que as tags Open Graph sao importantes?

Sem tags OG, as plataformas de midia social adivinham qual titulo, descricao e imagem usar quando alguem compartilha sua URL. Isso frequentemente resulta em informacoes incorretas ou ausentes, imagens cortadas ou texto generico que nao incentiva cliques. Tags OG configuradas adequadamente dao controle total sobre sua aparencia nas midias sociais, levando a maiores taxas de cliques, mais engajamento e uma aparencia profissional quando seu conteudo e compartilhado. Elas sao essenciais para marketing de conteudo, consistencia de marca e SEO social.

Q: O que e a meta tag twitter:card?

A meta tag twitter:card informa ao Twitter como exibir seu conteudo quando compartilhado. Existem dois tipos principais de card: 'summary' mostra uma pequena imagem quadrada com titulo e descricao, enquanto 'summary_large_image' mostra uma grande imagem retangular acima do titulo e descricao. O Twitter tambem suporta tags OG como fallback, entao se twitter:title nao estiver definido, o Twitter usara og:title em seu lugar. Definir o tipo de card e a tag minima obrigatoria especifica do Twitter; todas as outras tags do Twitter podem usar fallback para seus equivalentes OG.

Q: Como depuro tags Open Graph?

O Facebook fornece a ferramenta Sharing Debugger (developers.facebook.com/tools/debug) que mostra exatamente como o Facebook analisa suas tags OG e como sera a visualizacao. Ela tambem permite reprocessar a URL para atualizar o cache do Facebook. O Twitter fornece o Card Validator (cards-dev.twitter.com/validator) para testar marcacao de Twitter Card. O LinkedIn tem sua ferramenta Post Inspector (linkedin.com/post-inspector). Sempre teste suas tags OG com essas ferramentas antes de lancar uma campanha de marketing para garantir que as visualizacoes estejam corretas em todas as plataformas.

Insira suas meta tags Open Graph e Twitter Card para visualizar como sua pagina aparecera quando compartilhada no Facebook e Twitter.

Entendendo Tags Open Graph

O protocolo Open Graph foi introduzido pelo Facebook em 2010 para permitir que paginas web se tornem objetos ricos em um grafo social. Quando alguem compartilha uma URL no Facebook, LinkedIn, Pinterest ou outras plataformas sociais, a plataforma acessa a pagina e le suas meta tags Open Graph para determinar qual titulo, descricao, imagem e outros metadados exibir na visualizacao de compartilhamento. Sem essas tags, as plataformas fazem sua melhor suposicao a partir do conteudo da pagina, o que frequentemente resulta em previews ruins com imagens ausentes, titulos truncados ou descricoes irrelevantes.

O protocolo define quatro propriedades obrigatorias: og:title (o titulo da pagina), og:type (o tipo de objeto, como "website" ou "article"), og:image (a URL da imagem a ser exibida) e og:url (a URL canonica). Propriedades opcionais adicionais incluem og:description, og:site_name, og:locale e tags especificas de midia para conteudo de video e audio. Essas tags sao colocadas na secao <head> do seu HTML como elementos <meta property="og:..." content="...">.

Twitter Cards

O Twitter usa seu proprio sistema de meta tags chamado Twitter Cards, mas usa tags Open Graph como fallback quando tags especificas do Twitter nao estao presentes. A tag twitter:card e a mais importante, controlando o formato de exibicao. O tipo de card "summary" mostra uma pequena imagem quadrada ao lado do titulo e descricao, adequado para conteudo geral. O tipo de card "summary_large_image" exibe uma grande imagem retangular acima do titulo e descricao, ideal para posts de blog, artigos e conteudo visual que se beneficia de um preview de imagem proeminente.

Tags especificas do Twitter como twitter:title, twitter:description e twitter:image substituem seus equivalentes Open Graph no Twitter. Se estas nao estiverem definidas, o Twitter automaticamente usa og:title, og:description e og:image como fallback. Isso significa que voce so precisa adicionar tags especificas do Twitter quando deseja que o preview do Twitter seja diferente do preview do Facebook. A tag twitter:site tambem pode especificar seu identificador do Twitter para ser exibido com o card.

Melhores Praticas para Imagens

A imagem de preview e o elemento de maior impacto em um compartilhamento social. O Facebook recomenda imagens de pelo menos 1200 x 630 pixels para telas de alta resolucao, com minimo de 600 x 315 pixels. Cards Twitter summary_large_image funcionam melhor com 1200 x 628 pixels em proporcao 2:1. Mantenha o tamanho dos arquivos abaixo de 5 MB. Use JPEG para fotografias e PNG para graficos com texto ou transparencia. Evite imagens com texto excessivo, pois o Facebook pode reduzir a distribuicao de posts com imagens que contem mais de 20 por cento de sobreposicao de texto. Sempre teste suas imagens com as ferramentas de depuracao das plataformas antes de publicar.

Depuracao e Validacao

Plataformas sociais armazenam URLs compartilhadas em cache de forma agressiva, entao alteracoes em suas tags OG podem nao aparecer imediatamente. O Sharing Debugger do Facebook permite reprocessar uma URL para atualizar seu cache e ver exatamente como suas tags sao analisadas. O Card Validator do Twitter mostra a visualizacao do seu Twitter Card e valida a marcacao. O Post Inspector do LinkedIn realiza validacao similar. Apos atualizar tags OG, sempre reprocesse a URL nessas ferramentas para limpar o preview em cache. Problemas comuns incluem URLs de imagem relativas (sempre use URLs absolutas), tags obrigatorias ausentes, imagens muito pequenas e erros de certificado SSL que impedem o crawler da plataforma de buscar a imagem.

Perguntas Frequentes

O que sao tags Open Graph?

Meta tags HTML que controlam como URLs aparecem quando compartilhadas em midias sociais. Elas especificam o titulo, descricao, imagem e URL para previews de compartilhamento no Facebook, LinkedIn e outras plataformas.

Por que as tags Open Graph sao importantes?

Sem elas, plataformas sociais adivinham o que exibir, frequentemente resultando em previews ruins. Tags OG adequadas aumentam as taxas de cliques e garantem consistencia de marca no compartilhamento social.

O que e a meta tag twitter:card?

Ela controla como o conteudo e exibido no Twitter. "summary" mostra uma imagem pequena, "summary_large_image" mostra uma imagem grande em banner. O Twitter usa tags OG como fallback para titulo, descricao e imagem se tags especificas do Twitter estiverem ausentes.

Qual tamanho de imagem devo usar?

O Facebook recomenda no minimo 1200 x 630 pixels. Twitter summary_large_image funciona melhor com 1200 x 628 pixels (proporcao 2:1). Mantenha arquivos abaixo de 5 MB. Use URLs absolutas e formato JPEG ou PNG.

Como depuro tags Open Graph?

Use o Sharing Debugger do Facebook, o Card Validator do Twitter ou o Post Inspector do LinkedIn. Essas ferramentas mostram como as plataformas analisam suas tags e permitem atualizar previews em cache.

Ferramenta de Visualizacao Open Graph

Tags Open Graph

Tags Twitter Card

Visualizacao do Facebook

Visualizacao do Twitter

Embed This Calculator