Open Graph tags são meta tags HTML que dizem às redes sociais e aos aplicativos de mensagens como renderizar uma prévia quando a URL de uma página é compartilhada — especificando o título, a descrição, a imagem e o tipo que devem aparecer, em vez do que a plataforma poderia adivinhar. Desenvolvido originalmente pelo Facebook, o protocolo Open Graph hoje é lido por praticamente todas as grandes redes sociais e plataformas de mensagens, o que o torna a forma padrão de um varejista controlar como suas páginas de produto aparecem quando são compartilhadas, fixadas ou linkadas fora do próprio site. No e-commerce, Open Graph tags bem configuradas fazem a diferença entre um link de produto compartilhado que mostra uma imagem e um preço atraentes e uma miniatura quebrada e genérica.
Por que as Open Graph tags são importantes para páginas alimentadas pelo feed
Páginas de produto são compartilhadas o tempo todo, seja pelo boca a boca dos clientes, por links de afiliados, posts de influenciadores ou posicionamentos pagos em redes sociais, e cada um desses compartilhamentos é renderizado com base nas Open Graph tags, e não no conteúdo real que o visitante veria ao clicar. Uma página de produto sem tags configuradas corretamente pode exibir um logotipo esticado, uma descrição cortada ou irrelevante, ou nenhuma imagem — prejudicando a taxa de cliques de um compartilhamento que, de outra forma, representaria uma distribuição gratuita e de alta intenção. Como as páginas de produto geralmente são geradas em massa a partir do mesmo catálogo que alimenta o feed de shopping, os valores de Open Graph podem ser criados por template diretamente a partir dos metadados de produto já existentes, em vez de escritos à mão para cada SKU, o que torna esse um dos ganhos mais escaláveis disponíveis para um catálogo grande.
Como as Open Graph tags funcionam
As Open Graph tags ficam no <head> de uma página como elementos <meta property="og:...">, com og:title, og:description, og:image e og:url cobrindo os principais campos de prévia que a maioria das plataformas lê. Em um catálogo de produtos, esses valores normalmente correspondem diretamente a atributos do feed já mantidos para o Shopping e o Meta Catalog — o mesmo título, a mesma descrição e a mesma imagem principal usados no feed podem preencher as Open Graph tags equivalentes, mantendo as duas superfícies consistentes, sem exigir textos separados. Plataformas e mecanismos de busca cruzam cada vez mais essa marcação estruturada com um knowledge graph mais amplo de entidades para entender o que uma página representa, o que significa que dados de Open Graph consistentes reforçam a compreensão de um produto pelas máquinas para além da prévia imediata nas redes sociais. Como essas tags determinam como um link se comporta em qualquer lugar onde é compartilhado, elas também são uma parte discreta, mas importante, de uma distribuição de conteúdo (content syndication) eficaz, em que o mesmo produto pode aparecer em vários sites parceiros ou agregadores.
Exemplo
<item>
<g:id>SKU-10234</g:id>
<g:title>Organic Cotton Crewneck Sweater - Charcoal, M</g:title>
<g:description>Soft, breathable organic cotton crewneck in charcoal.</g:description>
<g:image_link>https://example-shop.com/img/org-sweater-charcoal.jpg</g:image_link>
</item><!-- Open Graph tags on the corresponding product page, templated from the feed -->
<meta property="og:title" content="Organic Cotton Crewneck Sweater - Charcoal, M">
<meta property="og:description" content="Soft, breathable organic cotton crewneck in charcoal.">
<meta property="og:image" content="https://example-shop.com/img/org-sweater-charcoal.jpg">
<meta property="og:type" content="product">Conceitos relacionados
Como os valores de Open Graph refletem tão de perto os metadados de produto existentes, o ideal é mantê-los como um template, e não como uma tarefa manual, e eles contribuem para a consistência com que a identidade de um produto é compreendida em um knowledge graph mais amplo de entidades. Eles também viabilizam, de forma discreta, a distribuição de conteúdo (content syndication), garantindo que um produto tenha a mesma aparência e a mesma leitura onde quer que um link para ele acabe sendo compartilhado.
