Quando alguém compartilha sua página WordPress no X (anteriormente Twitter), a plataforma procura por meta tags Twitter Card para gerar uma pré-visualização rica com imagem, título e descrição. Sem essas tags, os links compartilhados aparecem como URLs de texto simples, o que reduz drasticamente as taxas de clique e o engajamento geral. Twitter Cards são uma das formas mais simples de fazer seu conteúdo se destacar nos feeds sociais, e levam apenas alguns minutos para configurar.
Entendendo os Tipos de Twitter Card e Seu Impacto
Antes de mergulhar na implementação, ajuda entender quais tipos de Twitter Card existem e quando usar cada um:
- Summary Card: Mostra uma pequena miniatura quadrada ao lado do título e da descrição. Funciona bem para páginas iniciais, páginas de categoria e conteúdo onde a imagem é secundária ao texto.
- Summary Card with Large Image: Exibe uma imagem grande e em destaque acima do título e da descrição. Esta é a melhor escolha para posts de blog, artigos, páginas de produto e qualquer conteúdo onde uma pré-visualização visual aumenta o engajamento.
- Player Card: Incorpora um player de vídeo ou áudio diretamente no tweet. Requer aprovação do X e é usado por plataformas de mídia como YouTube ou SoundCloud.
- App Card: Projetado para promoção de aplicativos móveis com um link de download direto. Também requer aprovação do X.
Para a maioria dos sites WordPress, o Summary Card with Large Image é o melhor padrão. Estudos mostram consistentemente que tweets com cards de imagem grande recebem 2 a 3 vezes mais engajamento do que tweets apenas de texto. O elemento visual chama a atenção enquanto os usuários rolam pelo feed, tornando-os mais propensos a parar e clicar.
Meta Tags Twitter Card Necessárias Explicadas
Cada Twitter Card precisa de um conjunto específico de meta tags na seção <head> da sua página. Aqui está o que cada tag faz:
twitter:card: Define o tipo de card. Defina-o comosummaryousummary_large_image.twitter:title: O título exibido no card. Mantenha-o abaixo de 70 caracteres para evitar truncamento.twitter:description: Um breve resumo do conteúdo. Mantenha-o abaixo de 200 caracteres. Este texto aparece abaixo do título na pré-visualização do card.twitter:image: A URL para a imagem exibida no card. Para cards summary_large_image, use imagens com pelo menos 1200 x 628 pixels. Para cards summary, as imagens devem ter pelo menos 144 x 144 pixels. O tamanho máximo do arquivo é 5 MB.twitter:image:alt: Texto alternativo para a imagem, importante para acessibilidade. Descreva o conteúdo da imagem em menos de 420 caracteres.twitter:site: O handle do X do seu site (por exemplo,@SeuSite). Isto é opcional, mas ajuda na atribuição.twitter:creator: O handle do X do autor do conteúdo. Útil para blogs com múltiplos autores.
O X também suporta um mecanismo de fallback. Se as tags Twitter Card estiverem faltando, a plataforma tentará usar tags Open Graph (og:title, og:description, og:image) em vez disso. Isto significa que se você já tem tags Open Graph configuradas, seus links terão pré-visualizações básicas mesmo sem tags Twitter Card dedicadas. No entanto, adicionar tags Twitter Card explícitas dá a você mais controle sobre como seu conteúdo aparece no X especificamente.
Adicionando Twitter Cards com o Yoast SEO
O Yoast SEO é o plugin de SEO mais popular do WordPress, e inclui suporte integrado a Twitter Card. Se você já está usando o Yoast, ativar Twitter Cards leva apenas alguns cliques:
- Vá para SEO > Social no painel admin do WordPress.
- Clique na aba X (Twitter).
- Ative "Adicionar metadados Twitter Card".
- Selecione o tipo de card padrão. Escolha Summary with large image para a maioria dos sites.
- Salve suas alterações.
A partir desse ponto, o Yoast gera automaticamente tags Twitter Card para cada post e página em seu site, extraindo o título, descrição e imagem destacada do seu conteúdo.
Para personalizar o Twitter Card para um post específico, abra o editor de post e role até a meta box do Yoast. Clique na aba Social (o ícone de compartilhar) e depois selecione a aba X. Aqui você pode substituir o título, descrição e imagem padrão para essa página específica. Isto é útil quando você quer que a pré-visualização social seja diferente do título SEO da página, por exemplo, usando uma manchete mais chamativa para compartilhamento social.
Adicionando Twitter Cards com o Rank Math
O Rank Math é outro plugin de SEO popular com integração completa de mídia social:
- Vá para Rank Math > Titles & Meta > Global Meta.
- Role até a seção Social Meta.
- Ative o Twitter Card Type e selecione seu formato de card preferido.
- Opcionalmente, insira seu nome de usuário padrão do X nos campos do Twitter.
- Salve suas alterações.
Para personalização por post, abra qualquer post ou página no editor. Clique no ícone do Rank Math na barra de ferramentas superior e navegue até a aba Social. Mude para a seção do X para definir títulos, descrições e imagens personalizados para aquele conteúdo específico.
O Rank Math também permite que você defina diferentes imagens sociais por post, o que é útil quando sua imagem destacada não tem a proporção certa para Twitter Cards. Você pode fazer upload de uma imagem separada de 1200 x 628 pixels especificamente otimizada para compartilhamento social.
Adicionando Twitter Cards com o All in One SEO (AIOSEO)
O All in One SEO também fornece funcionalidade de Twitter Card:
- Navegue até All in One SEO > Social Networks.
- Clique na aba X (Twitter).
- Ative o Twitter Card e escolha seu tipo de card padrão.
- Insira o nome de usuário do X do seu site.
- Configure as configurações padrão de post e página.
- Salve as alterações.
O AIOSEO também oferece configurações de Twitter Card por post no editor de post sob o painel AIOSEO Settings, aba Social.
Implementação Manual de Twitter Card Sem um Plugin
Se você prefere não usar um plugin de SEO, ou se precisa de controle total sobre a saída, pode adicionar tags Twitter Card manualmente através do arquivo functions.php do seu tema ou de um plugin personalizado específico do site:
function custom_twitter_cards() {
if (is_singular()) {
global $post;
$title = get_the_title();
$url = get_permalink();
// Gerar descrição a partir do trecho ou conteúdo
$excerpt = has_excerpt()
? wp_strip_all_tags(get_the_excerpt())
: wp_trim_words(wp_strip_all_tags($post->post_content), 30);
// Obter imagem destacada
$image = get_the_post_thumbnail_url($post->ID, 'large');
// Obter handle do Twitter do autor a partir do user meta
$author_twitter = get_the_author_meta('twitter', $post->post_author);
echo '<meta name="twitter:card" content="summary_large_image" />' . "
";
echo '<meta name="twitter:title" content="' . esc_attr($title) . '" />' . "
";
echo '<meta name="twitter:description" content="' . esc_attr($excerpt) . '" />' . "
";
echo '<meta name="twitter:url" content="' . esc_url($url) . '" />' . "
";
if ($image) {
echo '<meta name="twitter:image" content="' . esc_url($image) . '" />' . "
";
// Adicionar texto alt da imagem destacada
$thumbnail_id = get_post_thumbnail_id($post->ID);
$alt_text = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
if ($alt_text) {
echo '<meta name="twitter:image:alt" content="' . esc_attr($alt_text) . '" />' . "
";
}
}
// Handle do Twitter do site
echo '<meta name="twitter:site" content="@YourSiteHandle" />' . "
";
// Handle do Twitter do autor (se definido)
if ($author_twitter) {
echo '<meta name="twitter:creator" content="@' . esc_attr($author_twitter) . '" />' . "
";
}
} elseif (is_front_page()) {
echo '<meta name="twitter:card" content="summary_large_image" />' . "
";
echo '<meta name="twitter:title" content="' . esc_attr(get_bloginfo('name')) . '" />' . "
";
echo '<meta name="twitter:description" content="' . esc_attr(get_bloginfo('description')) . '" />' . "
";
echo '<meta name="twitter:site" content="@YourSiteHandle" />' . "
";
}
}
add_action('wp_head', 'custom_twitter_cards');Substitua @YourSiteHandle pelo seu nome de usuário real do X. Para armazenar handles do Twitter dos autores, você pode adicionar um campo personalizado de user meta chamado twitter a cada perfil de usuário, ou usar um plugin como "Extra User Details" para adicionar o campo à tela de edição de perfil.
Melhores Práticas e Especificações de Imagem para Twitter Card
A imagem é o elemento mais importante de um Twitter Card. Acertá-la faz uma diferença significativa no engajamento:
- Summary Card with Large Image: Use imagens com proporção 2:1. O tamanho recomendado é 1200 x 628 pixels. O mínimo é 300 x 157 pixels, mas imagens maiores ficam visivelmente melhores, especialmente em telas de alta DPI.
- Summary Card: Use imagens quadradas com proporção 1:1. O tamanho recomendado é 400 x 400 pixels. O mínimo é 144 x 144 pixels.
- Formato de arquivo: JPG, PNG, WEBP e GIF são suportados. JPG é a escolha mais segura para fotografias. PNG funciona melhor para imagens com texto ou áreas transparentes (embora a transparência seja composta sobre um fundo branco).
- Tamanho do arquivo: Mantenha as imagens abaixo de 5 MB. Arquivos maiores podem não carregar ou serão ignorados pelo processador de cards.
- Evite imagens com muito texto: O X recorta imagens de forma diferente em mobile e desktop. Texto nas bordas de uma imagem pode ser cortado. Mantenha o conteúdo importante centralizado.
- Use imagens únicas por post: Não reutilize a mesma imagem para cada post. Visuais únicos ajudam seu conteúdo a se destacar e impedem que seus tweets pareçam repetitivos.
Como Twitter Cards Interagem com Tags Open Graph
O X usa uma hierarquia de fallback específica ao decidir o que exibir em uma pré-visualização de card:
- Primeiro, ele verifica meta tags
twitter:*explícitas. - Se alguma tag
twitter:*estiver faltando, ele recorre à tag Open Graph equivalente (og:title,og:description,og:image). - Se ambas estiverem faltando, ele usa a tag
<title>da página e tenta extrair uma descrição do conteúdo.
Isto significa que você não precisa estritamente de ambos os conjuntos de tags. Se suas tags Open Graph já estão configuradas (para compartilhamento no Facebook, por exemplo), pré-visualizações básicas de Twitter Card funcionarão. No entanto, há casos em que você quer conteúdo diferente em diferentes plataformas. Por exemplo, você pode querer usar uma imagem em paisagem para o X, mas uma imagem quadrada para o Facebook. Nesse cenário, definir og:image e twitter:image com URLs diferentes dá a você controle específico por plataforma.
A tag twitter:card não tem equivalente Open Graph, então você sempre deve incluí-la explicitamente para definir o tipo de card. Sem ela, o X não renderizará um card, mesmo que todas as outras tags estejam presentes.
Testando e Depurando Seus Twitter Cards
Após adicionar as tags, verifique se tudo funciona corretamente:
- Verifique meta tags com o InspectWP: Execute sua URL através do InspectWP para verificar se todas as meta tags Twitter Card estão presentes no código-fonte da página. O InspectWP listará cada meta tag que encontrar, para que você possa confirmar que os valores corretos estão sendo gerados.
- Teste no X diretamente: Poste um link em um tweet (você pode excluí-lo imediatamente depois). A pré-visualização do card no compositor de tweets mostra exatamente como seu link aparecerá. Se o card não aparecer, espere um minuto e tente novamente. O X pode levar um curto tempo para buscar e armazenar em cache os dados do card para novas URLs.
- Forçar atualização de cache: O X armazena agressivamente os dados de card em cache. Se você atualizou suas tags, mas ainda vê dados antigos, anexe um parâmetro de query como
?v=2à sua URL. Isto força o X a tratá-la como uma nova URL e re-buscar as informações do card. - Verifique problemas de HTTPS: Todas as URLs de imagem em tags Twitter Card devem usar HTTPS. URLs de imagem HTTP serão bloqueadas, e o card será renderizado sem imagem.
- Validar dimensões da imagem: Se seu card mostra uma miniatura pequena em vez da pré-visualização de imagem grande, sua imagem provavelmente é menor que as dimensões mínimas. Verifique a proporção e o tamanho em pixels.
Problemas Comuns de Twitter Card e Soluções
- Card não aparece: Certifique-se de que a meta tag
twitter:cardesteja presente. Esta tag é obrigatória. Sem ela, o X ignora todas as outras meta tags do twitter. Verifique também se sua página é publicamente acessível e não está bloqueada por uma parede de login, proteção por senha ou robots.txt. - Imagem errada exibida: O X armazena dados de card em cache, portanto, imagens recentemente alteradas podem não atualizar imediatamente. Use um parâmetro de query de cache-busting na URL para forçar uma atualização. Verifique também se a tag
twitter:imageaponta para a URL correta e publicamente acessível. - Imagem muito pequena ou recortada incorretamente: Use imagens que atendam aos requisitos de tamanho mínimo. Para cards summary_large_image, mantenha-se em 1200 x 628 pixels ou acima. Evite colocar conteúdo importante perto das bordas.
- Meta tags duplicadas: Se você usa um plugin de SEO e também tem código manual adicionando tags Twitter Card, você terá tags duplicadas. O X normalmente usa a primeira que encontra, mas duplicatas podem causar comportamento imprevisível. Remova o código manual se um plugin lida com isso, ou vice-versa.
- Interferência de plugin de cache: Se você usa um plugin de cache de página, limpe o cache após atualizar sua configuração de Twitter Card. Caso contrário, a versão em cache de suas páginas ainda pode conter as meta tags antigas (ou faltantes).
Melhores Práticas para Otimização de Twitter Card no WordPress
- Padrão para summary_large_image: O formato de imagem grande supera consistentemente o formato de miniatura pequena nas métricas de engajamento. Use-o para todos os posts de blog e artigos.
- Crie descrições convincentes: O texto twitter:description é seu pitch. Escreva-o como uma mini-manchete que faça as pessoas quererem clicar. Mantenha-o abaixo de 200 caracteres e coloque as informações mais importantes no início.
- Configure tags OG e Twitter: Mesmo que o X recorra a tags OG, ter ambos os conjuntos garante pré-visualizações consistentes em todas as plataformas sociais, incluindo Facebook, LinkedIn, Slack e aplicativos de mensagens.
- Teste após atualizações de tema ou plugin: Atualizações de tema ou plugin podem às vezes quebrar a saída de meta tags. Após atualizações importantes, execute uma varredura rápida do InspectWP para verificar se seus Twitter Cards ainda estão funcionando corretamente.
- Use uma imagem padrão de fallback: Configure uma imagem padrão para todo o site nas configurações do seu plugin de SEO. Isto garante que mesmo páginas sem uma imagem destacada ainda mostrem um visual de marca no Twitter Card, como seu logotipo ou um gráfico de marca genérico.