Blog sobre WordPress
No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
Cadastrar e-mail
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
No Result
View All Result
Blog sobre WordPress
No Result
View All Result

Início » WordPress Mobile » Twitter Card – o recurso para seu tweet ir além dos 140 caracteres

Twitter Card – o recurso para seu tweet ir além dos 140 caracteres

A combinação do WordPress com o plugin Yoast SEO, lhe permite configurar o recurso Twitter Card em seus posts, páginas e listagens de conteúdo.

Leandro Vieira by Leandro Vieira
3 anos ago
Reading Time: 7 min
1
Twitter Card – o recurso para seu tweet ir além dos 140 caracteres
Compartilhe no FacebookCompartilhe no LinkedIn
Audio

Um tweet sempre foi marcado pelos seus 140 caracteres. Algo que se resumia em puro, e simplesmente, textos e emotions.

Conteúdo relacionado

O conceito e aplicabilidade do Mobile First

WordPress e o desenvolvimento de aplicativos móveis

Não use Design Adaptativo. Considere o Design Responsivo

Com o recurso Twitter Card você pode agregar um elemento de mídia como fotos e vídeos ao tweet.

Sabemos que uma imagem diz mais do que mil palavras.

E um tweet com recursos multimídia tem maior probabilidade de direcionar tráfego para o seu site, e gerar mais engajamento na rede social.

O mecanismo é adicionado nas páginas da sua presença digital através de uma marcação HTML.

Páginas HTML com o método aplicado, exibirá a “Card” no tweet que contém a URL da referida página.

Esse card vai destacar o tweet e ficará visualmente mais atrativo aos usuários.

Podemos considerar o Twitter Card como um recurso similar ao Open Graph. No entanto, é exclusivo a rede social do pássaro azul.

Para que serve e as vantagens

Mantemos uma presença social para estarmos mais próximos do nosso público.

Bem como para ser encontrado, gerar novas oportunidades e se relacionar com aqueles simpáticos a nossa causa, negócio ou propósito.

Além de nós, temos milhões de outras presenças ativas na rede. O que significa dizer que estamos “brigando” pela atenção do usuário.

Quanto mais atenção eu tenho, maior será meus índices de interação, que vão corresponder em mais engajamento.

Como o Twitter card adiciona um elemento visualmente rico ao tweet, a probabilidade de destaque e interação é maior.

Por tanto, o recurso serve para isso. Dar uma ênfase maior aos seus tweets.

E com essa ênfase, eles se destacarão mais. Sua probabilidade de chamar atenção e interagir será maior.

Você ganhará mais seguidores, produzirá mais tráfego para sua presença digital e terá uma maior chance de conversão de negócios.

Exemplos de uso e como usar

Como dissemos, as cards são definidas através de meta-tags adicionas às suas páginas web.

Portanto, basta adicionar essa marcação HTML.

As páginas com esse código vão exibir a card contendo a imagem ou vídeo aplicado.

Mas, primeiramente, você deve conhecer e definir o tipo de card a ser utilizado.

Existem quatro tipos:

  1. Summary Card;
  2. Summary Card with Large Image;
  3. App Card;
  4. Player Card.

Você pode consultar todos os detalhes de cada tipo na documentação do protocolo.

Dado o nosso contexto, vamos focar no tipo de card usualmente utilizado em blogs e sites.

Os tipos de card para blog e site

Os tipos Summary Card e Summary Card with Large Image são os utilizados em blogs e sites.

Ambos exibem um título, descrição e imagem. Enquanto o Summary Card exibe uma miniatura de imagem, o outro tipo exibe uma imagem destacada proeminentemente.

Exemplo de um Tweet com o Twitter Card aplicado.

As meta-tags para implementação do recurso

Basicamente precisamos considerar quatro tags meta. Cada uma delas vai representar o que precisamos para termos o visual rico esperado.

A definição do tipo de card, o título, a descrição e a imagem.

O nome dessas metas são precedidos por “twitter:”.

O valor dessas tags são englobados pelo atributo “content”.

Abaixo um exemplo de marcação HTML com as quatro referidas meta-tags.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="A ferramenta para automatizar tarefas no servidor com WP" />
<meta name="twitter:title" content="WP-CLI - A interface de linha de comando para WordPress" />
<meta name="twitter:image" content="https://cdn.blog.apiki.com/wp-content/uploads/sites/2/2020/04/wp-cli.png" />

Como implementar o Twitter Card no WordPress

Existem vários plugins no repositório para te ajudar na implementação do recurso no WP.

Particularmente, eu prefiro fazer uso do Yoast SEO para cumprir a missão.

Primeiro, porque fica integrado com a análise de SEO e Open Graph. Logo, faço as três coisas de uma só vez.

