Acerte as tags Open Graph em cada rede

Q: O atributo prefix do html faz diferença?

O ogp.me especifica o prefixo RDFa <html prefix="og: https://ogp.me/ns#"> como parte do protocolo, então inclua o prefixo. O guia de Cards do X observa que as tags twitter: dele não exigem esse markup. Não espere que o prefixo conserte um card que está falhando por outro motivo.

O que são tags Open Graph?

Uma página declara suas tags Open Graph como elementos <meta> dentro do seu <head>, e esses elementos dizem a uma rede social qual título, tipo, imagem e URL colocar na prévia do link quando alguém compartilha a página. A página inicial do protocolo, ogp.me, abre com a frase "The Open Graph protocol enables any web page to become a rich object in a social graph." O mecanismo é um crawler: a rede busca a sua URL, analisa os elementos meta e monta um card com o que encontra, em vez de adivinhar a partir do texto da página. Escreva as quatro tags obrigatórias no head de cada página que você compartilha e depois rode o depurador de cada rede na URL publicada.

Um desenvolvedor digita tags meta na seção head de uma página em um laptop.

Quais tags Open Graph o protocolo exige?

O protocolo Open Graph exige quatro propriedades, e o ogp.me as nomeia como og:title, og:type, og:image e og:url. Cada uma tem uma definição de uma linha na especificação.

Propriedade	Definição do ogp.me	Valor de exemplo
`og:title`	"The title of your object as it should appear within the graph"	Agendar posts em nove redes
`og:type`	"The type of your object, e.g., 'video.movie'"	`article`
`og:image`	"An image URL which should represent your object within the graph"	`https://example.com/preview.png`
`og:url`	"The canonical URL of your object that will be used as its permanent ID"	`https://example.com/guide`

Além dessas quatro, o ogp.me lista propriedades opcionais como og:description, og:site_name, og:locale, og:determiner, og:audio e og:video, além de filhos estruturados como og:image:secure_url, og:image:type e og:image:alt. A especificação também pede um prefixo RDFa no elemento raiz, <html prefix="og: https://ogp.me/ns#">.

<meta property="og:title" content="Scheduling posts across nine networks" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:url" content="https://example.com/guide" />
<meta property="og:description" content="What each network reads before it draws a card." />

Quais redes leem tags Open Graph e quais usam as próprias?

Facebook, LinkedIn, Pinterest e Slack leem as propriedades og: diretamente, e o X lê primeiro o seu próprio namespace twitter:. Essa divisão é o problema prático quando uma mesma página vai para várias redes, porque um conjunto de tags que satisfaz um crawler pode deixar outro montando um card vazio.

Destino	O que lê	Fonte
Facebook	propriedades og:	O guia para webmasters da Meta nomeia og:url, og:title, og:description, og:image, og:type, og:locale, fb:app_id
LinkedIn	propriedades og:	Página de ajuda do LinkedIn: o código-fonte "needs to comply with Open Graph Protocol (OGP)"
Pinterest	propriedades og: ou schema.org	Visão geral de Rich Pins do Pinterest: "the most common formats are Open Graph and Schema.org"
X	propriedades twitter:, com fallback para og:	Guia de Cards do X, arquivado, citado abaixo
Slack	propriedades og: e metadados de card do X	Documentação do Slack: o unfurling "looks for common OpenGraph and X (formerly known as Twitter) Card metadata"

Daí saem duas coisas. Uma rede só lê as suas tags quando o post traz um link que ela consegue buscar, então um formato de legenda que nunca exibe uma URL nunca dispara um rastreamento. E uma rede com namespace próprio dá preferência a ele, o que transforma publicar uma página em todo lugar em um problema de metadados antes de ser um problema de agendamento. Vale o mesmo cuidado de qualquer fluxo de cross-posting: o texto viaja, a renderização não.

Por que og:url precisa ser a URL canônica?

O guia de compartilhamento da Meta define og:url como "The canonical URL for your page. This should be the undecorated URL, without session variables, user identifying parameters, or counters." O protocolo chama essa mesma propriedade de ID permanente, então todo compartilhamento de uma variante rastreada converge para o único endereço que você declarou. Coloque em og:url o endereço canônico limpo, mantenha os parâmetros de campanha no link compartilhado e fora da tag, e analise o lado da campanha separadamente quando for rastrear o tráfego das redes sociais.

