A tag < title > - Criando um título para as páginas de um site


Como usar a tag TITLE na criação de sites
No artigo passado, de nosso curso de HTML, vimos que a tag <head> serve para armazenar informações importantes sobre as páginas de um site, funcionando como um cabeçalho de características.

Nesse artigo vamos começar a preencher a tag <head> do HTML com esses dados, que são essenciais em qualquer página da internet.

Vamos começar aprendendo como colocar um título em nossas páginas de HTML.


<title> - O que é um título ?

O título de uma página de um site é o que aparece no seu browser, na barra superior, chamada de title bar. O título é um texto que define, de forma resumida, o assunto que a página de seu site está lidando.
Como usar a tag <TITLE> - Curso de HTML
Local do título no seu navegador

O título de uma página não serve somente para o visitante ver, também serve para o Google.
Se você já notou bem, ao procurar alguma coisa no buscador, vai aparecer primeiro o título da página com uma breve descrição da página.

Pois bem, esse título é o que está entre as tags <title></title> que você, Webmaster, vai colocar em seu código HTML quando for criar um site. Essa descrição que fica abaixo do título, nos resultados de busca do Google, é uma descrição que o webmaster coloca, em cada página do site, através das meta-tags (nesse caso, uma tag meta description), que aprenderemos usar em nosso próximo artigo de nossa apostila online de HTML.

Os títulos são muito importantes em SEO (Search Engine Optimization). Ou seja, se quiser que seus sites sejam bem rankeados pelos resultados de busca, você deve dar um título para todas as páginas de seu site.
Esse título deve ser informativo, que chame a atenção do usuário.

Como criar um bom título para as páginas de seu site

Criando títulos para as páginas de um siteQual a função de um título de um livro?
Obviamente, é um texto curto, mas que deve dar uma noção do assunto para o leitor.
Ninguém vai nomear um livro de "Matemática", se seu conteúdo for de "Linguagem de programação Java".

Se o título de um livro fosse "Livro", você compraria? Óbvio que não, não tem como saber seu assunto com esse título óbvio e vago.
E se fosse "Curso de HTML" ? Muito provavelmente você, como bom Webmaster, iria dar uma folheada no livro para ver seu conteúdo.
O mesmo vale para títulos de um site.

Se você colocar "Site do João" em todos seus títulos, poucas pessoas irão se interessar e clicar (e, provavelmente, o Google também não vai gostar, pois todos os títulos são iguais e pouco informativos).
Porém, se você preencher a tag title com informação mais útil e direta, como "Como criar um site - tudo sobre HTML e CSS", os usuários interessados em como criar um site irão ver seu título, irão clicar e entrar em seu site.

Por isso, use sempre títulos descritivos e informativos.
Lembre-se que o Google busca sempre a melhor experiência para o usuário, mostrando os sites mais relevantes.

Como usar a tag <title>

Como criar um site e criar um título em HTMLAprendido o que é um título e sua importância para o usuário, para os buscadores e para o SEO, vamos aprender como criar um título em nossos códigos HTML.

Para usar a tag title, é como a maioria das outras tags em HTML.
Ou seja, existe a tag de abertura <title> e a tag de fechamento </title>, e o título é o texto que você vai colocar entre essas tags.

Essas tags devem estar aninhadas (dentro) das tags <head> e </head>.

Veja um exemplo completo, baseado em tudo que nós já estudamos até o momento em nosso curso de HTML:
<!DOCTYPE html>
 
<html>
 <head>
 <title> HTML Progressivo - Curso de HTML completo, online e gratuito </title>
 </head>
 
Bem vindo ao site HTML Progressivo.</br>
Aqui você encontrará informações sobre HTML, XHTML, CSS, SEO e Monetização de sites.
</html>
Exercício 1:
Cheque o código fonte desta página e achei a tag <title>

Exercício 2:
Crie um site com título, em que este é o nome de seu futuro site.
Use as tags HTML, HEAD e TITLE! Não esqueça da indentação do código HTML!

Um comentário:

Orion disse...

A tag < title > está na linha 24 do source code... :)