Todos nós já compartilhamos algum link na internet, e, no momento que colocamos esse link, automaticamente, carrega uma imagem, título e descrição.
A princípio, isso só é possível, devido ao uso das metatags. Outro impacto dessas tags é em relação ao SEO de sua página, ou seja, a forma com que buscadores encontram, ranqueiam e apresenta sua página.
O que são as metatags no HTML e como podem nos ajudar?
As metatags são de extrema importância para um documento HTML. Elas funcionam como uma espécie de configuração da sua página. Nelas podemos definir como o navegador irá renderizar o HTML, entre outros aspectos.
Assim como, especificar como nossa página será compartilhada, dar uma descrição da página, qual tipo de codificação de caracteres queremos usar. Enfim, muitas opções diferentes.
As metatags não necessitam de fechamento, como, por exemplo, uma div, ou até mesmo, um p. Elas se fecham nelas mesmas, igualmente, as tags img e link, por exemplo. Primeiramente, declaramos seu nome, e o que difere umas das outras é o atributo.
Com o intuito de entender melhor como funciona e de qual forma aplicamos essas configurações, dividi em duas partes. Metatags básicas, que são as tags padrões, e as mais avançadas, que nos ajudam com configurações de compartilhamento e SEO. Então, vamos a elas.
Metatags básicas
As metatags HTML básicas são, normalmente, as tags que por padrão, são adicionadas pelos editores de texto, como, por exemplo, o Emmet do VsCode, ou de qualquer outro editor.
Mas, antes de ver sobre essas tags, é preciso estabelecer algo muito importante. Metatags no HTML precisam ficar dentro da tag head, ou seja, no início do HTML.
Isso ocorre pelo fato que, como todo documento na internet, é lido de cima para baixo. Assim sendo, precisamos passar essas tags de configuração antes do corpo do HTML ser lido.
Com esse conceito estabelecido, vamos ver de fato um exemplo de metatag básica:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>O que é metatag no HTML</title>
</head>
Nesse exemplo, temos, três tags de configuração básica, vamos entender cada uma delas.
Charset
Como havia dito anteriormente, passamos o tipo da tag pelo seu atributo. Nesse caso do charset, define o tipo de codificação de caracter que queremos utilizar. UTF-8 é um padrão de codificação bem conhecido e bem completo. Assim sendo, ele abrange vários caracteres especiais, ou seja, é ideal para nosso idioma, que utiliza, por exemplo, o ç.
Http-equiv
Nesse caso, o atributo http-equiv está fazendo papel de auxiliar na compatibilidade no antigo navegador da Microsoft, o Internet Explorer. Por ser um navegador mais antigo, e bem conhecido por causar problemas de incompatibilidade. É utilizada essa metatag para minimizar alguns problemas de renderização.
Mas, essa não é a única forma de utilizar o http-equiv. Podemos também, forçar a atualização da página por período definido, dessa forma:
<meta http-equiv="refresh" content="30">
O valor refresh informa que queremos atualizar a página. Dentro do content passamos o periodo que queremos que esse carregamento se repita. O valor é lido em segundos, logo, o exemplo acima a página irá atualizar a cada 30 segundos.
Existem outras formas de uso desse atributo, para questão de curiosidade e conhecimento, vou deixar a documentação do site do Mozilla, que aborda os assuntos necessários para entender as várias formas de uso desse atributo.
Viewport
Já o atributo viewport, informa que queremos nossos elementos renderizados proporcionalmente, forçando qualquer dispositivo a se basear no pixel CSS, que também é explicado de forma clara como isso funcionar no artigo Pixel físico e pixel CSS.
Nesse mesmo atributo podemos definir, até mesmo, se queremos deixar nossa página com zoom, ou bloquear a opção de zoom em dispositivos touch screen.
Curso HTML5 + CSS3 - Web design responsivo
Conhecer o cursoMetatags de compartilhamento e SEO
Metatag de compartilhamento, por si só, já tem um impacto tremendo no SEO da sua página. Entretanto, existem metatags no HTML que servem para ajudar o SEO a sugerir sua página a quem procura algo no Google relacionado ao seu conteúdo. Vamos ver alguns exemplos.
Informações do site
Existem algumas opções para passar as informações do nosso site dentro da metatag no HTML. Essas informações podem ser passadas de diferentes formas, vamos ver alguma delas.
Autor
<meta name="author" content="Amauri Blanco">
Assim como anteriormente, o atributo que muda o sentido da metatag é o name, então, nesse caso, usamos author. Nele, dizemos que queremos passar o nome do autor do site. Dentro de content, passamos o nome do autor.
Descrição
Outro caso é a descrição da página, que impacta diretamente no SEO da sua página. Também é essa descrição que fica em destaque no google. Utilizamos dessa forma:
<meta name="description" content="Como trabalhar de forma correta com as metatags no HTML">
No name informamos a função da metatag. Já no content passamos toda informação necessária para descrever nossa página. Vale ressaltar que não há limite de caracteres, você pode fazer uma descrição detalhada da sua página.
Palavra chave
Nessa metatag usamos keywords, as palavras chaves. Isso ajuda os mecanismos de busca a sugerir sua página, quando algum usuário busca algum tema que você destacou como palavra chave. Para usar essa metatag, você deve fazer dessa forma:
<meta name="keywords" content="HTML, CSS, JavaScript">
No name, declaramos a palavra keywords, dentro de content, separando por vírgula, colocamos as palavras chaves que queremos associar nossa página.
Metatag OG
As og são um tipo de metatag criada pelo Facebook, para auxiliar os desenvolvedores na quando precisamos compartilhar a página. A sigla og, vem de Open Graph Protocol. No site oficial do The Open Graph protocol, podemos ver toda documentação, com descrições detalhadas sobre as opções de uso. Entretanto, vamos ver como podemos usar algumas dessas tags.
Og:title
Quando estamos trabalhando com og, não usamos o atributo name para diferenciar o sentido da tag. Nós usamos o atributo property para dar o sentido que queremos.
<meta property="og:title" content="Metatag no HTML" />
Sendo bem semelhante com a forma que vimos as tag até agora, acaba, de um certo modo, facilitando a compreensão. Dentro do atributo property adicionamos og: e, só então, colocamos o valor que queremos. No caso, o titulo de compartilhamento do site. Seguindo o padrão, no content, colocamos o título.
Og:image
Com essa metatag, podemos passar uma imagem de compartilhamento. Pode ser tanto uma imagem que está dentro do seu site, como uma url de imagem.
<meta property="og:image" content="./img/capa-do-site.png" />
Assim como no anterior, dentro de property passamos qual a função. Após isso, no content passamos o caminho da imagem ou, a url dela.
Og:image:width e og:image:height
Outra caracteristica que podemos modificar, é a largura e altura da imagem de compartilhamento. Dessa forma, estamos dizendo que a imagem tem uma proporção específica e você não quer que a imagem fique distorcida.
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="720" />
Dentro de property informamos, se queremos modificar a largura com image:width. Ou, a altura, com image:height. Sempre utilizando og: na frente. Como vimos anteriormente, dentro de content passamos o valor em pixel que queremos da imagem.
Formação Desenvolvedor Especialista Front-end
Conhecer a formaçãoVeja na prática como utilizar e a importância das matatags
Conclusão
Existem alguns sites que fazem o teste de compartilhamento pra gente. Esses sites nos ajudam a ver como nossa página ficaria e, até se está faltando alguma propriedade. Três grandes empresas criaram esse tipo de site para auxiliar os desenvolvedores, Twitter, Meta e Linkedin.
Embora não seja obrigatório o uso dessas metatags no HTML. Em um ambiente profissional, ou até mesmo, em um projeto pessoal, é de extrema importancia o uso dessas tags de forma correta.
Seja como for, o domínio em metatags pode diferenciar o rank do nosso site e, em vários casos, pode impactar no número de acesso da sua página. Isso se levar em conta que uma página com uma boa descrição e uma imagem de compartilhamento que faça sentido com conteúdo, pode atrair mais cliques.
