Tag HTML <meta>

Veremos a meta da tag HTML com exemplos neste post. Deve atender às necessidades de aprendizagem.

A tag HTML <meta> é um elemento de metadados que fornece informações sobre uma página da web. Ele é colocado na seção <head> de um documento HTML e não é visível para o usuário.

Os metadados em documentos HTML podem ser descritos da seguinte forma :

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Tutorials on the Web for free">
<meta name="keywords" content="HTML, CSS, Python">
<meta name="author" content="Mr Example">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Welcome To Mr Examples</h1>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

As palavras-chave dos mecanismos de pesquisa são classificadas da seguinte forma:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="Python, HTML, Flutter">
</head>
<body>
<h1>Welcome To Mr Examples</h1>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Forneça uma breve descrição do seu site da seguinte forma:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Learn Python and HTML for free with examples">
</head>
<body>
<h1>Welcome To Mr Examples</h1>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O autor de uma página pode ser declarado da seguinte forma:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Mr Example">
</head>
<body>
<h1>Welcome To Mr Examples</h1>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O documento deve ser atualizado a cada 45 segundos da seguinte forma:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="45">
</head>
<body>
<h1>Welcome To Mr Examples</h1>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você pode fazer com que seu site tenha uma boa aparência em todos os dispositivos configurando a janela de visualização da seguinte maneira:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Welcome To Mr Examples</h1>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo da tag <meta> com todos os seus usos:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta name="keywords" content="example, website, html, metadata">
<meta name="description" content="This is an example website that demonstrates the use of various types of meta tags in HTML.">
<meta name="author" content="Mr Example">
<meta name="publisher" content="Mr Example">
<meta name="copyright" content="Copyright © 2023 Mr Examples">
<meta name="language" content="en-US">
<meta name="revised" content="Monday, January 19th, 2023, 5:00 pm">
<meta http-equiv="refresh" content="3600">
<title>Mr Examples</title>
</head>
<body>
<h1>Welcome To Mr Examples</h1>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca HTML <meta>:

Uso de meta de tags

A Tag meta <meta> especifica metadados para um documento HTML . O termo metadados refere-se a dados (informações) sobre dados.

As tags <meta> geralmente são incluídas no elemento <head> . Eles são usados principalmente para identificar o conjunto de caracteres, detalhes da página, palavras-chave, autor de um documento e configurações de viewport.

Os metadados não aparecerão na página, mas serão processados pelo computador.

O navegador depende de metadados (para determinar como renderizar conteúdo ou recarregar páginas), mecanismos de pesquisa (palavras-chave) e vários serviços da web.

Uma tag <meta> fornece aos web designers acesso à viewport (a área visível para os usuários) por meio da tag <meta> (para um exemplo, consulte “Definindo a viewport” abaixo).

Claro, aqui estão alguns usos comuns da tag HTML <meta> :

Descrever a página da web para mecanismos de pesquisa e compartilhamentos de mídia social.
Especificando a codificação de caracteres usada no documento.
Configurando a viewport para dispositivos móveis.
Controlar a indexação do mecanismo de pesquisa e seguir ou não seguir links.
Fornecer informações do autor para a página da web.
Especificando palavras-chave relevantes para otimização de mecanismos de busca (SEO).
Redirecionar o usuário para uma página diferente após um período de tempo especificado.

Atributos

Global

A Tag <meta> inclui os Atributos Globais em HTML.

Lista de Atributos

Atributo	Valor	Visão geral
contente	texto	Fornece o valor que corresponde aos atributos http-equiv ou name.
conjunto de caracteres	conjunto de caracteres	Este atributo indica a codificação de caracteres usada em documentos HTML.
http-equiv	content-security-policy content-type default-style refresh	Incorpora informações de atributo de conteúdo em um cabeçalho HTTP.
nome	nome do aplicativo, descrição do autor, gerador , palavras-chave, viewport	Indica o nome dos metadados.

Configurando a Janela de Visualização

Uma janela de visualização é uma seção da página da Web apresentada ao usuário ao discutir a tag <meta> .

A tela de um celular será mais estreita do que a tela de um computador – o tamanho varia de acordo com o dispositivo. Sempre que você criar uma página da Web, precisará usar o seguinte elemento <meta> :

O navegador usa essas diretrizes para gerenciar as dimensões e o dimensionamento da página.

Ele permite que a largura da página seja determinada pela largura da tela do dispositivo (que será diferente de dispositivo para dispositivo).

Assim que o navegador recupera a página, a parte initial-scale=1.0 determina o nível de zoom.

O seguinte é um exemplo de uma página da web sem a meta tag viewport e a mesma página da web que a contém – Clique nos dois links na parte inferior para ver as variações se estiver visualizando esta página em um telefone ou tablet.

Sem a
metatag da janela de visualização

Com a
metatag da janela de visualização

Dica: saiba mais sobre a tag meta em nosso próximo Responsive Web Design – The Viewport Tutorial.

Compatibilidade do navegador

Elemento
<meta>	Sim	Sim	Sim	Sim	Sim

Vantagens da tag HTML <meta>

Aqui estão algumas vantagens de usar a tag HTML <meta> :

Ao usar a tag <meta> para especificar palavras-chave e descrições relevantes para a página da Web, os desenvolvedores da Web podem melhorar sua visibilidade nas páginas de resultados do mecanismo de pesquisa (SERPs) e direcionar mais tráfego para o site.
Ao definir a viewport usando a tag <meta> , os desenvolvedores da web podem garantir que a página da web seja exibida corretamente em dispositivos móveis, o que melhora a experiência do usuário e reduz as taxas de rejeição.
Ao especificar a codificação de caracteres usando a tag <meta> , os desenvolvedores da Web podem garantir que caracteres e símbolos especiais sejam exibidos corretamente na página da Web, o que melhora sua legibilidade e usabilidade.
Ao fornecer texto alternativo para imagens e outras mídias usando a tag <meta> , os desenvolvedores da Web podem melhorar a acessibilidade da página da Web para usuários com deficiências.
Ao usar a tag <meta> para especificar políticas de cache e outras otimizações de desempenho, os desenvolvedores da Web podem melhorar os tempos de carregamento da página da Web, o que aprimora a experiência do usuário e reduz as taxas de rejeição.

Se você achar este artigo informativo, compartilhe essas informações significativas com seus amigos clicando nos links abaixo.

Nós valorizamos o seu feedback.

Tag HTML <meta>

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Uso de meta de tags

Atributos

Global

Lista de Atributos

Configurando a Janela de Visualização

Compatibilidade do navegador

Vantagens da tag HTML <meta>

Sentindo entediado?