Como evitar o olhar vergonhoso que seu site tem no Twitter e no Facebook

Foto de Hannes Wolf em Unsplash

Se você já entende o que são o Facebook Open Graph e o Twitter Cards, este artigo não é direcionado a você . Por favor, passe para alguém que não entende o que são.

Introdução

De acordo com a Mashable , 52% dos links compartilhados no Twitter são artigos e imagens, com imagens ocupando cerca de 36% do bolo. Em média, as pessoas compartilham cerca de 30 milhões de imagens únicas por dia.

De Mashable

Você suspirou?

Eu fiz.

Tweets com links de imagem recebem 2x a taxa de engajamento daqueles sem, diz Buffer .

Agora, essas estatísticas são apenas para o Twitter. As estatísticas combinadas de outras plataformas populares de mídia social vão te surpreender.

A linha inferior é: os seres humanos são seres visuais.

Se o seu site for compartilhado em mídias sociais, e parecer um ensopado azedo chato, o engajamento será baixo. Compartilhe um link que apareça bem na linha do tempo das pessoas e você terá mais chances de conseguir o tipo de envolvimento que procura.

Não levar isso em consideração ao criar seu site? Você está definitivamente fazendo algo errado.

Qual é exatamente o visual da vergonha?

Bem, nem todos os links são criados iguais. Considere os gráficos abaixo. Eles representam a aparência de dois links diferentes compartilhados no Twitter. Um é do Medium, o outro de um site meu.

Este é um artigo médio compartilhado, e definitivamente parece bom!

O gráfico anterior tem uma imagem grande, título, descrição e geralmente parece bom.

Aqui está o meu link de site compartilhado e isso não parece tão bom. Coisas tristes 🙁

Isso simplesmente não parece tão bom. Então, o que o Medium está fazendo para tornar seus URLs compartilhados ótimos?

Indo do zero ao herói

Vamos dar uma abordagem passo-a-passo para levar um site de “olhar envergonhado” para “enlouquecedor”.

Por nossas considerações, usarei um dos meus sites, TheReduxJSBooks.com , como o rato de laboratório.

Primeiro, para visualizar como a visualização do seu link será exibida no Twitter e no Facebook, as duas empresas fornecem depuradores onde você cola o link e dá uma olhada por si mesmo.

Aqui está o link para o depurador do Facebook Sharing , e isso para o Twitter.

Começando em "zero", vamos ver como TheReduxJSBooks.com parece quando compartilhado agora.

Aqui está o que temos no facebook:

Os pobres parecem quando compartilhados no Facebook (FB). Como simulado no debugger de compartilhamento do FB, o FB conseguiu exibir o URL e o primeiro bit do texto no site

E isso no Twitter:

Tão ruim – nenhuma prévia é mostrada 🙁 O Twitter não tira nenhuma informação do site. Você tem que fazer o trabalho.

Aqueles não parecem impressionantes no momento, mas vamos corrigir isso em breve.

Para ter algum controle sobre como seus links se parecem quando compartilhados, o Facebook desenvolveu a tecnologia chamada Open Graph . Está quase se tornando um padrão em outros serviços, e não apenas no Facebook. Twitter chama os seus algo de diferente, cartões de Twitter .

Vamos ver como isso funciona.

Facebook Abrir Gráfico

Nos termos mais simples, o Facebook Open Graph trata de incluir certas meta na cabeça do seu html .

Esses metadados serão lidos em seu site e afetam o modo como seu link é visualizado quando compartilhado.

Agora, dê uma olhada nos resultados finais que alcançaremos quando o link for compartilhado no Facebook.

O resultado final que estamos buscando.

O que é diferente agora?

Veja o que é diferente.

Agora, isso parece lindo. Com uma imagem, um título e uma descrição personalizados, você controla totalmente como a visualização do link é exibida.

Agora, aqui está o código que produziu a pré-visualização que você vê acima:

 <!-- Facebook Opengraph --> 
<meta property="og:url" content ="https://thereduxjsbooks.com" />
<meta property="og:type" content ="website" />
<meta property="og:title" content ="The ReduxJS Books" />
<meta property="og:description" content ="What you ar about to view is a complete guide to mastering Redux from total novice to badass, and with every skill level catered for. Ready?"/>
 <meta property="og:image" content ="https://thereduxjsbooks.com/images/redux-trio-1200x630.png" /> 
<meta property="og:image:alt" content ="3 books on ReduxJS. A sequel that takes you from beginner to pro." />
<meta property="og:image:type" content ="image/png" />
<meta property="og:image:width" content ="1200" />
<meta property="og:image:height" content ="630" />

