Como definir a imagem social que se expande no link do site

Se você acabou de compartilhar seu site com outra pessoa ou em uma plataforma de mídia social, e ficou desapontado por o link não ter sido expandido, é uma solução fácil para tornar seus links mais apelando e melhorando o SEO.

É definido com uma meta tag Open Graph

Se você compartilhar um link de site na maioria das plataformas sociais ou mensagens diretas, ele será expandido automaticamente com uma imagem, título e slogan sofisticados, da seguinte forma:

Isso é definido com uma metatag, chamada og: image e também og: title e og: description. Todo esse sistema é chamado de protocolo Open Graph, suportado pela maioria dos sites sociais. Você pode ler mais sobre isso aqui.

A parte importante é como você a define. São apenas algumas metatags:

 < meta property = "og: image" content = "https://i. imgur. com/imagelink. jpg" > < meta property = "og: title" content = "Título do site" / > < meta property = "og: description" content = "Descrição do site" / > < meta property = "og: type" content = "website" / > < meta property = "og: url" content = "https://example. com/" / > 

O Twitter reconhecerá as tags Open Graph, mas também possui as suas próprias:

 < meta name = "twitter: title" content = "Título do site" > < meta name = "twitter: description" content = "Descrição do site" > < meta name = "twitter: image" content = "https://i. imgur. com/imagelink. jpg" > 

O Facebook tem uma ótima ferramenta que você pode usar para depurar esses links, para que você não precise enviá-lo para si mesmo um bilhão de vezes.

Via: How to Geek