Neste tutorial veremos como adicionar a possibilidade de usar uma imagem diferente do logo da loja ao compartilhar o link de sua página inicial.
Essa imagem, tecnicamente conhecida como imagem OG (Open Graph Image), é a utilizada por plataformas como Instagram, Facebook e WhatsApp para acompanhar um link quando ele é compartilhado.
HTML
1. Essa funcionalidade é bastante fácil, basta criar um arquivo chamado general-og.tpl dentro da pasta snipplets/metas, com o seguinte código:
{{ store.name | og('site_name') }}
{% if template == 'home' %}
{{ 'website' | og('type') }}
{{ page_title | og('title') }}
{{ page_description | og('description') }}
{{ store.url_with_protocol | og('url') }}
{% set og_image_src = store.og_image_src %}
{% if og_image_src %}
{{ ('http:' ~ og_image_src) | og('image') }}
{{ ('https:' ~ og_image_src) | og('image:secure_url') }}
{% endif %}
{% endif %}Como podemos ver, este arquivo contém muito mais do que apenas a imagem, mas também inclui outras meta informações ao compartilhar o link, como o nome do site, o tipo de site, o título da página, sua descrição e a URL do site.
2. Por fim, incluiremos o arquivo criado na tag head do HTML no arquivo layout.tpl
{# OG tags to control how the page appears when shared on social networks. See http://ogp.me/ #}
{% snipplet "metas/general-og.tpl" %}Ativação
Para utilizar esta imagem basta ir no administrador à parte onde carregamos o logo da loja, na seção Minha Nuvemshop > Layout, tocando no botão "Editar ou excluir logo" se tivermos um ou "Carregar logo”Se não tivermos carregado ainda.
Em seguida, ativamos a opção “Usar outra imagem ao compartilhar o link da sua loja” e carregamos a imagem que desejamos.
Pronto! Agora podemos usar qualquer imagem para compartilhar sua loja.
Para obter mais informações e recomendações sobre esta imagem, recomendamos que você consulte este artigo.