O mesmo guia define og:title como "The title of your article without any branding such as your site name," porque o Facebook já imprime o domínio no card.

Como o X passa das tags twitter: para as tags og:?

O processador de cards do X procura primeiro a propriedade twitter: e usa o equivalente do Open Graph quando a twitter: não existe. O X não publica mais o seu guia de Cards, e a antiga URL para desenvolvedores agora redireciona para uma página de visão geral genérica, então toda citação desta seção vem da captura arquivada desse guia de dezembro de 2023 e descreve o comportamento que o X documentou pela última vez naquela data. A regra estava escrita assim: "When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property." A única propriedade sem equivalente no Open Graph é a própria twitter:card, descrita como "The card type, which will be one of 'summary', 'summary_large_image', 'app', or 'player'."

Desse guia saem dois detalhes de sintaxe. O X não precisa de prefixo RDFa, e embora suas tags usem name e content, "Twitter's parser will fall back to using property and content, so there is no need to modify existing Open Graph protocol markup if it already exists." Sobre um conjunto Open Graph correto, uma tag extra cobre o X.

<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@yourhandle" />

Por quanto tempo as plataformas guardam em cache o que rastrearam?

Facebook e X guardam o rastreamento em cache, cada um com o seu próprio relógio. A página de boas práticas da Meta oferece o Sharing Debugger para sites que "need to update them more often than the standard 24 hour update period." O guia de Cards arquivado diz "Content is cached by Twitter for 7 days after a link to a page with card markup has been published in a Tweet." Corrija as suas tags antes de o link sair, porque depois que ele sai você fica esperando o cache de outra empresa.

Uma mão rolando um feed de redes sociais em um smartphone, a tela onde aparece um cartão de prévia de link.

Como você verifica o que um crawler realmente vê?

Cada rede publica um depurador que busca a sua URL como o próprio crawler dela e imprime as tags que analisou. A documentação da Meta diz que o Sharing Debugger "will show which meta tags the crawler scrapes as well as any errors or warnings," e a mesma execução já coloca a sua imagem em cache. Aponte o depurador para a URL exata que você vai postar, não para uma cópia de staging, e repita depois de qualquer alteração no head.

Os crawlers podem ser identificados nos logs do servidor e nas regras de robots. A Meta lista user agents como facebookexternalhit/1.1 e meta-externalagent/1.1, e o X usa "the User-Agent of Twitterbot (with version, such as Twitterbot/1.0)." O guia dele avisa que "if a page with card markup is blocked, no card will be shown."

O que dá errado com tags Open Graph?

Quatro modos de falha explicam a maioria das prévias vazias ou erradas, e nenhum deles aparece no navegador. O primeiro é um crawler bloqueado, e a página de ajuda do LinkedIn o nomeia: se uma imagem atende aos requisitos e mesmo assim não aparece, "your website may be blocking us from pulling the image or the image may be located on a protected directory or website." O segundo é a posição, já que a documentação do crawler da Meta afirma que "any Open Graph properties need to be listed before the first 1 MB of your website or app, or it will be cutoff." O terceiro é um cache desatualizado. O quarto é um caminho de imagem relativo, porque og:image é definida como uma URL de imagem e um crawler em outro host não tem uma base para resolver um caminho relativo.

AdaptlyPost

–

Agende seu conteúdo em todas as plataformas

Teste grátis de 7 dias

Análises multiplataforma

Caixa Social

Assistente com IA

O Pinterest fica fora desses quatro, porque os Rich Pins tratam os seus metadados como conteúdo estruturado e não apenas como prévia, assunto tratado à parte neste guia de Rich Pins. Acertar o head uma vez é a parte mais barata da otimização de redes sociais. Quando o mesmo link vai para vários destinos, o adaptlypost publica um post em várias contas de uma vez, então o trabalho com as tags fica na sua página e a distribuição acontece em um só lugar. A renderização continua pertencendo a cada rede, e esse é o ponto a levar para qualquer estratégia de cross-posting.

Quatro formas de uma prévia falhar

