O que são meta tags e para que servem?

As meta tags são etiquetas HTML especiais que fornecem metadados (informações sobre o documento) para navegadores e motores de busca. Elas são colocadas na secção <head> do documento HTML.

Os principais tipos de meta tags e a sua finalidade:

charset: Indica a codificação de caracteres da página, por exemplo, UTF-8. É importante para a visualização correta do texto.
```
<meta charset="UTF-8">
```
name="description": Define uma breve descrição do conteúdo da página. É utilizada pelos motores de busca nos resultados.
```
<meta name="description" content="Descrição breve da sua página para motores de busca.">
```
name="keywords": Lista de palavras-chave que descrevem o conteúdo da página. O seu impacto no SEO diminuiu, mas pode ser utilizada por alguns sistemas antigos.
```
<meta name="keywords" content="palavra-chave1, palavra-chave2, palavra-chave3">
```
name="viewport": Controla o escalonamento e as dimensões da área de visualização em dispositivos móveis. É crucial para o design responsivo.
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- width=device-width: A largura da área de visualização é igual à largura do ecrã do dispositivo.
- initial-scale=1.0: Escala inicial da página ao carregar.

name="robots": Indica aos robôs de busca as regras de indexação da página.

Tabela de valores do atributo content:

Valor	Descrição
`index`	Permite a indexação da página.
`noindex`	Proíbe a indexação da página.
`follow`	Permite seguir os links na página e indexá-los.
`nofollow`	Proíbe seguir os links na página.
`all`	Equivale a `index, follow`. (Valor padrão)
`none`	Equivale a `noindex, nofollow`.

<meta name="robots" content="index, follow">

property (Open Graph, Twitter Cards): São utilizados para definir como o conteúdo da página será exibido ao publicar nas redes sociais.

<meta property="og:title" content="Título para redes sociais">
<meta property="og:description" content="Descrição para redes sociais">
<meta property="og:image" content="URL da imagem para visualização">
<meta property="og:url" content="URL da página">
<meta name="twitter:card" content="summary_large_image">

A necessidade de meta tags resume-se ao seguinte:

SEO (Otimização para Motores de Busca): Ajudam os motores de busca a entender a temática e o conteúdo da página, influenciando o posicionamento e a exibição nos resultados de pesquisa (especialmente description, keywords, robots).
UX (Experiência do Utilizador): Melhoram a exibição e a interação com a página em diferentes dispositivos (viewport).
Redes sociais: Definem a aparência atrativa do link ao publicar, aumentando a taxa de cliques (property - Open Graph, Twitter Cards).
Informação técnica: Fornecem dados técnicos importantes para o navegador (por exemplo, codificação).

O uso de meta tags é obrigatório para criar páginas web corretas, otimizadas e acessíveis.