Como configurar os Summary Cards do Twitter no Blogger


Este não é o tipo de post que eu costumo fazer, porque sei que existem dezenas de blogs dedicados a ensinar essas coisas e que vão fazer isso muito melhor do que eu. Mas, nesse caso, eu já vinha pesquisando sobre os Summary Cards há algum tempo e não encontrei muitas referências em português, então, achei que valeria a pena. Vou tentar explicar de forma bem simples e objetiva, mais voltada para pessoas que não entendem muita coisa de tecnologia, não ficariam horas tentando entender (como eu fiz) ou, talvez, nem saibam que isso existe.

Se alguém quiser saber mais, vou deixar aqui como referência os links que eu utilizei e que descrevem de forma mais detalhada (todos em inglês).

O que são Summary Cards?

Summary Card é uma funcionalidade do Twitter que busca informações no código do blog, que normalmente estão invisíveis (as metatags) para exibi-las no tweet. É mais ou menos a mesma coisa que o Facebook faz quando busca o resumo e a imagem de um link.

Vejam aqui um link sem Summary Card, gentilmente emprestado pelo Felipe:

Exemplo de tweet com link sem Summary Card.

Agora, vejam um link com Summary Card:

Exemplo de tweet com link e Summary Card.

Perceberam a diferença? O Summary Card inclui, além do título, a imagem principal do post e a descrição. Só por desencargo de consciência, todo mundo aqui usa descrição nos posts, certo? Se não usam, passem a usar, é útil para as pesquisas e para a divulgação em qualquer rede social.

Por que usar Summary Cards?

  1. Porque fica mais bonito. Desnecessário explicar o quão mais agradável fica a visualização. Clique na imagem ao lado para ampliar.
  2. Porque facilita para as pessoas identificarem o seu blog. O exemplo que eu dei foi de alguém divulgando o próprio blog, então, obviamente, ele colocou uma introdução legal. Mas não é só você que pode divulgar um link para o seu blog. Com o Summary Card, independente de quem postar o tweet ou do que a pessoa escreva antes, você tem certeza do que vai aparecer, porque é você quem controla isso. Também é útil para links truncados (como no exemplo da imagem) ou reduzidos (como nos exemplos acima). Eu mesma, quando estou acessando pelo celular, tenho muita preguiça de clicar em um link que eu não sei do que se trata. Além disso, o Twitter inclui o seu perfil (ou do seu blog) em qualquer resposta dada ao tweet com o link, o que acaba sendo uma forma de interagir com pessoas que talvez não te conhecessem antes.

Quais os tipos de Summary Cards?

Existem quatro tipos de Summary Cards, mas eu não vou entrar em detalhes sobre todos eles, porque nem todos são úteis para blogueiros.
  • Summary Card: O que eu uso e que pode ser visto nas imagens de exemplo;
  • Summary Card with Large Image: Menos espaço para o texto, mais espaço para imagem. Pode ser interessante para quem bloga sobre fotografia, moda ou qualquer outra coisa que tenha mais apelo visual que textual;
  • App Card: Destinado a desenvolvedores de aplicativos, esse card já mostra o link para download.
  • Player Card: Permite abrir um vídeo sem sair do Twitter. Ideal para vloggers.

Como usar Summary Cards?

Espero já tê-los convencido a usar os Summary Cards, então vamos ao que realmente interessa: Como? A menos que você nunca tenha mexido com código nenhum, o que acho improvável para quem é blogueiro, não é difícil.

1. Faça backup do seu modelo atual.

Para isso, clique em Modelo >> Fazer backup/Restaurar >> Fazer download do modelo completo. Se alguma coisa der errado, você volta nessa mesma tela e faz o upload do arquivo que você salvou.
Blogger >> Modelo >> Fazer backup/Restaurar

2. Abra o modelo.

Na mesma tela, clique em Editar HTML ou, se preferir, faça uma cópia do arquivo que você baixou e abra-o em um editor de texto.

3. Procure o seguinte código:


1:  <b:if cond='data:blog.pageType == &quot;item&quot;'>  

Observação: Ao procurar esse código, você vai implantar os Summary Cards apenas nas páginas de posts. Pelo que li, o ideal será implantar um nível acima, pois as metatags estariam em todas as páginas, inclusive na Home. Porém, no meu template, não funcionou, pois bagunçou o layout dos posts, então, optei por deixar nesse nível, mesmo.

4. Abaixo da linha encontrada, inclua as linhas abaixo:

1:  <!-- TWITTER SUMMARY CARDS -->  
2:  <meta content='summary' name='twitter:card'/>  
3:  <meta content='@cintiamcr' name='twitter:creator'/>  
4:  <meta content='@bloginsignifica' name='twitter:site'/>  
5:  <meta content='www.insignificativo.com.br' name='twitter:domain'/>  
6:  <meta expr:content='data:post.title' name='twitter:title'/>  
7:  <meta expr:content='data:blog.metaDescription' name='twitter:description'/>  
8:  <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>  
9:  <!-- END TWITTER SUMMARY CARDS -->  

5. Altere as propriedades com os seus dados

As partes em vermelho são as propriedades que você vai precisar alterar. Abaixo, eu explico cada linha.

  1. Apenas um comentário, para deixar o template mais organizado.
  2. Card: O padrão é summary. Caso queira o modelo com imagem maior, altere para summary_large_image. Para os outros tipos, consulte a documentação oficial da ferramenta, pois há outras diferenças que não testei e, por isso, prefiro não explicar.
  3. Creator: Substitua o @cintiamcr pelo seu Twitter pessoal. Usado apenas para o modelo Large Image.
  4. Site: Substitua o @insignificativo pelo Twitter do seu blog. Não fica visível no tweet, mas é obrigatório.
  5. Domain: Substitua www.insignificativo.com.br pela URL do seu blog ou a propriedade "data:blog.homepageUrl".
  6. Title: O título do seu post. Caso não funcione com a propriedade acima, tente utilizar "data:blog.pageName".
  7. Description: A descrição do post. Aquela que eu comentei lá em cima, que todo mundo deveria colocar, lembra?
  8. Image: A imagem principal do post, a mesma que, normalmente, é usada na página inicial quando o post é resumido.
  9. Outra linha de comentário para fechar o bloco, não se preocupe com ela.
Não altere nada além dos itens 2, 3, 4 e 5, apenas salve suas edições. Se estiver editando diretamente na interface do blogger, basta clicar em "Salvar Modelo". Caso tenha optado por um editor externo, salve o arquivo e faça o upload em "Fazer backup/Restaurar".

5. Teste um link.

Depois de atualizar o seu template com as metatags, você deve validar o seu Card. Para isso, entre no Card Validator (pode ser com o perfil do blog ou com seu perfil pessoal), cole um link do seu blog em "Card URL" e clique em "Preview Card". Se tiver dado tudo certo, o resultado deve ser parecido com a imagem abaixo.

Twitter Card Validator. Clique na imagem para ampliar.
Update 11/06/2016: Algumas amigas minhas tentaram e tiveram problemas nessa fase. Não consegui descobrir o motivo, embora desconfie que tenha relação com o template. Creio que, nesse caso, o melhor seja entrar em contato no fórum de desenvolvedores do Twitter (em inglês).

Pronto! A partir de agora, todo link do seu blog que qualquer pessoa publicar vai com a imagem, título e resumo.

Não disse que era fácil? Quero ver os Summary Cards de todo mundo na minha timeline!

CONVERSATION

Back
to top