Aula 38 — Meta Tags e Head Profissional

Abertura de impacto

O invisível decide se a página será encontrada

Meta tags ficam no head e não aparecem diretamente na tela, mas influenciam codificação, responsividade, indexação, resumo da página, compartilhamento social e experiência do usuário.

Regra Mestre:

Conteúdo visível conversa com humanos. Metadados invisíveis conversam com máquinas. O Mestre domina os dois.

Conteúdo visível: textos, imagens, vídeos, links e componentes no body.
Metadados invisíveis: charset, viewport, description, robots, canonical, Open Graph e Twitter Cards no head.

Base técnica

Title, charset, viewport, description, author e robots

O head profissional deve ser claro, específico e organizado. O charset deve aparecer cedo para evitar erro de acentuação. O viewport garante responsividade. O title e a description comunicam valor nos buscadores.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Meta Tags: Guia Definitivo do Mestre HTML5</title>

  <meta name="description" content="Domine meta tags no HTML5. Aprenda charset, viewport, robots, SEO técnico e compartilhamento social profissional.">
  <meta name="author" content="Mateus Ernandes">
  <meta name="robots" content="index, follow">
</head>

Erros comuns no head:

Esquecer meta viewport e quebrar o mobile.
Usar title genérico como “Home” ou “Página 1”.
Deixar description vazia ou duplicada.
Colocar meta tags dentro do body.
Colocar charset tarde demais no documento.

SEO técnico

Title forte, description forte, robots e canonical

Meta tags não substituem bom conteúdo, mas ajudam buscadores a entender e apresentar a página. O title atrai o clique. A description vende o valor. Robots orienta indexação. Canonical aponta a versão oficial.

<title>Curso de HTML5 Online: Do Zero ao Nível Mestre</title>

<meta name="description" content="Aprenda HTML5 com profundidade técnica. Domine semântica, formulários, SEO e acessibilidade em aulas práticas.">

<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">

<link rel="canonical" href="https://seusite.com/aula-original">

Diferenças essenciais de SEO com metadados
Item	Função	Uso Mestre
title	Título da aba e do resultado de busca	Único, específico e coerente com a página
h1	Título visível da página	Pode ser diferente do title, mas deve manter coerência
description	Resumo invisível para busca	Objetivo, convincente e sem exagero
canonical	URL oficial do conteúdo	Evita confusão com conteúdo duplicado

Erros de SEO que reprovam:

Repetir o mesmo title em várias páginas.
Fazer keyword stuffing na description.
Escrever description gigante.
Prometer no title algo que o body não entrega.
Usar canonical errado apontando para outra página.

Compartilhamento

Open Graph e Twitter Cards

Quando um link é enviado no WhatsApp, LinkedIn, Facebook ou X, crawlers sociais procuram metadados para montar um card. O Mestre não deixa a rede social adivinhar título, descrição e imagem.

<!-- Open Graph -->
<meta property="og:title" content="Torne-se um Mestre do HTML5">
<meta property="og:description" content="Domine a estrutura da web com profundidade técnica e prática.">
<meta property="og:image" content="https://seusite.com/img/thumb-social.jpg">
<meta property="og:url" content="https://seusite.com/aula-meta-tags">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Guia Mestre de Meta Tags">
<meta name="twitter:description" content="Configure SEO técnico e compartilhamento social profissional.">
<meta name="twitter:image" content="https://seusite.com/img/twitter-banner.jpg">

meta description: foco em busca e CTR no Google.
og:description: foco em engajamento no compartilhamento social.
og:image: precisa estar online, com boa proporção e URL acessível.
og:url: representa a URL oficial compartilhada.

Erros críticos de compartilhamento:

og:image quebrada.
Imagem social pequena demais.
Não definir og:title.
Compartilhar página sem aparência profissional.
Usar imagem fora do ar ou caminho relativo onde deveria usar URL absoluta.

Auditoria

Como validar meta tags no DevTools e em testes manuais

O Mestre não confia no chute. Ele abre o DevTools, inspeciona o head, verifica title na aba do navegador, procura description no código-fonte, testa responsividade e confirma as tags sociais.

Checklist de SEO técnico

