Inseri o <vtex.cmc:productRichSnippets /> para Open Graph, funcionou como esperado no facebook e instagran, mas não funciona no Watsapp nem twitter, alguém tem alguma sugestão? Será que tem a ver com o tamanho da imagem?

Adicionei os parâmetros neste controle e funcionou, mas gostaria de saber se da para determinar qual imagem deverá aparecer, pois ele pega imagens que são irrelevantes. Se alguém puder me ajudar fico grata!

<!-- na head -->

<vtex.cmc: productRichSnippets showFacebook="1" />

<!-- no body -->

<vtex.cmc: productRichSnippets showGoogle="1"/>

Consegui chegar num resultado! Se alguém precisar pode me chamar

Oi Hellen, tudo bem?

Você poderia compartilhar a sua solução? No meu caso, eu preciso que o logo principal da loja apareça quando o link da loja for compartilhado nas redes sociais (Facebook, Whatsapp, etc).

Oi Marcus, tudo bem!

Então eu consegui da seguinte forma:

Eu adicionei os controles <vtex.cmc:productRichSnippets showGoogle="1" /> no body e o

<vtex.cmc:productRichSnippets showFacebook="1" /> no head conforme documentação >> https://help.vtex.com/tutorial/list-of-controls-for-templates?locale=en

Mas esses controles são usados para Templates de prateleira e produto, se você inclui em outros Templates fica dando erro no console.

Para outras páginas você pode usar o modo tradicional mesmo.

(no seu caso vc tem que subir as imagens da logo e chamar eles igual exemplo abaixo, informando o width e height, dependendo da rede social o tamanho terá que ser diferente )

Exemplo:

<!-- START OPEN GRAPH -->

<meta property="og:title" content="Quem Somos - empresa" />

<meta property="og:type" content="website"/>

<meta property="og:description" content="Descrição da empresa"/>

<meta property="og:image" content="url-da-imagem"/>

<meta property="og:image:type" content="image/png" />

<meta property="og:image:width" content="1366" />

<meta property="og:image:height" content="647" />

<meta property="og:url" content="url-da-pagina"/>

<link rel="canonical" href="https://seusite/institucional/quem-somos/"/>

<!-- END OPEN GRAPH -->

Se você estiver acessando uma url que tenha mais de um nível, por exemplo:

https://seusite/institucional/quem-somos sua tag canonical sera apontada diretamente para https://seusite/institucional/, neste caso vc precisa desabilitar sua canonical ou informar a ela a url certa.

Exemplos:

Informando a URL certa:

<link rel="canonical" href="https://seusite/institucional/quem-somos/"/>

Desabilitando:

<vtex.cmc: canonicalPage disable = "true" />

Da uma olhadinha aqui que fala sobre canonical: https://help.vtex.com/known-issues/tag-canonical-em-paginas-customizadas?locale=pt

E este artigo pode ajudar muito sobre as tags de Open Graph em geral:

https://rockcontent.com/blog/meta-tags-para-redes-sociais/

Foi assim que consegui, mas se alguém souber alguma outra forma melhor, por favor compartilha com a gente ;) !!!

Precisando só chamar!!

Hi Hellen Brunelli.

I need to use some control that allows the user to share on facebook an url of some product like https://www.tevecompras.com/eternity-copper-canasta/p and this post should show the principal image of the product. Today when some user shares this link on facebook, it show's the site's logo (random picture), not the product picture. Can you help me to fix this, please?? Thanks in advance.

Hi @flavia2
You need to use facebook debug tool to re-index the information, I did here just for a test and it work, so if you want to re-index some page, do these steps:

  1. Access: Sharing Debugger - Facebook for Developers
  2. Change the url
  3. Then click on the button “Scrape Again”

Opa. . . Eu configurei mas ainda não aparece no whatsapp e no twitter.

Esse código funcionou para o Facebook, Pinterest. MAS PARA ESSES DOIS AI EM CIMA NÃO. . ALGUÉM ME AJUDA.

Se eu usar os meta tag gráfico aberto, eu não consigo colocar a váriavel que guardar as fotos dos produtos!

Faz algum tempo que não trabalho mais com VTEX, mas veja se em meu repositório tem algum detalhe que te ajude