Aula 28 - Elementos Meta do HTML

Introdução

Os elementos <meta> são utilizados para fornecer informações adicionais sobre uma página HTML.

Essas informações são chamadas de metadados e ajudam navegadores, mecanismos de busca e outros sistemas a interpretar corretamente o conteúdo da página.

📌 As tags meta ficam sempre dentro do elemento <head>.

O que são Metadados?

Metadados são informações que descrevem outros dados.

No HTML, eles informam características da página sem aparecer diretamente para o usuário.

Exemplo:

Página Web:
↓
Conteúdo visível para o usuário

Metadados:
↓
Informações sobre a página

Localização da Tag Meta



<html>



<head>



<meta charset="UTF-8">



<title>

Minha Página

</title>



</head>



<body>



Conteúdo da página



</body>



</html>

Principais Utilizações do Meta

Meta	Função
charset	Define a codificação dos caracteres.
viewport	Controla a visualização em dispositivos móveis.
description	Descrição da página para buscadores.
keywords	Palavras relacionadas ao conteúdo.
author	Identifica o autor da página.

Meta Charset

O atributo charset define o padrão de caracteres utilizado pelo documento HTML.



<meta charset="UTF-8">

O UTF-8 permite utilizar:

✔ Acentos
✔ Caracteres especiais
✔ Símbolos
✔ Diferentes idiomas

Meta Viewport

A meta viewport é fundamental para criar páginas responsivas.



<meta 
name="viewport"
content="width=device-width,
initial-scale=1.0">

Ela informa ao navegador que a largura da página deve acompanhar o tamanho da tela do dispositivo.

Meta Description

A meta description apresenta uma descrição resumida da página para os mecanismos de busca.



<meta 
name="description"
content="Curso completo de HTML 
para desenvolvimento Web">

⚠️ Uma boa descrição pode melhorar a apresentação da página nos resultados de pesquisa.

Meta Keywords

A meta keywords era utilizada para informar palavras relacionadas ao conteúdo da página.



<meta 
name="keywords"
content="HTML,CSS,JavaScript">

⚠️ Atualmente os principais buscadores não utilizam mais esse recurso como fator principal de classificação.

Meta Author

Define o autor responsável pelo desenvolvimento da página.



<meta 
name="author"
content="Marcelo Soares">

Exemplo de Head Completo



<head>


<meta charset="UTF-8">



<meta 
name="viewport"
content="width=device-width,
initial-scale=1.0">



<meta
name="description"
content="Curso HTML Completo">



<meta
name="author"
content="Aluno">



<title>

Curso HTML

</title>



</head>

Importância dos Metadados

Melhoram a interpretação do navegador.
Ajudam na otimização para buscadores.
Melhoram a experiência em dispositivos móveis.
Organizam informações da página.
Aumentam a qualidade do documento HTML.

Boas Práticas

Sempre utilizar charset UTF-8.
Sempre utilizar viewport.
Criar descrições relevantes.
Manter informações atualizadas.
Utilizar corretamente dentro do head.

Resumo da Aula

Meta significa informação sobre dados.
As tags meta ficam dentro do head.
Charset define a codificação.
Viewport permite responsividade.
Metas ajudam na organização e SEO.

🏷️ Elementos Meta do HTML