Como fazer as páginas de seu site gerarem posts com imagens grandes no Google+

Recentemente, o Google+ adicionou uma nova característica na sua linha do tempo: a possibilidade de inserir links com imagens grandes, formato semelhante ao que o Facebook também incorporou em sua interface.

Se você possui um site cujo código HTML foi você mesmo ou alguém terceirizado produziu, e, ao preencher o URL de uma página no formulário de novo post no Google+, não entende por que a miniatura da imagem recuperada sempre fica pequena, por maior que ela seja, saiba que apenas uma linha de código resolve seu problema.

Você deve inserir, de preferência, dentro da tag <head>, a seguinte linha de código:
<meta property="og:type" content="article" />
Depois, coloque uma imagem com dimensões grandes, o suficiente para que o Google+ a eleja como uma das imagens disponíveis para sua escolha, na hora de criar o post na rede social.

A explicação por que isto funciona é a seguinte: a propriedade og:type define que tipo de página é o conteúdo do link de seu site.

Se a largura de pelo menos uma das imagens do link for grande o suficiente, e a meta tag acima estiver presente no código-fonte, e o valor de content for do tipo article, o Google+ irá converter o post para o formato de miniatura grande.

Não consegui descobrir qual a largura mínima que a imagem precisa ter para que possa ser escolhida como miniatura do formato de post com imagem grande, mas, ao realizar testes com vários tamanhos, parece-me que a largura mínima é por volta de 500 pixels.

Se você possui um template customizado em sua página no Blogger, acesse o painel de controle do seu blog, vá em "Modelo", depois em "Editar HTML", e, logo após a linha <data:post.body/>, acrescente este código:
<b:if cond='data:blog.pageType == "item"'>
      <meta content='article' property='og:type'/>
</b:if>
Para melhorar ainda mais o resultado, acrescente as seguintes linhas abaixo da nova tag <meta> criada:
<b:if cond='data:post.snippet'>
      <meta expr:content='data:post.snippet' property='og:description'/>
      <meta expr:content='data:post.snippet' name='description'/>
</b:if>
</b:if>
Desta forma, o novo código inserido deverá ser o seguinte:
<b:if cond='data:blog.pageType == "item"'>
      <meta content='article' property='og:type'/>
      <b:if cond='data:post.snippet'>
            <meta expr:content='data:post.snippet' property='og:description'/>
            <meta expr:content='data:post.snippet' name='description'/>
      </b:if>
</b:if>

Postar um comentário