Parceiros

Curta-nos no Facebook! - Café com Net

Como adicionar Twitter Cards no Blogger e WordPress - Passo a Passo

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! :) 

Postar um comentário

0 Comentários