Cabeçalho do Documento

O cabeçalho do documento pode incluir meta tags, muitas das quais não são visíveis para o usuário na janela do navegador. Portanto, nos próximos exemplos, você não verá nenhum conteúdo visível. Essas tags armazenam informações de metadados sobre a página.

Título da página

O texto dentro da tag <title> é exibido na aba do navegador. O título deve ser uma descrição concisa da página e deve ter no máximo 60 caracteres.

Com a ajuda deste código, podemos alcançar tal aparência para o site. Na aba do navegador, observaremos o texto exato que está dentro da tag <title> (quadro azul na imagem).

Meta dados

A tag <meta> contém informações para navegadores e motores de busca: codificação de documentos, comunicação de dados, e muito mais. As meta tags podem ter muitos atributos, pois todos transmitem informações diferentes. O mais importante é a codificação da página. Ela ajuda o navegador a exibir o texto corretamente. Caso a codificação não seja especificada, o navegador pode exibir mojibake em vez dos caracteres.

Significado dos atributos das meta tags

• name - o nome de uma propriedade pode ser qualquer palavra ou frase, os navegadores de internet geralmente esperam um valor que possam reconhecer e usar para realizar uma ação. Um exemplo seria <meta name="author" content="name"> para indicar o autor da página;
• content - especifica o valor da propriedade. Um exemplo seria <meta name="language" content="english"> para especificar o idioma do texto da página;
• http-equiv - significa equivalente a HTTP, e é usado para simular cabeçalhos de resposta HTTP. É raro de ver. Um exemplo seria <meta http-equiv="refresh" content="30"> para instruir o navegador a atualizar a página a cada 30 minutos.

Meta tags básicas para a melhoria de SEO

Nota

SEO (Search Engine Optimization ou Otimização para Motores de Busca) é o processo de otimizar um site para melhorar sua visibilidade nos resultados dos motores de busca.

• <meta name="description"/> - especifica uma breve descrição da página web;
• <meta name="author" /> - especifica o autor da página web;
• <meta name="language"/> - especifica o idioma da página web;
• <meta name="robots"/> - indica aos motores de busca como rastrear ou indexar a página web;
• <meta name="googlebot" content="notranslate"/> - informa ao Google que você não permite uma tradução automática da página web;
• <meta name="rating" content="safe for kids"/> - especifica o público-alvo da página web;
• <meta name="copyright" content="Copyright 2023"/> - especifica os direitos autorais da página web.