Módulo 9: SEO e Visibilidade

2. Resumo da Aula Anterior

No módulo passado, aprendeste a tornar o teu site Acessível para todos. Agora, vamos aprender a torná-lo Visível para o mundo. SEO é o que garante que o teu site não é apenas uma agulha num palheiro, mas sim o primeiro resultado que o utilizador encontra no Google.

3. O Que Vais Aprender Hoje

O Google não é um humano; ele é um robô que lê o teu código. Nesta aula, vais aprender a falar a língua dele:

✅ O que é o SEO "On-Page" e porque é que é vital.
✅ Como configurar o <title> e a <meta description> perfeitos.
✅ O poder das tags Open Graph (como o teu site aparece no WhatsApp/Facebook).
✅ Tags Técnicas: robots, canonical e o favicon.
✅ A hierarquia de títulos como fator de ranking.

4. Teoria: A Montra Digital

O que o Google lê primeiro?

O Google olha primeiro para o <head> do teu HTML. Se o teu título for apenas "Página Inicial", tu perdeste a oportunidade de dizer do que se trata o teu negócio. Um bom título deve ter entre 50 a 60 caracteres.

Meta Description: O Teu Pitch de Vendas

A meta descrição não ajuda diretamente no ranking, mas ajuda a convencer o utilizador a CLICAR. É o texto que aparece por baixo do título nos resultados de pesquisa. Mantém-no abaixo dos 160 caracteres!

📢 Analogia: O Cartaz da Estrada

Imagina que o teu site é uma loja perdida numa floresta:

SEO: São as placas de sinalização na estrada principal.
Open Graph: É o folheto bonito que alguém entrega aos amigos. Sem ele, o folheto é apenas um papel pardo sem fotos.
Canonical: É a placa que diz "A loja oficial é esta!", para evitar que os clientes vão para uma cópia ou para uma tenda temporária ao lado.

Redes Sociais e Open Graph (OG)

Já reparaste que quando colas um link no WhatsApp aparece uma imagem e um título bonito? Isso acontece por causa das tags og:title, og:description e og:image. Se não as usares, a rede social tenta "adivinhar" e o resultado costuma ser feio.

5. Exemplos de Código

Exemplo 1: O Head Perfeito para SEO
                    <head>
  <title>Curso de HTML5 Grátis | Aprende Web em Portugal</title>
  <meta name="description" content="Domina a criação de sites do zero com o nosso curso prático de HTML5. Aulas passo a passo com exemplos reais.">

  <!-- Impedir que o Google indexe uma página de testes -->
  <meta name="robots" content="index, follow">

  <link rel="canonical" href="https://aprendeweb.pt/html5">
</head>
                

Exemplo 2: Configuração para Redes Sociais
                    <meta property="og:type" content="website">
<meta property="og:title" content="Aprende Web: HTML5 para Iniciantes">
<meta property="og:image" content="https://aprendeweb.pt/img/banner-social.jpg">
<meta name="twitter:card" content="summary_large_image">
                

6. Agora é a Tua Vez! (Otimizando o Teu Projeto)

Vamos preparar o teu site para ser "famoso" no Google e nas redes sociais. Segue estes passos:

Título Único: No teu arquivo principal, muda o <title> para algo que inclua o teu nome e a tua profissão (ex: "Artur Silva | Portfolio de Web Design").
A "Chamada": Adiciona a tag de meta description. Escreve uma frase que faça alguém querer clicar no teu site em vez de outro.
A Imagem de Partilha: Cria ou procura uma imagem (1200x630 pixels) e coloca o link dela na tag og:image.
O Ícone da Identidade: Define o teu favicon. É o detalhe que faz o site parecer profissional.
Teste de Robô: Verifica se os teus títulos (h1, h2, h3) seguem uma ordem lógica. Lembra-te: o Google lê a hierarquia para saber o que é mais importante!

7. Verificação de Conhecimento

SEO não é magia, é organização. Prova que sabes falar com os motores de busca!

Carregando quiz...

8. Resumo do Que Aprendemos

📌 Title e Description são o teu pitch de vendas no Google.
📌 Open Graph (OG) controla a aparência em apps como WhatsApp e Facebook.
📌 Hierarquia de Títulos (h1 -> h2 -> h3) é vital para o ranking.
📌 Canonical impede confusão com conteúdo duplicado.
📌 Favicon é essencial para a identidade e confiança do utilizador.

9. Desafios Práticos

Desafio 1: Títulos Duplicados

Se tiveres 3 páginas com o mesmo título "Meu Site", como é que o Google reage? Porque é que isto é mau?

Solução: O Google penaliza o site porque não sabe qual página mostrar para cada pesquisa. Cada página do teu site deve ter um título **único** e específico.

Desafio 2: Imagens Pesadas

Porque é que o Google retira pontos a um site que tem imagens muito grandes (ex: 5MB cada uma), mesmo que o SEO das tags esteja perfeito?

Solução: Porque a velocidade de carregamento (Core Web Vitals) é um fator de ranking. O Google privilegia sites rápidos para não gastar os dados dos utilizadores!

Desafio 3: O robots.txt

Pesquisa o que é o ficheiro robots.txt e onde ele deve ser colocado no teu servidor.

Solução: É um ficheiro de texto na **raiz** do teu site que diz aos robôs quais pastas eles PODEM ou NÃO PODEM ler (ex: podes esconder a pasta de 'admin').

Módulo 9: SEO (Otimização para Motores de Busca)