O que vai dentro do head: title, meta e link

Entenda o papel da tag head como a área de configurações da página — o que ninguém vê, mas que faz tudo funcionar.

Até agora, focamos bastante no <body> do nosso documento HTML, que é onde todo o conteúdo visível da página reside. Mas há uma parte igualmente crucial, embora invisível para o usuário, que fica nos bastidores: o elemento <head>.

Pense no <head> como o "cérebro" da sua página. Ele contém metadados — informações sobre a página, mas que não são o conteúdo em si. Essas informações são essenciais para o navegador, mecanismos de busca e redes sociais entenderem e exibirem sua página corretamente.

Nesta lição, vamos explorar as tags mais fundamentais que vivem dentro do <head>: <title>, <meta> e <link>.

A estrutura básica do <head>

Todo documento HTML bem formado começa com a declaração <!DOCTYPE html> e a tag <html>. Dentro do <html>, temos o <head> e o <body>.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <!-- Tudo aqui dentro não é visível na página, mas é crucial para ela -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Título da Minha Página</title>
  <link rel="stylesheet" href="style.css">
  <!-- Outras meta tags, links para fontes, scripts, etc. -->
</head>
<body>
  <!-- Conteúdo visível da página -->
  <h1>Bem-vindo!</h1>
  <p>Este é o corpo da minha página.</p>
</body>
</html>

A tag <title>: o nome da sua página

A tag <title> define o título do documento HTML. Este título aparece em vários lugares importantes:

  • Na aba do navegador: É o texto que você vê na aba ou janela do navegador.
  • Nos resultados de busca: É o título principal que aparece nos resultados de pesquisa do Google, Bing, etc.
  • Nos favoritos: É o nome sugerido quando o usuário adiciona sua página aos favoritos.
  • Nas redes sociais: Muitas vezes, é o título padrão quando sua página é compartilhada.

Características:

  • Deve ser única por página.
  • Deve ser descritiva e concisa, contendo palavras-chave relevantes para o conteúdo da página.
  • É um fator importante para SEO (Search Engine Optimization).

Exemplo:

<head>
  <title>Minha Loja Online - Eletrônicos e Acessórios</title>
</head>

A tag <meta>: metadados para o navegador e buscadores

A tag <meta> é usada para fornecer metadados sobre o documento HTML. Metadados são dados sobre dados — informações que descrevem a página, mas que não são exibidas diretamente no conteúdo.

Atributos importantes da tag <meta>:

  • charset: Define a codificação de caracteres do documento.

    • charset="UTF-8": É a codificação mais comum e recomendada. Ela suporta praticamente todos os caracteres e símbolos do mundo, evitando problemas com acentuação e caracteres especiais.
    • Deve ser a primeira meta tag dentro do <head>.
    <head>
  <meta charset="UTF-8">
  <!-- Outras meta tags -->
</head>

  • name e content: Usados em conjunto para fornecer metadados genéricos. O atributo name especifica o tipo de metadado, e content fornece o valor.

    • name="viewport": Essencial para responsividade.

      • content="width=device-width, initial-scale=1.0":
        • width=device-width: Define a largura da viewport para a largura do dispositivo.
        • initial-scale=1.0: Define o nível de zoom inicial quando a página é carregada.
        • Isso garante que a página seja renderizada corretamente em todos os dispositivos, adaptando-se a diferentes tamanhos de tela.
      <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

    • name="description": Fornece uma breve descrição do conteúdo da página.

      • Esta descrição é frequentemente exibida pelos mecanismos de busca abaixo do título nos resultados da pesquisa.
      • Deve ser concisa, relevante e persuasiva para atrair cliques.
      <head>
  <meta name="description" content="Encontre os melhores eletrônicos e acessórios com preços incríveis. Entrega rápida para todo o Brasil.">
</head>

    • name="keywords" (obsoleto para SEO): Antigamente, era usado para listar palavras-chave. Hoje, os mecanismos de busca ignoram este atributo. Não é mais relevante para SEO.

    • name="author": Especifica o autor da página.

      <head>
  <meta name="author" content="João Silva">
</head>

  • http-equiv e content: Usados para simular cabeçalhos HTTP.

    • http-equiv="refresh": Pode ser usado para recarregar a página automaticamente ou redirecionar para outra URL após um tempo. (Geralmente desaconselhado para usabilidade, a menos que seja estritamente necessário).

      <head>
  <!-- Recarrega a página a cada 30 segundos -->
  <meta http-equiv="refresh" content="30">
  <!-- Redireciona para outra página após 5 segundos -->
  <meta http-equiv="refresh" content="5; url=https://www.novosite.com">
</head>

A tag <link>: conectando recursos externos

A tag <link> é usada para conectar o documento HTML a recursos externos. Ela é uma tag vazia e possui atributos importantes:

  • rel (relationship): Especifica a relação entre o documento atual e o recurso linkado.
    • rel="stylesheet": Indica que o recurso é uma folha de estilos CSS.
    • rel="icon": Indica que o recurso é um ícone (favicon).
    • rel="preload": Indica que o recurso deve ser pré-carregado (para performance).
  • href (hypertext reference): Especifica a URL do recurso externo.
  • type: Especifica o tipo MIME do recurso linkado (ex: type="text/css" para CSS). Para CSS, é opcional, pois rel="stylesheet" já indica o tipo.

Exemplo:

<head>
  <!-- Conectando uma folha de estilos CSS -->
  <link rel="stylesheet" href="style.css">

  <!-- Conectando um favicon -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">

  <!-- Conectando uma fonte externa do Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

Resumindo

  • O elemento <head> contém metadados sobre a página, invisíveis para o usuário.
  • <title>: Define o título da página (aba do navegador, resultados de busca, favoritos). Essencial para SEO.
  • <meta>: Fornece metadados diversos.
    • charset="UTF-8": Codificação de caracteres (primeira meta tag).
    • name="viewport" content="width=device-width, initial-scale=1.0": Essencial para responsividade.
    • name="description": Descrição da página para mecanismos de busca.
    • name="author": Autor da página.
    • http-equiv="refresh": Recarrega/redireciona (usar com cautela).
  • <link>: Conecta o documento a recursos externos.
    • rel="stylesheet" e href="style.css": Conecta folhas de estilo CSS.
    • rel="icon" e href="favicon.ico": Conecta o favicon.

Dominar o <head> é fundamental para garantir que sua página seja bem interpretada por navegadores, acessível e bem posicionada nos mecanismos de busca.