logo

Código de Twitter Cards para Blogger

sexta-feira, setembro 30, 2016


Código de Twitter Cards para Blogger

Já até perdi a conta de quantos códigos de twitter cards para blogger testei e que não funcionavam até que encontrei esse aqui que compartilho hoje com você. Todo blogueiro sabe o quanto é importante trabalhar a divulgação de um blog corretamente, sem congestionar as caixas de mensagens dos seguidores no twitter ou dos amigos do Facebook. O Twitter Cards realmente confere uma aparência melhor aos links, principalmente o "Cartão de Resumo com Imagem Grande" ou  "Summary Card with Large Image", que na minha opinião é o melhor, pois exibe uma imagem maior contribuindo ainda mais para chamar a atenção dos seguidores, aumentando, portanto, a chance de atrair mais leitores para o blog.

Infelizmente, os links que divulgamos no Twitter não funcionam como no Facebook, ou seja, com carregamento de imagens de forma automática, por isso é que precisamos configurar um código para que esse mecanismo funcione também no Twitter e para que isso aconteça corretamente no Blogger, é preciso instalar um código dentro do código do template. Agora, será que esse esforço vale a pena? Sinceramente, na minha opinião, acho que vale a pena sim, principalmente porque os links ficam com uma aparência muito mais profissional, semelhante aos links dos grandes portais de notícias, por exemplo, e que realmente chamam bem mais a atenção dos leitores que queremos atrair para o blog. Além disso, o Twitter Cards também transmite maior segurança ao leitor no momento de clicar no link, pois os Cards são conferidos pelo próprio Twitter. Outra vantagem, é que se usarmos a publicidade paga do Twitter, com o Card corretamente configurado facilita muito no momento de preparar o criativo do anúncio para ser vinculado no Twitter.

Veja a diferença na imagem abaixo:

Comparando Links sem Twitter Cards e com Twitter Cards


Somente por essa foto acima, já podemos perceber a diferença entre o link com a imagem grande e um link simples. Lembrando, que para o código funcionar corretamente, será preciso incluir a descrição de pesquisa em todas as postagens, pois sem isso não funcionará porque o Twitter Cards não "puxa" apenas o resumo, mas sim a descrição da postagem no blogger. Outra dica: se as postagens antigas do blog tiverem com imagens ruins, troque uma a uma ou faça o melhor possível nas postagens mais recentes pelo menos, para isso, você pode usar um editor de imagem gratuito e online, eu uso o Canva (https://www.canva.com) que é gratuito, fácil e rápido de usar. No Canva, é possível configurar imagens exclusivas para postagens sem correr o risco de infringir direitos autorais, há disponíveis no site tanto imagens gratuitas como pagas para quem deseja incrementar um pouco mais as postagens. 

Após trocar as imagens, se for necessário, e incluir a descrição de pesquisa no editor de postagem do Blogger, basta entrar em Modelo > Editar HTML  e procurar pela tag </head>, após encontrar, cole o código abaixo acima dessa tag. 

Copie e cole o código abaixo entre as tags  <head> e </head> do seu template: 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
      <b:if cond='data:blog.postImageUrl'> 
        <b:if cond='data:blog.metaDescription'> 
          <meta content='summary_large_image' name='twitter:card'/> 
          <meta content='@usuario_blog' name='twitter:site'/> 
          <meta content='@usuario_autor' name='twitter:creator'/> 
          <meta expr:content='data:blog.pageName' name='twitter:title'/> 
          <meta expr:content='data:blog.metaDescription' name='twitter:description'/> 
          <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/> 
          <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/> 
        </b:if> 
      </b:if> 
</b:if> 

Você vai precisar trocar o '@usuario_do_blog' pelo usuário que representa o seu blog no Twitter e o '@usuario_autor' pelo seu usuário de autor do blog no Twitter. Se for o mesmo, não tem problema nenhum, basta repetir o único usuário existente, aqui no blog funcionou perfeitamente com somente um usuário repetido nos dois lugares. Agora, basta conferir no Card Validator do Twitter (https://cards-dev.twitter.com/validator) colocando a url do artigo que pretende divulgar e, se tiver tudo certinho, vai aparecer o seu artigo com imagem grande e nenhum erro apresentado como na imagem abaixo: 

Twitter Cards Configurado Corretamente no Card Validator


E como divulgar o link com o Twitter Card? Para isso, eu instalei uma extensão no Chrome que faz exatamente esse trabalho e facilita muito, que é carregar o Twitter Card diretamente do link do blog que deseja publicar. Você pode ler mais sobre a extensão nesse link: https://browsernative.com/share-on-twitter-chrome-extension ou instalar diretamente da Chrome Web Store através desse link aqui. Lembrando, que essa extensão já carrega o Card com o usuário e publica diretamente em sua conta do Twitter, dispensando qualquer outro tipo de configuração 

Espero ter ajudado de alguma forma! Qualquer dúvida, basta deixar nos comentários abaixo que vamos juntos resolver! Sugestões, dicas e críticas também são bem-vindas aqui! Um suuuuper abraço e até o próximo post!



Você Pode Gostar Também

0 comentários