É muito importante validar e verificar como seu artigo ou nova página web será exibida ao ser compartilhada.

Quando uma página presente na web é compartilhada — seja no Facebook, Twitter, Linkedin, Instagram, whatsapp, etc. — geralmente existe algum tipo de visualização prévia da mesma na aplicação a qual ela está sendo compartilhada (um título, trecho de texto, descrição do que se trata, imagem ou qualquer coisa que esteja disponível). Quando você é o autor desse conteúdo, é de extrema importância ter bastante controle sobre as informações que estão sendo exibidas, pois outras pessoas compartilham os links dos seus conteúdos.

Aqui veremos as principais (em minha não tão humilde opinão) ferramentas disponíveis para validação e criação de tags meta para o seu site. Inclusive, as ferramentas que serão citadas são as que uso sempre que posto algum novo conteúdo e não tenho total certeza de como algumas plataformas irão exibi-los. 🧐

Hey Meta

Uma das coisas mais importantes ao adicionar as tags no cabeçalho do seu site, é focar principalmente nas mais essenciais. Para compartilhamento social, as mais importantes são título e descrição. Muitos serviços que permitem o compartilhamento de links usarão essas tags para criar cartões com o objetivo de apresentar uma prévia do seu conteúdo. Mesmo que tenham tags específicas, como Facebook e Twitter, sempre que não encontrarem suas tags, os serviços irão procurar a descrição e título genéricos para saber o que exibir no compartilhamento.

Uma ferramenta que faz um ótimo trabalho com essas tags é o Hey Meta. Nela, você poderá colocar qualquer url para ser verificada e a mesma mostrará quais tags meta encontrou em sua varredura ou, se possível, tentará adivinhar qual deveria estar presente. Essa ferramenta também fornece uma maneira fácil e prática de adicionar as tags essenciais em seu site a partir de um 'template' que eles geram para você na própria plataforma com base no seu conteúdo.

Depurador do Facebook

A empresa Meta, antes conhecida como Facebook, desenvolveu o protocolo Open Graph e o Facebook se utiliza dele para exibir seus cartões de visualização em links de compartilhamento. Dessa forma, o Open Graph se tornou um padrão de compartilhamento social disponível na web e isso é afirmado em sua página inicial:

Embora existam muitas tecnologias e esquemas diferentes que possam ser combinados, não há uma única tecnologia que forneça informações suficientes para representar ricamente qualquer página da Web no gráfico social. O protocolo Open Graph baseia-se nessas tecnologias existentes e oferece aos desenvolvedores algo para implementar.

traduzido de O protocolo Open Graph

Como mencionado anteriormente, o Facebook e outras redes que usam suas próprias tags meta irão retornar às tags base caso não encontrem a sua própria ou as tags Open Graph (OG tags). Entretanto, como também citado, o OG se tornou um padrão de compartilhamento social e, dessa forma, se torna importante implementar ao menos as tags OG primárias em qualquer página que você disponibilizar na internet. As principais são: og:type, og: title, og:description, og:image e og:url.

Como o Facebook é o mais forte nesse ramo, ele também assumiu a responsabilidade de fornecer aos desenvolvedores uma ótima ferramenta para validar as OG tags de qualquer URL. Essa aplicação oferece uma forma de validar e visualizar como as suas páginas irão aparecer quando forem compartilhadas no Facebook.

Validador de cartão do Twitter

Assim como o Facbeook, o Twitter também possui o seu próprio protocolo à parte. As tags para construção do cartão do Twitter sobre seu conteúdo são utilizadas apenas pela rede social, pois a maioria das outras plataformas assumem as tags OG ou as tags nativas como principal foco para a obtenção de dados da url associada.

A maior vantagem e o principal foco em se utilizar dos cartões do Twitter é ter mais controle sobre a manipulação de como o cartão irá representar a sua página na plataforma e, para isso, a rede social possui uma enorme lista de opções para serem incluídas. Devido ao fato de ser algo específico da plataforma, não é um problema se ater as tags meta nativas e OG tags, pois o Twitter continuará utilizando as tags OG e/ou as nativas disponíveis. Aqui você pode verificar quais tags OG presentes em sua página são encontradas e retornadas pelo twitter.

De qualquer forma, as tags do Twitter são ótimas para se utilizar caso você queira mais controle sobre o que irá aparecer no momento do compartilhamento da sua página, pois a plataforma desenvolveu um validador de URLs do twitter para te ajudar a verificar como seu conteúdo irá aparecer para os usuários ao ser compartilhado.

Essas foram as três principais ferramentas que utilizo e acho extremamente interessantes para verificar as informações presentes em minhas tags meta sempre que publico um novo conteúdo. Claro que existem outras muito boas, principalmente visualizadores mais completos porém, opto por elas pois o Hey Meta me ajuda a gerar as tags de uma forma confiável e sempre utilizo as outras duas para validar seu funcionamento e realizar ajustes caso necessário.

Utilize essas ferramentas para obter um controle maior sobre as visualizações do seu conteúdo quando compartilhados. Se você conhecer alguma outra boa ferramenta que possa complementar, eu ficarei muito feliz se compartilhar comigo aqui abaixo!

Espero que essa postagem tenha te ajudado a encontrar o que você procurava! 💙

Links

• Validador dos cartões do Twitter;
• Documentação do Twitter sobre suas tags;
• Validador do Facebook;
• Plataforma Hey Meta;
• O protocolo Open Graph;
• Meta tags que o Google Interpreta.