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.

Leonardo Alberto Souza