Quando estava configurando meu blog, encontrei uma pequena dificuldade em fazer os Twitter Cards funcionarem corretamente. Seguindo a linha do publique o que você aprender, resolvi escrever um artigo 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 alguns dados sobre o link: o titulo do artigo, o autor (eu), o nome do usuário do autor no Twitter, uma descrição, 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 a metainformação sobre o artigo é qualquer coisa que a gente possa falar sobre ele, como o autor, o link, quantidade de caracteres…
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 metainformação da sua página, caso você faça a marcação direitinho, usando a sintaxe do Open Graph, um protocolo da web semântica criado pelo Facebook.
É bem simples, se você já adicionou um 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:
<meta name="twitter:card" content="summary"> <meta name="twitter:creator" content="@leobetosouza"> <meta name="twitter:site" content="@leobetosouza"> <meta name="twitter:domain" content="leobetosouza.com.br"> <meta name="twitter:title" content="Sobre Trabalhar Com Que Se Gosta E a Falta De Oportunidades - Leobetosouza | Codando e andando"> <meta name="twitter:description" content="Uma carreira onde você não amaldiçoe a segunda-feira deveria você procurar."> <meta property="og:image" content="http://gravatar.com/avatar/da00e54f8aa22a44d97d6d
- twitter:card é o tipo de Card que você quer que o Twitter exiba. O mais comum é o summary, mas você pode ver os outros nesse link
- twitter:creator é o @ do autor do artigo em questão
- twitter:site é o @ do seu site
- twitter:domain é o domínio do seu site (opcional)
- twitter:title o título que você quer que apareça no Card (que pode ser diferente do <title>da sua página)
- twitter:descrition um 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 João Batista Neto 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 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 e-mail quase instantaneamente informando que 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.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?