Bonsai UX
Bonsai UX

UI, Design e User Experience de um ponto de vista zen

Share


Our Newsletter


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tags


avrt

Twitter


Bonsai UX

SEO: Tags de engajamento (ou tags de Redes Sociais)

Poe BellentaniPoe Bellentani

Essa é uma série de posts baseados em uma documentação que uso no cotidiano e também como material base de um workshop para a galera de Frontend Dev com quem trabalho (se alguém estiver interessado, manda e-mail!).

--

As chamo carinhosamente de "tags de engajamento", porque são elas que fazem o compartilhamento em redes sociais (principalmente Twitter e Facebook) ficarem com aquela cara "bonitinha".

Quando o usuário compartilha seu site em redes sociais essas tags definem o título do post, imagem, URL e demais detalhes que irão aparecer para criar aqueles "cards" com design detalhados e que chama a atenção para o clique ou compartilhamento. São ótimas ferramentas de conversão.

Twitter Cards

Referência: https://dev.twitter.com/cards/overview

Existem vários tipos de metatags que podem ser utilizadas pelo Twitter, a mais comum deles é o "summary card", que é um resumo do post em si. Porém, isso pode variar de acordo com a aplicação ou função da página. O ideal é estudar caso a caso.

<meta name="twitter:card" content="summary" />

<meta name="twitter:site" content="@flickr" />

<meta name="twitter:title" content="Small Island Developing States Photo Submission" />

<meta name="twitter:description" content="View the album on Flickr." />

<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />

<meta name="twitter:url" content="https://www.flickr.com/photos/unicphoto/sets/72157645001703785/" />

Os formatos de Twitter Card são:

Facebook tags

Referência: https://developers.facebook.com/docs/sharing/best-practices

O Facebook usa como referência o Open Graph, que cria objetos que são utilizados para compartilhamento em sua rede.

O objeto principal que utilizamos como modelo é para página, que pode ser utilizado como referência em conteúdos institucionais, tanto para portais quanto para e-commerce.

No ítem três da URL de referência existem exemplos práticos, mas a estrutura modelo base pode ser considerada:

<meta property="og:title" content="Aprenda a usar SEO para o Facebook, até 65 caracteres é o ideal" />

<meta property="og:site_name" content="Bonsai UX" />

<meta property="og:url" content="http://bonsaiux.com.br/blog" />

<meta property="og:description" content="Uma descrição detalhada do conteúdo, o ideal é que seja 2 ou 4 sentenças, com uma limitação de caracteres até 160." />

<meta property="og:image" content="http://bonsaiux.com.br/content/images/2015/03/startup-593328.jpg" />

<!-- tags opcionais -->

<meta property="og:type" content="website" />

<meta property="og:locale" content="pt_BR" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale:alternate" content="es_ES" />

Open Graph tags are included in your page’s HTML and allow the Facebook Crawler to generate previews when your content is shared on Facebook.

We give examples below, but the basic Open Graph tags you should implement are:

As tags abaixo não são obrigatórias, mas melhoram muito as taxas de conversão e de engajamento dos usuários:

Demais posts dessa série:

Comments