A Tag <title> no HTML: O Guia Definitivo para Dominar o Google

No artigo passado do nosso curso de HTML, descobrimos que a tag <head> é o cérebro do site: ela serve para armazenar configurações essenciais e invisíveis para o usuário comum.

Hoje, vamos começar a preencher esse cérebro com a informação mais importante de toda a sua página: o Título.

Se você quer transformar seus estudos em uma profissão lucrativa, não basta apenas saber programar. Você precisa entender como os sites são encontrados na internet. E tudo começa dominando a famosa tag <title>.

O que é a tag <title> na prática?

O título de uma página HTML é o texto que define, de forma clara e resumida, o assunto exato que está sendo abordado naquele documento. Visualmente, ele aparece em dois lugares principais:

Na Aba do Navegador: É aquele texto que fica lá no topo do seu Google Chrome, Firefox ou Safari. Se você abrir 10 abas, é o título que vai te ajudar a saber qual aba é qual.
Nos Favoritos: Quando alguém salva seu site nos favoritos, o nome que fica gravado é o conteúdo da sua tag title.

💡 Dica de Ouro: A tag <title> é OBRIGATÓRIA em qualquer documento HTML5 válido. Um site sem essa tag é considerado amador e cheio de erros pelos navegadores.

A importância do Title para o SEO (O Segredo do Tráfego)

O título não serve apenas para deixar a aba do navegador bonita. Ele é a principal ferramenta de comunicação entre o seu site e os gigantes da internet (como o Google e o Bing).

Sabe quando você pesquisa algo no Google e aparece uma lista de resultados? Aquele link azul gigante em que você clica é, literalmente, o que o programador escreveu dentro da tag <title>.

Em termos de SEO (Search Engine Optimization), o título é o fator "On-Page" número 1. Se o seu título for ruim, vago ou inexistente, o Google simplesmente vai ignorar o seu site e colocar o seu concorrente na primeira página.

Aprenda a Criar Sites Que Dão Dinheiro

Quer ir além das tags básicas e se tornar um Webmaster capaz de rankear sites e fechar contratos de desenvolvimento? Estude nosso material completo no seu próprio ritmo.

📥 Baixar Apostila HTML + CSS (PDF)

Como criar Títulos Magnéticos e Otimizados

Pense no título de um site como o título de um livro em uma livraria. Ninguém compra um livro chamado apenas "Livro" ou "Página Inicial". Não há como saber sobre o que se trata.

Se você colocar "Site do João" ou "Home" no título das suas páginas, poucas pessoas irão clicar, e o Google vai odiar.

Boas Práticas de um Webmaster Sênior para Títulos:

Regra de SEO	Explicação
Tamanho Ideal	Mantenha entre 50 e 60 caracteres. Se for maior que isso, o Google corta com "..." no final e a mensagem se perde.
Palavra-Chave no Início	O peso das palavras é lido da esquerda para a direita. Ex: "Bolo de Cenoura: Receita Fácil e Rápida" é muito melhor que "Receita fácil e rápida para fazer um Bolo de Cenoura".
Evite "Keyword Stuffing"	Nunca repita a mesma palavra várias vezes para "enganar" o Google (Ex: "Carro, Carros, Comprar Carro"). Você será penalizado.
Use a Marca no Final	Sempre quepare o assunto da sua marca usando um hífen (-) ou barra vertical (\|). Ex: "Como criar um site \| HTML Progressivo".

Como usar a tag <title> no Código (Na Prática)

Chegou a hora de codar. Para usar a tag, a regra é simples: ela precisa ter uma abertura <title>, um fechamento </title>, e deve obrigatoriamente estar aninhada DENTRO da tag <head>.

Veja o exemplo completo de uma estrutura HTML5 com o título perfeitamente configurado e indentado:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    
    <!-- AQUI ESTÁ NOSSA ESTRELA DA AULA: -->
    <title>Curso de HTML Online: Do Zero ao Profissional</title>
    
  </head>
  <body>
    
    <p>Bem-vindo ao site HTML Progressivo.</p>
    <p>Aqui você encontrará informações sobre Front-End e Monetização.</p>

  </body>
</html>

⚠️ Correção de Erros Comuns: Note no exemplo acima que, para quebrar a linha, usamos duas tags de parágrafo <p>. Se você for usar a tag de quebra de linha solta, o correto é <br> (ou <br />). Nunca use </br>, isso não existe no HTML válido!

Hora de Praticar: Exercícios de HTML

A teoria só vira conhecimento quando colocamos a mão na massa. Faça estes dois exercícios antes de avançar de aula:

Exercício de Espionagem: Clique com o botão direito em qualquer lugar em branco desta página e escolha "Inspecionar" ou "Exibir código-fonte". Aperte CTRL + F, busque por <title> e veja como nós configuramos o título exato desta página!
Exercício de Criação: Abra o seu Bloco de Notas ou VS Code. Crie a estrutura básica do HTML5 que ensinamos acima. Crie um <title> para o seu futuro site profissional aplicando a regra dos 60 caracteres. Salve o arquivo como "meusite.html" e abra no Google Chrome para ver a mágica na aba superior.

Tag < title > do HTML: Como Criar Títulos Perfeitos para o Google (SEO)