Meta Tags – Porque devemos utilizar

Google Meta Tags

Neste artigo vamos analisar como incluir as principais meta tags utilizadas hoje para mapeamento do seu website em motores de buscas e redes sociais.

O que são Metadados?

Metadados são basicamente dados sobre outros dados, ou dados que fornecem informações sobre uma aplicação web por exemplo. Agrega conteúdo dentro dos valores de cada metadado (Ex: description, keywords) em especifico, garantindo que a informação do seu site seja transmitida como planejado para motores de buscas ou redes sociais que mapeiam links e exibem essa informação para visualização do usuário.

Porque utilizar e se atentar ao Metadados?

Todo website hoje precisa ter esses dados declarados para facilitar que motores de buscas do Google e Bing, por exemplo, apresentem seu website da melhor forma possível, com as informações que você deixou destinada para quem está buscando serviços e precisa de uma informação prévia da empresa. Além disso, atualmente, redes sociais são os locais com maior numero de compartilhamento de links. Porém, se o seu website não estiver com os Metadados devidamente declarados, os usuário vão encontrar dificuldades para aceitar o conteúdo do seu link visto que o mesmo não é apresentado de forma a gerar credibilidade. Note que essas informações previamente configuradas padronizam e garantem que ao compartilhar o link do seu website, o mesmo forneça uma prévia dos serviços prestados pela empresa, no caso de um resultado de busca por exemplo ou compartilhamento de link no Facebook e quem sabe até mesmo um pin no Pinterest.

Como inserir os Metadados no seu Website

Primeiro Case – Meta tags para motores de busca

Obs.: todas meta tags devem ser declaradas dentro da tag <head> do código HTML.

Exemplo:

<title>Free Web Hosting Domain Name Registration Services</title>
<meta name="description" content="Free Web hosting from the best web hosting domain name registration provider...">

Google Meta Tags

Meta tags utilizadas por motores de buscas:

<meta name="description" content="Informações sobre o serviço, descrição do mesmo"/>
<meta name="keywords" content="Palavras chaves relacionadas ao serviço e ao conteudo. Ex: social, web, code"/>
<meta name="author" content="Define um autor de conteúdo para link"/>
<meta name="copyright" content="Define os direitos reservados"/>
<meta name="application-name" content="Define o nome da aplicação, geralmente o nome do projeto"/>

Não só mecanismos de busca utilizam essas meta tags para mapear informação, alguns outros serviços também utilizam, o que é ótimo pois relacionam informação relevante ao link.

Outros serviços como por exemplo redes sociais utilizam outros métodos para captar essa informação, vamos analisar os mesmos abaixo.

Segundo Case – Meta tags do Open Graph para o Facebook e outros serviços que utilizarem o Open Graph

O Facebook utiliza o The Open Graph Project para captar as informações nas meta tags de um link, para exibir ele da forma correta quando compartilhado dentro da rede social.

Vamos analisar um exemplo:

Facebook Meta Tags Open Graph

Considere o seguinte código para o exemplo da imagem:


&lt;meta property="og:title" content="Google adds coral reefs to maps"/&gt;
 &lt;meta property="og:image" content="Caminho da imagem no servidor. Ex: img/img.jpg"/&gt;
 &lt;meta property="og:url" content="http://www.bbc.co.uk/news/tech..."/&gt;
 &lt;meta property="og:description" content="Google adds images coral reefs aroud the world to its street view mapping service after teaming up a with a group of scientists."/&gt;

Obs.: Como informado anteriormente, o facebook utiliza metadados de um projeto open source, ou seja, não é um recurso exclusivo do seu serviço, o que pode direcionar informações das tags declaradas para qualquer serviço que requisite as mesmas, o que de certa forma não vai afetar o site, só vai contribuir com as informações do mesmo.

Terceiro Case – Meta Tags para mapeamento de informações no Twitter

O Twitter também utiliza algumas meta tags para reconhecimento de informação quando algum link é compartilhado no seu feed, para apresentar uma prévia do que aquele link contêm.

Exemplo:

Twitter Card Meta Tag

Considere as seguintes meta tags para o link que foi compartilhado acima:

<meta name="twitter:card" content="summary"/> <- Se refere ao tipo de visualização que será dada a foto
<meta name="twitter:title" content=""/> <- Titulo do link
<meta name="twitter:description" content=""/> <- Descrição do conteúdo do link
<meta name="twitter:image" content=""/> <- Imagem que caracteriza o link

Podemos utilizar várias Meta Tags para definir a informação padrão de um website, o correto no dias atuais é deixar o seu website indiscutivelmente visível para os motores de busca e redes sociais, pois nas duas áreas é fácil prospectar clientes.

Existem mais algumas maneiras de detalhar o conteúdo do seu website para motores da web como o apresentado pelo projeto Schema.org, mas este vamos analisar em outro tutorial.

Qualquer dúvida, favor encaminhar um comentário.

🙂

  • canardoBR

    Excelente tópico, estou cursando TI e atualmente fazendo o Modulo IV (WEB), tive curiosidade sobre como funciona os “SEO” e aqui consegui muitas informações.. Obrigado pelo Tópico…