Charset UTF-8 aparece no início do head.
Viewport usa width=device-width, initial-scale=1.0.
Title é único, forte e específico.
Description é única, objetiva e convincente.
Robots está coerente com a página.
Canonical aponta para a URL oficial correta.

Checklist de compartilhamento

Open Graph possui title, description, image e url.
Twitter Card possui card, title, description e image.
A imagem social está online e acessível.
O card social tem aparência profissional.

Erros comuns:

Copiar o mesmo head para todas as páginas sem adaptar.
Title e description duplicados.
Robots bloqueando página que deveria indexar.
Open Graph incompleto.
Não testar o resultado no navegador e no DevTools.

Desafio Mestre

Página HTML com Head Profissional e Meta Tags

Missão: criar o arquivo meta-tags-head-profissional.html demonstrando domínio da sala de controle invisível do HTML: SEO técnico, responsividade, indexação, rastreamento, canonical e compartilhamento social.

Requisitos obrigatórios

Arquivo meta-tags-head-profissional.html.
Doctype HTML5 e html lang="pt-BR".
Head profissional completo.
charset UTF-8.
Viewport responsivo.
Title forte e específico.
Meta description objetiva e convincente.
Meta author com o nome do aluno.
Meta robots configurado corretamente.
link rel="canonical".
Open Graph completo com og:title, og:description, og:image e og:url.
Twitter Card com twitter:card, twitter:title, twitter:description e twitter:image.
Body com header, nav, main, section, article, aside e footer.
H1 com “Página HTML com Head Profissional e Meta Tags”.
Section introdutória explicando a função do head.
Nav interno com links para pelo menos 4 seções.
Pelo menos 4 sections com h2.
Explicação clara da diferença entre title e h1.
Explicação clara da diferença entre meta description e og:description.
Explicação clara de robots e canonical.
Lista com pelo menos 12 boas práticas para meta tags.
Checklist de validação SEO e compartilhamento.
Footer com nome do aluno, ano e link para voltar ao topo.

Erros que reprovam:

Meta tags dentro do body.
Ausência de charset UTF-8.
Ausência de viewport.
Title genérico ou duplicado.
Description vazia, gigante ou duplicada.
Keyword stuffing.
Canonical inexistente ou errado.
Open Graph incompleto.
Robots bloqueando página pública sem intenção.

Quiz com gabarito

15 perguntas para provar domínio

Onde ficam as meta tags? No head.
Qual charset evita problemas de acentuação? UTF-8.
Para que serve viewport? Responsividade em dispositivos móveis.
Meta tags aparecem no body? Não.
Qual tag define o resumo nos resultados de busca? meta description.
O que faz robots index, follow? Permite indexar e seguir links.
O que faz noindex? Impede que a página apareça nos resultados de busca.
Qual protocolo controla cards sociais amplamente usados? Open Graph.
Qual meta define a imagem social? og:image.
Para que serve canonical? Indicar a URL oficial e evitar duplicação.
Title e h1 precisam ser idênticos? Não, mas precisam ser coerentes.
Qual é o erro de keyword stuffing? Encher metadados com palavras-chave sem nexo.
Twitter Card é obrigatório para Google? Não, é voltado ao compartilhamento no X/Twitter.
Quantos title uma página deve ter? Um.
O head é visível ao usuário comum? Não diretamente, mas influencia a experiência.

GitHub

Registre sua página com head profissional

git status
git add .
git commit -m "aula-38: cria pagina com head profissional e meta tags"
git push

git status: verifica o arquivo novo e alterações.
git add .: prepara a aula para versionamento.
git commit: documenta sua evolução em SEO técnico.
git push: publica a evidência no portfólio remoto.

Resumo Mestre

Meta tags transformam invisível em resultado visível

O Mestre configura charset para ser entendido, viewport para ser visto, description para ser clicado, robots para ser rastreado, canonical para ser consolidado e Open Graph para ser compartilhado com autoridade.

Nota final: 10/10 Supremo.

Esta aula está no nível Mestre dos Mestres porque sai do HTML visível e entra na estratégia real da web: comunicação com navegadores, buscadores, redes sociais, crawlers, dispositivos e mercado.

Voltar ao Módulo HTML5 Voltar ao Topo