Tag HTML <title>
A tag HTML <title> define o título de um documento HTML, exibido na aba do navegador e nas páginas de resultados de pesquisa.
A tag HTML <title> define o título de um documento. É um elemento de metadados do documento: não aparece em nenhum lugar dentro da página em si, mas controla como a página é identificada em todos os lugares onde é referenciada — a aba do navegador, um marcador, um resultado de pesquisa e um link compartilhado em redes sociais.
Esta página explica por que toda página precisa de exatamente um <title>, onde ele deve ser colocado e como escrever um que funcione bem tanto para usuários quanto para mecanismos de pesquisa.
Por que o <title> é importante
O <title> é um dos poucos elementos obrigatórios em um documento HTML válido. Navegadores e mecanismos de pesquisa o tratam como o nome canônico e legível da página, então ele aparece em vários lugares ao mesmo tempo:
- Aba/janela do navegador — o texto na aba é o título da página.
- Marcadores — quando um usuário adiciona a página aos favoritos, o título se torna o nome padrão do marcador.
- Resultados de pesquisa (SERPs) — o título geralmente é usado como o título clicável em azul do resultado, o que afeta fortemente a sua taxa de cliques.
- Compartilhamentos em redes sociais — quando um link é publicado em um aplicativo de chat ou rede social, o título é puxado para o cartão de pré-visualização do link (junto com meta tags como Open Graph).
- Acessibilidade — leitores de tela anunciam o título quando uma página é carregada, ajudando os usuários a confirmar onde estão.
Como muitas ferramentas o consomem, um título claro e preciso melhora tanto a UX (as pessoas reconhecem a aba ou o resultado correto) quanto o SEO (os mecanismos de pesquisa classificam a página para consultas relevantes).
O título deve conter as palavras-chave mais importantes da página para que os mecanismos de pesquisa a classifiquem para consultas relevantes — mas escreva-o para humanos primeiro.
Onde ele vai: exatamente um, dentro de <head>
O <title> deve estar dentro da seção <head>, que é onde pertencem os metadados do documento, e um documento deve conter exatamente um <title>. O <head> contém informações sobre a página (título, conjunto de caracteres, viewport, dados meta) em vez de conteúdo visível, portanto o título naturalmente fica lá com o restante dos dados descritivos da página.
Sintaxe
O elemento <title> vem em pares. O texto é escrito entre as tags de abertura <title> e de fechamento </title>, e pode conter apenas texto — sem outros elementos HTML.
Exemplo da tag HTML <title>:
Tag HTML <title>
<!DOCTYPE html>
<html>
<head>
<title>W3Docs - learn HTML, CSS, PHP, JavaScript online.</title>
</head>
<body>
<p>The main content of the page.</p>
</body>
</html>Como escrever um bom título: fraco vs. otimizado
Um título vago ou ausente força os navegadores a recorrer à URL, e os mecanismos de pesquisa podem reescrevê-lo ou ignorá-lo. Compare as duas páginas abaixo.
Título fraco — muito curto e genérico:
<head>
<title>Home</title>
</head>Título otimizado — descritivo, com o padrão Nome da Página | Nome do Site:
<head>
<title>HTML <title> Tag: Syntax, SEO and Examples | W3Docs</title>
</head>O modelo Nome da Página | Nome do Site é uma convenção comum e confiável: a parte única e rica em palavras-chave do título vem primeiro (onde é mais visível em um resultado de pesquisa e em uma aba estreita do navegador), e o nome do site vem por último para reconhecimento da marca. Um pipe (|) ou traço (-) é o separador habitual.
Diretrizes práticas
- Mantenha em torno de 55 a 60 caracteres. Isso é uma diretriz, não um limite rígido — os mecanismos de pesquisa truncam títulos longos, então coloque as palavras importantes no início.
- Seja descritivo. Evite títulos de uma ou duas palavras; use uma frase significativa que resuma a página.
- Torne cada título único em todo o seu site para que cada página seja distinguível nas abas e nos resultados de pesquisa.
- Evite o excesso de palavras-chave. Uma lista de palavras parece spam e não ajuda ninguém.
- Evite caracteres especiais incomuns, que diferentes navegadores podem renderizar de forma inconsistente.
Atributos
A tag <title> suporta os Atributos Globais. Na prática, apenas lang é significativo — ele declara o idioma do texto do título, o que é útil quando o título difere do idioma do documento. Atributos como id, class e style são aceitos pelo analisador, mas não têm efeito, porque o título nunca é renderizado dentro da página onde estilização ou scripts poderiam ser aplicados.