Ao lançar um novo site ou blog pela primeira vez, provavelmente você desejará compartilhá-lo com seus amigos e familiares imediatamente. Mas se você não configurou corretamente, tudo o que eles verão é um link chato.
Mesmo que a visualização carregue uma imagem, pode não ser a que você deseja ver. Mas você pode consertar isso.
Meta tags são tags HTML que não exibem nenhum conteúdo em sua página da web. Eles vivem dentro do tags em seu HTML. Quando motores de pesquisa e outros serviços, como o Facebook, leem a sua página, eles obtêm informações direcionadas das metatags.
Para muitas pessoas, o Google é a internet. É sem dúvida a invenção mais importante desde a própria Internet. E embora os mecanismos de pesquisa tenham mudado muito desde então, os princípios básicos ainda são os mesmos.
Meta tags são o que você precisa para obter as mídias sociais e mensagens de texto para processar seus links adequadamente. Quando você compartilha um link pelo Facebook, por exemplo, o Facebook segue o link para a página. Em seguida, ele lê a página e tenta descobrir o que tudo é.
Mais importante ainda, ele tenta encontrar um título, uma descrição e uma imagem. Se não conseguir encontrá-los, ele mostrará apenas um link simples, sem enfeites. Para que o Facebook mostre um título, descrição e imagem específicos, você precisará adicionar meta tags específicas para informar o que procurar.
Se sites de mídia social como Facebook e Twitter obtiverem as informações de que precisam em seu site, eles criarão um cartão. Se tudo correr de acordo com o planejado, será como você esperava.
RELACIONADO: Como construir bots no Twitter, Instagram e Reddit usando Python
Se você construiu seu site com HTML simples ou uma estrutura de front-end, adicionar metatags deve ser simples. Eles vão na mesma área que suas tags de título, estilo e script, como no exemplo a seguir:
Lee Nathan - escritor de desenvolvimento pessoal
...
Você pode ver que já existem algumas metatags no lugar. Esses não são os que você precisa para fazer seu site aparecer corretamente nos links; eles são apenas alguns padrões de baixo nível.
Alterar as metatags no WordPress envolve mais. As instruções completas exigiriam um guia completo. Em vez disso, aqui estão algumas dicas para ajudá-lo a começar:
- Se você se sentir confortável em editar seu tema, as metatags devem estar localizadas no header.php arquivo do seu tema atual.
- Se você não consegue acessar seu tema ou não quer lidar com ele, você pode alterar suas metatags com um plugin como Gerenciamento avançado de metatags.
Dê uma olhada em os melhores provedores de hospedagem WordPress se você estiver interessado em lançar um site na plataforma.
Como criar um cartão do Facebook
Agora que você descobriu como acessar suas metatags, pode começar a editá-las. Estas são as tags mínimas que o Facebook deseja ver:
As propriedades de título e descrição informam ao Facebook qual texto exibir. A propriedade URL pode ser vinculada a uma subpágina para promoções especiais ou testes A / B.
A propriedade da imagem deve ser um endereço completo, não relativo à sua página de índice, como /image.jpg. O melhor tamanho de imagem a ser usado é 1200 x 628, pois esse tamanho será o mais compatível em sites e dispositivos de mídia social.
Como criar um cartão do Twitter
O cartão do Twitter é quase igual ao cartão do Facebook, mas com metatags diferentes. Esta é a aparência das meta tags do Twitter:
As propriedades de título e descrição são iguais às do Facebook; a propriedade da imagem também segue as mesmas regras. E 1200 x 628 é um bom tamanho para começar.
A principal diferença é a propriedade do cartão. Este exemplo usa "summary_large_image" para criar um cartão que se parece com o cartão do Facebook. O Twitter tem outras opções, no entanto.
Como ter certeza de que sua visualização está correta
Você poderia postar um tweet e excluí-lo rapidamente meia dúzia de vezes até acertar o cartão. Você também pode enviar uma mensagem do Facebook para você mesmo. Mas esses métodos são meio desajeitados. Felizmente, os dois serviços fornecem uma ferramenta útil para facilitar a verificação de seus cartões.
Facebook tem um depurador de compartilhamento. E Twitter tem um validador de cartão. Ambas as ferramentas fazem a mesma tarefa de permitir que você veja como os links funcionam; eles apenas usam nomes diferentes.
Outros aspectos que você deve testar
Agora você conseguiu que o link do seu site tivesse uma ótima aparência nas duas grandes redes sociais. Provavelmente, ficará bem em qualquer lugar, mas você deve verificar novamente. Por exemplo, se você tiver informações na parte inferior ou superior de uma imagem, ela pode ser cortada no celular.
Móvel
Antes de prosseguir, é uma boa ideia verificar se o link ainda parece bom no celular. Conforme mencionado, sua imagem pode ficar cortada na tela menor. O exemplo mostrado anteriormente tinha a imagem muito baixa, então você só podia ver a metade superior da cabeça.
SMS e mensageiros
Basta enviar um texto (ou mensagem por meio de um serviço como o WhatsApp) para você com o link. Você não precisa se preocupar com uma ferramenta de validação. Provavelmente, se ficar bem nos aplicativos de mídia social, ficará bem aqui.
Se você está trabalhando em seu site pessoal, com certeza deseja que ele tenha uma boa aparência no LinkedIn. Felizmente, O LinkedIn também oferece uma ferramenta de validação chamado de inspetor de postagem. Além disso, você não precisa se preocupar com mais meta tags porque o LinkedIn usa as tags do Facebook.
O que fazer a seguir
As informações que cobrimos devem ser suficientes para você começar. Mas se você quiser saber mais, dê uma olhada Guia de tags do Facebook ou Página do Twitter sobre tags.
A web está repleta de ferramentas para ajudar qualquer pessoa a criar suas próprias imagens com aparência profissional e compartilháveis. Aqui estão nossos favoritos.
- Programação
- HTML
- Pagina inicial
- Ferramentas para webmasters
Lee é um nômade em tempo integral e um polímata com muitas paixões e interesses. Algumas dessas paixões giram em torno de produtividade, desenvolvimento pessoal e escrita.
Assine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas técnicas, análises, e-books grátis e ofertas exclusivas!
Mais um passo…!
Confirme o seu endereço de e-mail no e-mail que acabamos de enviar.