Segundo, não vejo a necessidade de ter uma outra solução especificamente para essa finalidade dado que o referido plugin já realiza o trabalho, e muito bem.

Mas caso você não faça uso do Yoast SEO, existe diversos outros no repositório oficial do WordPress.

A configuração do recurso no Yoast SEO

Através da opção Redes Sociais > Twitter do plugin Yoast SEO, temos uma interface para ativarmos o Twitter card e definirmos o tipo de cartão a ser utilizado.

Essa configuração é padrão para todo o site, ou seja, para os posts, as páginas e listagens .

Exemplo da interface de configuração do Twitter Card através do plugin Yoast SEO

A implementação em Posts e Páginas

O Yoast SEO adiciona um box na interface de edição dos Posts e Páginas.

Nesse box, uma das opções é chamado de Redes Sociais, a qual exibe duas opções: Facebook e Twitter.

No box chamado Twitter, é onde implementamos as informações para inclusão do recurso no Post ou na Página em questão.

Exemplo da interface do box de configuração do Twitter Card através do plugin Yoast SEO

Basta preencher os três campos disponíveis para personalizar o Título, a Descrição e a Imagem a ser utilizada pelo Twitter.

A implementação em listagens de categoria e tags

O mesmo box é disponibilizado na edição de Categorias e Tags de Posts.

Da mesma forma que podemos personalizar as informações dos conteúdos quando compartilhados, também podemos fazer o mesmo para as nossas páginas de listagem de conteúdo.

Como validar a implementação do Twitter Card

O Twitter disponibiliza uma ferramenta chamada Card validator.

Nessa ferramenta informamos o endereço de uma página e, a partir disso, podemos visualizar como o Twitter será exibido.

Bem como podemos visualizar o log com informações sobre a página consultada.

Exemplo de resultado de uma consulta no Card validator do Twitter

Conclusão

Quanto mais pessoas compartilharem os conteúdos da sua presença digital, maior será seu alcance em plataformas sociais.

Isso gera mais tráfego e aumenta a probabilidade de conversão.

Com a implementação do Twitter Card você consegue ter um maior controle e usar informações mais relevantes no âmbito social.

Você pode, por exemplo, usar um título para uma postagem no seu blog e outro título no Twitter para o mesmo conteúdo.

Você tem utilizado esse recurso de alguma forma mais estratégica?

Tags: marketing digitalsocial mediaTwitteryoast
Share76Share1SendShare
Previous Post

WP-CLI – A interface de linha de comando para WordPress

Next Post

Usuários e senhas fortes para melhorar a segurança no WordPress

Leandro Vieira

Leandro Vieira

Uma das grandes referências de WordPress no Brasil, entusiasta e evangelista da plataforma. Fundador e CEO da Apiki, empresa especializada no desenvolvimento web com WordPress.

Related Posts

Como personalizar sua mobile branding no Google
WordPress Mobile

Como personalizar sua mobile branding no Google

4 de agosto de 2020
Como implementar Mobile First
WordPress Mobile

Como implementar Mobile First em projetos WordPress

15 de janeiro de 2021
O protocolo Open Graph no WordPress
WordPress Mobile

O protocolo Open Graph no WordPress

15 de janeiro de 2021
Tags Mobile
WordPress Mobile

Tags para Mobile First no cabeçalho da página

19 de agosto de 2020
Next Post
Usuários e senhas fortes para melhorar a segurança no WordPress

Usuários e senhas fortes para melhorar a segurança no WordPress

As mudanças do Google para com a meta tag Robots

As mudanças do Google para com a meta tag Robots

Comments 1

  1. Pingback: 7 ações para você vender mais na Black Friday 2020 - Apiki

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Receba no seu e-mail uma série de conteúdos sobre Infra para WordPress.

  • Este campo é para fins de validação e não deve ser alterado.

Facebook LinkedIn Instagram Twitter Youtube Github RSS

Sobre a Apiki

Empresa especializada em WordPress com três unidades de negócios.

  1. Design e Desenvolvimento;
  2. Infra e Hospedagem;
  3. Suporte e manutenção.

Em resumo, só fazemos uma coisa em WordPress: tudo.

Páginas do Apiki.com

  • Apiki.com
  • Sobre a Apiki
  • Hospedagem
  • Desenvolvimento
  • UX & UI para WordPress
  • Growth em WordPress
  • Suporte
  • Atendimento

Páginas do Blog

  • Sobre
  • Newsletter
  • Desenvolvimento WordPress
  • Segurança para WordPress
  • WordPress Mobile
  • Infra para WordPress
  • WordPress SEO
  • WordPress Performance
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.

No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.