A imagem Open Graph do Webflow não está funcionando
O Webflow define o Open Graph por página, nunca globalmente. As páginas de modelo do CMS precisam de um campo de Imagem, e todas as imagens dessa coleção devem ter o mesmo tamanho.
Última atualização
Solução rápida
Abra as Configurações da página, configurações do Open Graph para a página que você compartilha.
Nos modelos de CMS, escolha um campo de Imagem da coleção.
Use JPG ou PNG em 1200 x 630 px, o mesmo tamanho para toda a coleção.
Publique e, em seguida, atualize o link com a ferramenta de atualização.
Por que a imagem do Webflow não está aparecendo
A página não tem uma imagem Open Graph. O Webflow não permite definir tags Open Graph globalmente; cada página precisa da sua própria.
A coleção do CMS não tem um campo de Imagem, então o menu suspenso de imagem Open Graph no modelo está vazio.
As imagens em uma coleção têm tamanhos diferentes. O Webflow exige que todas as imagens Open Graph em uma coleção compartilhem as mesmas dimensões.
A imagem está em WebP ou AVIF. O seletor de recursos lista apenas JPG e PNG. O Webflow observa que algumas plataformas, como o LinkedIn, não oferecem suporte a WebP ou AVIF aqui.
A alteração ainda não foi publicada ou a plataforma armazenou o card antigo em cache.
Como resolver
No painel Pages, abra Page settings e, em seguida, Open Graph settings.
Clique em Select image e escolha um JPG ou PNG dos seus recursos, ou cole uma URL pública de imagem.
Para uma página de modelo do CMS, escolha um campo de Imagem, como a imagem principal, no menu suspenso de imagem Open Graph.
Se todas as imagens compartilharem o mesmo tamanho, adicione
og:image:widtheog:image:heightem Site settings, Custom code, Head code.Publique o site e verifique a URL publicada com o verificador de meta tags.
Tags que o Webflow gera
og:title(ou seu título de SEO, se você marcar a caixa)og:descriptionog:imageQualquer outra coisa, como
og:image:width, vai no código personalizado
Regras de tamanho de imagem
Pelo menos 1200 x 630 px em 1,91:1, de acordo com o guia do Webflow
JPG ou PNG do seletor de recursos
Um único tamanho para todas as imagens Open Graph em uma coleção
Evite compactação excessiva; o Webflow sugere fazer upload de uma cópia descompactada para o Open Graph
Como forçar uma atualização
A publicação não limpa o cache de outras plataformas. Passe a URL pelo Sharing Debugger do Facebook e pelo Post Inspector do LinkedIn, e adicione uma query string ao compartilhar no X, Slack ou Discord. A ferramenta de atualização reúne os links de todos eles.
Fontes
Perguntas Frequentes
Posso definir uma única imagem Open Graph para todo o meu site no Webflow?
Não. O Webflow afirma que as tags Open Graph se aplicam apenas à página em que você as define, portanto, configure-as página por página.
Por que o menu suspenso de imagem Open Graph está vazio no meu modelo de CMS?
A coleção não tem um campo de Imagem. Adicione um, preencha-o para cada item e selecione-o nas configurações do Open Graph.
Posso usar WebP para uma imagem Open Graph no Webflow?
Apenas colando a URL; o seletor lista JPG e PNG. O Webflow recomenda JPG ou PNG porque algumas plataformas não leem WebP.
Verifique sua página e atualize a prévia
Cole sua URL no verificador gratuito para ver as tags exatas que cada aplicativo lê. Assim que as tags estiverem corretas, use a ferramenta de atualização para limpar a pré-visualização antiga.
Guias relacionados
A pré-visualização social do Framer não está atualizando
O Framer define uma prévia para redes sociais em todo o site, substituições por página e imagens individuais para itens do CMS. Se a nova imagem já estiver no ar, mas a antiga ainda aparecer, o cache da plataforma é o motivo.
A imagem de compartilhamento social da Shopify não está funcionando
A Shopify escolhe a imagem de compartilhamento em uma ordem fixa: código do tema, configurações do tema e, por fim, a imagem em Preferências. Fazer o upload no lugar errado é a causa mais comum.
A prévia do link do LinkedIn não está funcionando ou não está atualizando
O LinkedIn cria o card a partir de quatro tags og: e mantém uma cópia em cache. Corrija as tags e, em seguida, faça o LinkedIn buscar a página novamente usando o Post Inspector.