Open Graph
Open Graph são metatags no head de uma página que controlam o título, descrição e imagem mostrados quando um link é compartilhado em redes sociais.
O que é Open Graph?
Open Graph é um protocolo que o Facebook introduziu em 2010 que utiliza meta tags na seção <head> de uma página para controlar a aparência de um link quando ele é compartilhado. Tags como og:title, og:description, og:image, og:url e og:type informam a plataformas como Facebook, LinkedIn, Messenger, WhatsApp e Slack qual título, texto e imagem devem ser exibidos na visualização prévia. Sem elas, as plataformas tentam adivinhar por conta própria — muitas vezes exibindo uma imagem aleatória ou um texto incorreto.
Por que o Open Graph é importante?
Para uma loja online, links compartilhados representam exposição gratuita, e a visualização prévia decide se as pessoas clicarão ou não. Uma imagem og:image nítida e um título og:title claro nas páginas de produtos e de coleções geram um cartão profissional e clicável em feeds e chats. O Open Graph não é um sinal direto de classificação no Google, mas afeta fortemente a taxa de cliques (CTR) proveniente dos canais sociais. Note que o X (Twitter) usa suas próprias tags Twitter Card, mas recorre ao Open Graph quando elas estão ausentes.
Casos de uso comuns
- Páginas de produtos, onde a
og:imagedeve exibir a foto do produto, e não o logotipo da loja. - Páginas de campanhas e de destino (landing pages) compartilhadas em newsletters, anúncios e posts.
- Artigos de blog e guias, onde uma imagem de compartilhamento editorial aumenta o CTR.
- Depuração de visualizações prévias incorretas com o Depurador de Compartilhamento do Facebook ou o LinkedIn Post Inspector.
- Ajuste de dimensões: uma
og:imagede 1200×630 px evita cortes indesejados.
Perspectiva da Shopify
A maioria dos temas da Shopify preenche automaticamente as tags do Open Graph no arquivo theme.liquid e extrai a og:image a partir da imagem em destaque do produto. Os problemas ocorrem quando aplicativos injetam tags duplicadas ou quando páginas não possuem uma imagem dedicada para compartilhamento. Verifique o código-fonte renderizado em URLs reais e valide com um depurador de compartilhamento, em vez de assumir que o tema faz tudo corretamente. O Open Graph complementa a sua meta descrição e os dados estruturados, mas não os substitui.