Quando estava configurando esse blog (em breve um post sobre) encontrei uma pequena dificuldade em fazer os Twitter Cards funcionarem corretamente. Seguindo a linha do publique o que você aprender, resolvi escrever um mini tutorial sobre o assunto:
O que são Twitter Cards?
É metainformação que o Twitter mostra sobre um link que é colocado no tweet. Como por exemplo nesse tweet meu:
Se você prestar atenção verá que o Twitter além do meu tweet adicionou mais algums dados sobre o link: o titulo do artigo, o autor (eu), o nome do usuário do autor no Twitter, uma descriçao, uma foto e um link direto para o artigo.
Se você está acostumado a usar o serviço de microblog deve perceber que ele não gera esse tipo de dados para todos os links que são postados por lá. O motivo é que o responsável pelo site linkado tem que prover a metainformação e solicitar ao Twitter a criação dos Cards.
Metainformação
Metainformação (ou metadados) são, em uma maneira bem simplista, dados sobre os dados que estão sendo transmitidos.
No caso em questão o dado é o meu post Sobre trabalhar com o que se gosta e a falta de oportunidades e metainformação sobre é qualquer coisa que a gente possa falar sobre ele. Como o autor, o link, quantidade de caracteres, whatever.
Em HTML a forma mais comum de adicionar metainformação à uma página é usando a tag <meta>.
Twitter Cards e Open Graph
O Twitter pega a tal da metainformação da sua página se você fizer a marcação direitinho usando a sintaxe do Open Graph, um protocolo da web semântica criado pelo Facebook.
É bem simples, se você já adiciounou markup para o Facebook, só precisa adicionar algumas poucas tags.
Se você olhar o HTML do <head> do artigo acima vai achar lá essas tags:
1 2 3 4 5 6 7 | |
twitter:cardé o tipo de Card que você quer que o Twitter exiba. O mais comum é osummary, mas você pode ver os outros nesse linktwitter:creatoré o @ do autor do artigo em questãotwitter:siteé o @ do seu sitetwitter:domainé o domínio do seu site (opcional)twitter:titleo título que você quer que apareça no Card (que pode ser diferente do<title>da sua página)twitter:descritionum resumo de até 200 caracteres que vai aparecer no Card.og:imageé a imagem que aparecerá no Card (já falo mais sobre isso)
Note que como o meu site e eu usamos a mesma conta do Twitter, então twitter:site e twitter:creator são iguais. Se você olhar nesse artigo do @netojoaobatista no @iMasters vai ver um exemplo de @s diferentes.
A Documentação do Cards diz que eles aproveitam a marcação do og:title, og:description e og:image já usadas pelo Facebook para você não precisar adicionar as equivalentes do Twitter, mas no meu caso isso não funcionou para o título e a descrição. Eu tive que usar as tags do do Twitter. Por isso uso og:image no exemplo, mas o equivalente do Twitter é twitter:image:src.
Validação e aprovação
O Twitter disponibiliza uma ferramenta para validação e solicitação de Cards chamada Card Validator.
É bem fácil, só publicar sua página com a markup necessário, ir no Card Validator, clicar em Try & Apply, colocar o link lá e testar.
Se tiver tudo OK, vai aparecer um link para requisitar o uso do Card. Só clicar e esperar.
No meu caso eu recebi um email quase instaneamente informando o Summary Card foi ativado para o meu site:
E lá no Card Validator o status mudou :)
Depois de tudo certo só postar seu link no Twitter e esperar que seus seguidores apreciem a novidade ;)
Se você quiser usar outro tipo de Card (como photo ou summary_large_image) no seu site, além de adicionar markup para o mesmo, terá que solicitar aprovação separadamente para cada um.
Espero em breve poder testar o Product Card na Estante Virtual. ^^