Código de Twitter Cards para Blogger

(Atualizado em: 18/01/2019)

Publicidade
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:

Link 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/pt_br/) 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 que está nesse link aqui 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

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.

Você também pode usar qualquer botão de compartilhamento do Twitter, aqueles que ficam ao lado ou abaixo dos posts dependendo do template. Basta inserir após o Título e o link da janelinha que abre do Twitter “via @seuusuario” ou somente “@seuusuario”, teste e veja qual das opções funcionará.

Link para Baixar o Código do Twitter Cards para Blogger: 

https://drive.google.com/file/d/0B3geCFWCk9VnN2ZqWWhHWHhCUlU/view?usp=sharing

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!

17 respostas para “Código de Twitter Cards para Blogger”

    1. Oi, Jhony!

      Tente seguir o artigo abaixo para ver se a meta tag está faltando em seu template:

      https://www.gerenciandoblog.com.br/2012/03/seo-no-blogger-metatags.html

      Outra coisa: não sei se pode ser também, mas no template que eu usava nessa época estava configurado com os códigos Schema e isso também ajuda bastante na configuração do Twitter Card.

      Faça um teste no Search Console do Google para ver se existe os códigos Schema em seu template. O link é esse aqui: https://search.google.com/structured-data/testing-tool

  1. Oi Claudia, eu ainda não consigo configurar no meu site no blogger 🙁
    Segui todas as recomendações e no momento de validar, este é o erro que aparece na ultima linha: ERROR: Required Meta tag missing (twitter:text:title)

    Consegue me orientar pra solucionar isso?

    1. Oi, Jhony! Como vai?

      Acredito que seja falta de meta para títulos em seu template. O template é personalizado ou nativo do Blogger?

        1. Oi, Jonhy! Bom dia!

          Olha… esse erro parece estar ligado ao carregamento da tag título dos posts. Geralmente, é mais difícil esse tipo de erro no template nativo do Blogger.

          O meu template na época era personalizado e nenhum código dava certo até que encontrei esse.

          Eu procurei pelo erro que vc publicou aqui ontem e achei um tópico que talvez te dê uma “luz” do que está faltando, dê uma olhada no link abaixo (traduza no Google, se for preciso,ok?)

          https://twittercommunity.com/t/required-meta-tag-missing-twitter-text-description/80564

          Se puder, volte para nos contar se esse tópico resolveu ou não o problema, ok?

        2. Oi, Jhony! Voltei!

          Esqueci de perguntar se vc preencheu o campo de descrição de pesquisa que fica dentro do editor de cada post? Porque sem essa descrição, o código não funciona.

    1. Helen, na época também tive que testar vários códigos, mas esse foi o único que deu certo. O problema são os templates mesmo.

      Eu q agradeço, flor! Seja sempre muito bem-vinda! Abração!

    1. Oi, Helen Fernanda! Como vai? Obrigada por visitar e comentar aqui no blog! Seja sempre muito bem-vinda!

      É verdade, tem como fazer essas cópias via ssh, mas é somente para inibir um pouco mesmo, ou seja, para não ficar fácil demais (rsrs). E, geralmente, pessoas que copiam na cara dura artigos como esses que tenham aqui nem sempre são usuários tão avançados, então, esse plugin do wordpress que uso atualmente ajuda a inibir um pouco.

      Esse post aqui não tem tanto problema em relação à copia pq foi feito para ajudar mesmo quem está no Blogger ainda e também porque esse código tem em vários fóruns pela internet, mas os outros posts ficaria um pouco chato se copiassem porque são posts de resenhas e muito pessoais.

      Mas de qualquer forma, valeu pelo aviso! Abração!

  2. Tem uma coisa que eu queria entender: todas as vezes que eu fizer uma publicação no Blogger tenho que ir lá nas configurações do Twitter e atualizar de acordo com o meu post? Como inserir imagem? Ela tem que estar hospedada em algum site e devo utilizar a url respectiva? Obrigado pela atenção!

    1. Olá, Ademir! Como vai? Obrigada por sua visita e comentário!

      Para que o Twitter Cards seja publicado no Twitter corretamente com a imagem automaticamente, você precisa inserir uma imagem em seu post diretamente no editor de texto do Blogger. Vai funcionar como uma imagem de capa de post, isso é ideal tanto para publicação no Twitter como no Facebook, Google Plus e etc.

      As imagens podem ser baixadas num banco de imagens gratuitas ou royalt free ou ainda você pode fazer uma imagem personalizada como as imagens que faço aqui no blog. Para isso, basta usar alguma ferramenta para edição de imagens (Photoshop, Photofiltre, entre outras) ou usar o https://www.canva.com/ que possui vários modelos já prontos para personalizar que ajudam bastante no momento da criação.

      No Canva, você encontrará vários modelos de imagem padrão, escolha um tamanho que fique bem em qualquer rede social para poupar o seu trabalho de ter que ficar editando as imagens no momento da publicação, ok?

      Já para fazer as publicações no Twitter você pode usar uma extensão para o Chrome (Share on Twitter Plus) que facilita no momento do compartilhamento ou usar qualquer botão de compartilhamento de Twitter em seu blog usando no final do link “via @seu_usuario_do_twitter” que o seu Card (se estiver configurado corretamente) será publicado lá no Twitter.

      Não se esqueça que após inserir os códigos explicados nesse post, você precisa confirmar se está tudo certo no link oficial do próprio Twitter:

      https://cards-dev.twitter.com/validator

      Essa ferramenta também te mostrará os erros, se houver, para que voce possa fazer as devidas correções. O código acima funcionou perfeitamente para mim na época em que o meu blog ainda estava no Blogger.

      Atualmente, muitos templates para Blogger já estão vindo com esses códigos pré-configurados, veja na documentação do seu template para saber se é o seu caso. Se tiver, basta inserir o seu usuário no campo destinado do código.

      Acho que expliquei tudo, mas se tiver alguma outra dúvida, é só postar um novo comentário, ok?

    1. É verdade! Infelizmente, precisei bloquear cópias porque algumas pessoas estavam copiando os posts e publicando em outros lugares na web sem permissão.

      Obrigada por avisar! Acabei de inserir um link do Google Drive para baixar no final da postagem grifada em amarelo.

      Não se preocupe com o link, pois é direto e sem nenhum tipo de propaganda, ok?

      Já testei aqui e funcionou, mas se tiver algum problema avise, por favor.

      Abração!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *