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.
<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.
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><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.