Eu sei que parece um monte de código, mas não é.

Estes são colocados na cabeça da sua página html . Por exemplo

 <head> 
<!-- put them here -->
</head>

Agora, vamos examinar cada meta tag do Open Graph, uma após a outra.

Aqui está o primeiro:

 <meta property ="og:url" content ="https://thereduxjsbooks.com" /> 

O que você tem aí é uma meta com dois atributos, property e content .

property define a propriedade da meta tag em questão. Nesse caso, ele tem o valor, og:url .

Como você deve ter adivinhado, og é abreviação de Open Graph e url indica que isso descreve o url do link compartilhado. O content seguida, contém o valor para o url , ou seja, " https://thereduxjsbooks.com ".

Essa foi fácil.

Agora, o mesmo vale para as tags de type , title e description . Você vê isso?

As tags de tipo, título e descrição.

O próximo conjunto de meta tags é aquele que descreve a visualização da imagem. O primeiro tem uma propriedade, og:image , e o content é o URL da imagem.

 <meta property ="og:image" content ="https://thereduxjsbooks.com/images/redux-trio-1200x630.png" /> 

Uma coisa importante a notar é que, para o Facebook Open Graph, você deve fornecer a width e a height da imagem – de preferência 1200px by 630px

As outras tags apenas descrevem o texto alt , type , width e height .

O texto alt, tipo, largura e altura da imagem!

Ótimo! Agora você conhece os bits mais importantes do Facebook Open Graph.

Twitter Cartões

Como o Facebook, você também tem controle total sobre como seu link é exibido quando compartilhado no Twitter.

Se você compartilha seu link no Twitter, supondo que você já tenha as metatags do Facebook Open Graph definidas, você realmente obterá alguma prévia.

Pode parecer algo assim:

Algumas descrições básicas são extraídas das metatags do Facebook Open Graph. Não é tão ruim, na verdade.

Não é ruim, mas não é bom também.

Quando terminarmos, aqui está o que teremos no Twitter:

O melhor resultado para apontar no Twitter.

Como você pode ver, a imagem de visualização é muito maior e a descrição não é tão longa. O Facebook leva mais caracteres – mas não o Twitter.

Então, aqui estão as tags básicas que você precisa.

 <!-- Twitter Card --> 
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://thereduxjsbooks.com/images/redux-trio-560x300.png" />
<meta name="twitter:image:alt" content="3 books on ReduxJS. A sequel that takes you from beginner to pro." />
<meta name="twitter:description" content="For every book you buy, we will send a free copy to a developer in India, Nigeria, and Tunisia who can't afford the cost."
/>

Simples!

A primeira meta tag é super importante .

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

Ao contrário do Facebook Open Graph com os atributos de property e content , os cartões do Twitter usam atributos de name e content .

Aqui, o nome é twitter:card e o conteúdo, summary_large_image . Isso descreve o tipo de cartão do Twitter que você deseja. Existem muitos tipos diferentes de cartões do Twitter disponíveis, mas o summary_large_image oferece a grande visualização de imagem que você viu anteriormente.

Ao contrário do Facebook, você não precisa descrever a width e a height

Basta ter o nome, twitter:image e URL de content !

 <meta name="twitter:image" content="https://thereduxjsbooks.com/images/redux-trio-560x300.png" /> 

Por fim, inclua apenas o texto alt da imagem e uma description mais curta para o Twitter.

 <meta name="twitter:image:alt" content="3 books on ReduxJS. A sequel that takes you from beginner to pro." /> 
<meta name="twitter:description" content="For every book you buy, we will send a free copy to a developer in India, Nigeria, and Tunisia who can't afford the cost."
'' />

E é isso!

O que é ainda mais bonito é que configurar isso significa que outros serviços podem igualmente procurar esses metadados e exibir seus links lindamente!

Aqui está uma prévia para quando o link é compartilhado no Slack.

O mesmo link compartilhado no Slack. Isso parece bom!

O Slack é apenas um dos muitos serviços que honram a tecnologia Facebook Open Graph e Twitter Card.

Conclusão

Eu pulei muitas informações para manter este artigo curto. Para mais informações técnicas, não deixe de conferir os documentos oficiais do Facebook Open Graph e Twitter Cards .

Agora você sabe que essas visualizações de link bonitas no Twitter e no Facebook não foram feitas por mágica.

Alguém escreveu o código e agora você sabe como.

Vá construir sites que pareçam super incríveis quando compartilhados no Twitter e no Facebook!