Crawler bloqueadoRegras de robots ou o servidor impedem o crawler de buscar a imagem

Posicionamento tardioAs tags Open Graph ficam depois do primeiro 1 MB da página e são cortadas

Cache desatualizadoA rede ainda mostra o que rastreou antes da sua última edição

Caminho de imagem relativoog:image não tem uma URL base a partir da qual outro host consiga resolver

Quatro falhas explicam a maioria das prévias em branco ou erradas, e nenhuma delas aparece no navegador.

Perguntas frequentes

Preciso de og:description se o protocolo não exige?

O ogp.me lista og:description como opcional, então uma página sem ela continua atendendo ao protocolo. O guia de compartilhamento da Meta a descreve como o texto exibido abaixo do título no Facebook, então deixá-la de fora entrega à rede uma decisão que você mesmo poderia ter tomado. Escreva a descrição.

Posso usar tags Open Graph e tags twitter: na mesma página?

Sim, e o guia de Cards arquivado do X chamava isso de configuração pretendida: definir as duas "minimizes the amount of duplicate markup required to describe content and experience." O processador lê a propriedade twitter: quando ela existe e a propriedade og: quando não existe. Adicionar twitter:card sobre um conjunto Open Graph completo basta para o X.

O que acontece se og:url apontar para outro lugar que não a própria página?

A rede monta o card para o endereço em og:url, que o ogp.me define como "The canonical URL of your object that will be used as its permanent ID." Uma divergência manda cada pessoa que compartilha para uma página diferente da que ela estava lendo. Mantenha og:url igual ao endereço canônico da página que carrega a tag.

Por que a minha prévia ainda mostra o título antigo depois que corrigi a tag?

As redes guardam o rastreamento em cache. A página de boas práticas da Meta fala de um "standard 24 hour update period" e oferece o Sharing Debugger para atualizar antes, e o guia de Cards arquivado do X dava 7 dias a partir do momento em que um link é publicado em um post. Rode o depurador da rede em questão e compartilhe de novo.

O atributo prefix do html faz diferença?

O ogp.me especifica o prefixo RDFa <html prefix="og: https://ogp.me/ns#"> como parte do protocolo, então inclua o prefixo. O guia de Cards do X observa que as tags twitter: dele não exigem esse markup. Não espere que o prefixo conserte um card que está falhando por outro motivo.

O que as redes fazem quando og:image não existe?

O protocolo não define nenhum fallback, então o comportamento fica a cargo de cada rede e do seu crawler. A documentação do Slack descreve o unfurling clássico como rastrear a URL em busca de metadados Open Graph e de card do X e renderizar "some micro-approximation of the content," o que descreve com honestidade o que uma rede faz com um conjunto incompleto. Inclua og:image e não deixe essa escolha para uma heurística.

O que colocar em og:type se a página não for um artigo?

O ogp.me define og:type como o tipo do objeto e dá video.movie como exemplo, então o valor deve corresponder ao que a página realmente é. A tabela deste guia usa article para um post de blog, mas esse é só um dos valores que o protocolo aceita. Coloque em og:type o tipo que descreve de fato o objeto da página.

og:title precisa incluir o nome da minha marca?

O guia de compartilhamento da Meta define og:title como "o título do seu artigo sem qualquer elemento de marca, como o nome do seu site", porque o Facebook já imprime o domínio no card. Colocar sua marca ali só repete o que a própria rede já mostra. Deixe og:title só com o título e deixe a rede cuidar do domínio.

Uma rede monta uma prévia a partir de um post sem link?

Uma rede só lê suas tags quando o post carrega um link rastreável, então um formato de legenda que nunca renderiza uma URL nunca dispara um rastreamento. Sem link não há nada para o crawler buscar, por mais completas que as outras tags estejam. Coloque a URL no próprio post, não só numa imagem ou no texto da legenda.

Como identifico o crawler de uma rede nos logs do servidor?

A Meta lista user agents que incluem facebookexternalhit/1.1 e meta-externalagent/1.1, identificáveis nos logs do servidor e nas regras de robots. O X usa o user agent do Twitterbot, com versão, como Twitterbot/1.0. Checar essas strings mostra se o crawler chegou à página, já que o guia do X avisa que uma página bloqueada não mostra nenhum card.