Meta tags
Meta tags definem metadados que podem ser usados para fornecer mais
informações sobre o documento, para fazer redirecionamentos, dentre outros usos.
Elas são usadas geralmente pelo browser e por crawlers. Elas são marcadas com o elemento <meta>
e são inseridas dentro do <head>. Geralmente, elas seguem uma das sintaxes abaixo:
<meta name="nome-meta-tag" content="conteúdo da meta tag" /><meta charset="encoding" /><meta http-equiv="diretiva" content="valor da diretiva" />
Veja quais são algumas das principais meta tags:
-
application-name: caso a página represente uma aplicação web, use essa meta tag para definir o nome dela.
Exemplo:
<meta name="application-name" content="Sua aplicação">. -
author: define o nome do autor da página. Exemplo:
<meta name="author" content="Your Name">. -
charset: é um atributo que define o character encoding do documento. UTF-8 é o mais usado e recomendado.
Exemplo:
<meta charset="UTF-8"> -
description: define a descrição da página. Definir uma meta description é muito importante para o SEO. Os
motores de busca podem usar essa meta tag nos resultados de busca, porém não há garantias. Mesmo assim, é muito
importante definir essa tag, a não ser que o SEO não se aplique à página. Exemplo:
<meta name="description" content="Descrição da página.">. - keywords: essa meta tag especifica as palavras-chave da página. Era usada pelos motores de busca como fator de rankeamento, mas devido ao abuso dessa tag, os motores de busca passaram a ignorá-la. Sendo assim, não há porque usar essa meta tag.
As meta tags robots e viewport tem uma sintaxe mais complexa, e são explicadas a seguir.
Robots
Essa meta tag é feita especificamente para os robôs dos motores de busca. Ela informa como ela gostaria que eles se comportassem quanto à indexação e aos links da página (se devem ser seguidos ou não). Exemplo:
<meta name="robots" name="noindex">Para dar instruções quanto a indexação da página, você pode usar os valores index ou noindex. Já quanto aos links, você pode usar os valores follow ou nofollow. Você pode especificar apenas um desses valores, ou ambos. Se você especificar ambos, eles devem ser separados por vírgula. Exemplo:
<meta name="robots" name="noindex, nofollow">Você também pode usar o valor all, que é um atalho para index, follow e é o valor padrão. Você também pode usar o valor none, que é o contrário do all, e é equivalente a noindex, nofollow.
Viewport
A meta tag viewport dá instruções ao browser sobre como controlar as dimensões da página e o seu
escalonamento. Seu conteúdo é especificado com propriedades no estilo chave=valor, separadas por
vírgula:
<meta name="viewport" content="propriedade=valor, propriedade2=valor2">Você pode usar as seguintes propriedades:
- width: define a largura da página. Ela pode receber tanto um valor sem unidade, que define a largura dela em pixels, como também o valor device-width, que é o mais comum e define a largura dela como sendo igual à largura do dispositivo onde o navegador está sendo usado.
- height: define a altura da página. Segue o mesmo estilo da propriedade width, inclusive tendo o valor device-height para definir a altura da página como sendo igual à altura do dispositivo.
- initial-scale: recebe um valor sem unidade que define o zoom inicial da página. O valor 1 é o mais usado e significa que a página vai começar sem zoom.
- minimum-scale e maximum-scale: definem os valores de zoom mínimo e máximo que podem ser usados. Os valores são especificados sem unidade. O valor 1 quer dizer sem zoom.
- user-scalable: define se o usuário pode dar zoom na página ou não. Use o valor no para definir que o usuário não pode dar zoom. Porém, essa propriedade pode ser ignorada pelo navegador de acordo com as configurações dele. Além disso, não é recomendado usar essa tag, porque ela prejudica a experiência de alguns usuários, visto que ela pode impedi-lo de dar zoom e ele pode precisar dar o zoom por conta de uma deficiência visual ou por outro motivo.
O caso de uso mais comum da meta tag viewport é em sites responsivos. Neles, ela geralmente é usada dessa forma:
<meta name="viewport" content="width=device-width, initial-scale=1">No exemplo acima, estamos instruindo o navegador a definir a largura da página como sendo igual à largura do dispositivo. Dessa forma, se o dispositivo tem 720 px de largura, a página também terá essa largura. Também estamos instruindo o navegador a fazer com que a página comece sem zoom.
Atualização da página e redirecionamentos
Você pode usar o atributo http-equiv com o valor refresh para atualizar a página ou
para fazer redirecionamentos. Veja abaixo um exemplo que atualiza a página a cada 30 segundos:
<meta http-equiv="refresh" content="30" />Agora, vejamos um exemplo que redireciona para outra página imediatamente, e outro que faz o redirecionamento após 10 segundos:
<meta http-equiv="refresh" content="url=https://www.example.com/" /><meta http-equiv="refresh" content="10;url=https://www.example.com/" />Não é recomendado usar essa meta tag, porque ela tira o controle da página do usuário e é uma péssima prática de acessibilidade. Há outras formas de fazer redirecionamentos (por exemplo, pelo Apache) e de atualizar o conteúdo da página (usando AJAX).