Como adicionar Twitter Cards - Blogger e WordPress

Compartilhar seu conteúdo nas redes sociais é a melhor forma de gerar trafego orgânico e engajar o público com sua marca. É comum sempre que entrar no Facebook ou Twitter ver links com a sugestão que sejam clicados, e isso pode fazer uma grande diferença quando o assunto é reconhecimento.

A Meta Tag do Twitter Cards nada mais é que a apresentação do seu conteúdo para o Twitter. Usando-a você poderá garantir que apenas colocar o link do seu site/artigo, ela apresentará seu conteúdo com descrição e imagem – automaticamente para a rede social, assim diminuindo seu trabalho com upload de imagens, descrição e encurtadores de links.

Isso pode não parecer grande coisa para a maioria, mas por que escrever algo se ninguém lê? Engajamento é o nome do jogo em plataformas de mídia social como Twitter e Twitter Cards (e imagens em geral) comprovadamente aumentam o engajamento. Neste artigo, direi o que é o Twitter Card e como adicionar a Meta Tag corretamente em seu blog do Blogger ou WordPress.

Quais os benefícios do uso do Twitter Cards? 

  • Te dá mais visibilidade no Twitter
  • Te ajuda a ganhar seguidores com interações imersivas
  • Fazem seus Tweets mais atrativos e "clicáveis"
  • Atrai tráfego para seu site
  • Encorajam conversões de investidores

É um fato conhecido que tweets com anexos de mídia obtêm maior atenção do que a média de tweets. Os tweets com imagens chegam a um aumento de 55% nos leads e de 41% nos retweets. Só faz sentido que os Twitter Cards tenham um impacto semelhante.

Devo admitir que eu comecei a usar essa tag muito recentemente, antes eu não tinha ideia de como ela era importante e sequer achava um meio de a fazer funcionar da maneia que eu queria. Veja: 

Antes de ADICIONAR o Twitter Cards
Antes de começar a usar eu colocava links inteiros ou encurtadores de link, fazendo o upload manualmente das imagens e colocando o título do artigo. Assim, não sobrava espaço para uma descrição ou coisa do tipo, tendo em vista que o twitter tem um limite de caracteres.

Depois de ADICIONAR o Twitter Cards
Após aplicar o Twitter Card, basta soltar o link que ele detecta as demais meta tags do site (caso esteja configurado), imagem de destaque, título, descrição e Url do site.

Mas e aí, como que faz para aplicar o Twitter Cards no meu blog?
Neste artigo irei te ensinar em duas plataformas: Blogger e WordPress. Irei começar a falar sobre como fazer no Blogger, mas caso você veio aqui pelo WordPress, basta clicar no link que está marcando-o agora OU rolar a página.

Método Blogger

Passo 1: Faça login em sua conta do Blogger e vá para Painel => Tema => Personalizar ▼ => Editar HTML.

Edite o HTML

Passo 2: Você verá todo o código do seu tema em um grande campo. Procure pela tag <head> ou </head> utilizando as teclas 'CTRL+F' no teclado – quando aparecer a caixa de pesquisa. Quando encontrar, dê um Enter abaixo da tag e cole o código a seguir:

<!--Twitter Card começo-->
<b:if cond='data:blog.pageType == "index"'> <!--homepage-->
 <meta name="twitter:card" content="summary" />
 <meta name="twitter:description" expr:content='data:blog.metaDescription' />
 <meta name="twitter:title" expr:content="data:blog.pageTitle" />
 <meta name="twitter:site" content="@ousuariodoseutwitter" />
 <meta name="twitter:image" content="A_URL_DO_SEU_LOGOTIPO" />
 <meta name="twitter:creator" content="@ousuariodoseutwitter" />
</b:if>
<b:if cond='data:blog.pageType == "static_page"'> <!--page-->
 <meta name="twitter:card" content="summary" />
 <meta name="twitter:description" expr:content='data:blog.metaDescription' />
 <meta name="twitter:title" expr:content="data:blog.pageTitle" />
 <meta name="twitter:site" content="@ousuariodoseutwitter" />
 <meta name="twitter:image" content="A_URL_DO_SEU_LOGOTIPO" />
 <meta name="twitter:creator" content="@ousuariodoseutwitter" />
</b:if>
<b:if cond='data:blog.pageType == "item"'> <!--blog post-->
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:description" expr:content='data:blog.metaDescription' />
 <meta name="twitter:title" expr:content="data:blog.pageName" />
 <meta name="twitter:site" content="@ousuariodoseutwitter" />
 <meta name="twitter:image" expr:content="data:blog.postImageUrl" />
 <meta name="twitter:creator" content="@ousuariodoseutwitter" />
</b:if>

<!--Final Twitter Card by Café com Net-->

Passo 3: Edite as áreas destacadas em azul e salve o seu tema. Agora, que tal testar o uso Twitter Card Validator? Ele mostra se seus cards estão aparecendo corretamente para o público, basta colar o link de algum artigo do seu site ou da homepage se preferir e ver como ficou:

Twitter Card Validator

Método WordPress

Usuários do WordPress encontrarão a tag </head> em seu arquivo header.php. Caso usem o plugin Yoast SEO, podem utilizá-lo. Vá para SEO> Social> Twitter. Você só pode escolher entre dois cards no momento – resumo, e resumo com uma imagem grande. Existem também diversos plug-ins para integração de cards do Twitter disponíveis. Veja abaixo mais detalhes sobre como adicionar ao WordPress. A boa notícia é que a plataforma já está configurada para cards do Twitter, então é muito fácil de configurar.

Passo 1: Faça login no painel do administrador do WordPress. Na barra lateral esquerda, vá para Configurações => Compartilhamento. Vá para a seção Twitter, clique no botão conectar e continue permitindo que o blog autorize sua conta do Twitter.

Passo 2: Vá para Configurações => Leitura => Visibilidade do site e permita a Indexação de Pesquisa.

Passo 3: Vá para o validador antes apresentado e cole a URL da sua última postagem. Ao compartilhar seus links de postagem do blog, eles incluirão automaticamente o Twitter Card apropriado. Agora, tudo o que você precisa fazer é compartilhar os links do seu blog/site normalmente e eles incluirão automaticamente o Card.

Este artigo lhe foi útil? Compartilhe com mais pessoas para saberem o uso correto dos Twitter Cards! :) 

3 Comentários

  1. Oi Felype Oliveira, seu artigo me ajudou muito. Já havia usado outros códigos, porém não deram certo. Esse tá completo. Parabéns pela sua iniciativa de ajudar. Que Deus continue te abençoando grandemente.

    ResponderExcluir
    Respostas
    1. Oi, Julio. Obrigado pelo comentário. É sempre um prazer poder ajudar as pessoas de alguma forma, o verdadeiro intuito de eu ter criado esse blog. Volte sempre que precisar, estamos aqui para ajudar!

      Um abraço, se cuida!

      Excluir

Postar um comentário

Postagem Anterior Próxima Postagem

PUBLICIDADE

PUBLICIDADE