Títulos e a estrutura de uma página

Módulo 3: A base técnica de uma página · Tempo de leitura: 11 minutos

Objetivo de aprendizagem: No final desta lição, será capaz de estruturar uma página com um título principal claro e subtítulos lógicos, explicar o que o Google e os leitores de ecrã fazem com os títulos, e escrever bons textos alternativos e nomes de ficheiro para imagens.

Conceitos chave: título (<h1> a <h6>), título principal, subtítulo, saltar um nível, HTML semântico, leitor de ecrã, texto formatado que não é um título, texto alternativo, alt="" vazio para decoração, nome de ficheiro, texto em imagens

Os títulos são o índice da sua página

Ninguém gosta de ler um texto longo sem subtítulos. Na internet isso é ainda mais evidente: os visitantes começam por percorrer a página com os olhos e só leem quando veem que a resposta lá está. Os títulos ajudam nisso. Mas os títulos são mais do que letras grandes e a negrito. Em HTML são elementos próprios com um nível:

<h1>Ramos de noiva por medida</h1>
  <h2>Como trabalhamos</h2>
    <h3>O primeiro contacto</h3>
    <h3>O ramo de prova</h3>
  <h2>Exemplos</h2>
  <h2>Perguntas frequentes</h2>

O <h1> é o título principal: de que trata esta página? Os <h2> são os capítulos, os <h3> as secções dentro deles, e assim por diante até ao <h6>. (No exemplo, uma página de ramos de noiva por medida, com títulos em neerlandês.) O recuo acima serve apenas para ilustrar; no HTML real não tem importância.

Há dois grupos que leem realmente esta estrutura:

1. Pessoas que utilizam um leitor de ecrã. Um visitante cego ou com baixa visão pede muitas vezes ao leitor de ecrã que enumere primeiro todos os títulos e depois salta para a parte que procura. Sem títulos verdadeiros, a página é um único bloco de texto.
2. Motores de pesquisa. O Google utiliza os títulos para compreender de que tratam as diferentes partes de uma página.

O que o Google diz sobre os títulos

Circulam muitos mitos sobre os títulos. Eis o que o próprio Google diz:

• No guia de iniciação à SEO do Google lê-se que a ordem dos títulos não importa para a Pesquisa Google e que não existe um número mágico de títulos que uma página deva ter. Ainda assim, títulos numa ordem lógica são muito úteis para os leitores de ecrã.
• John Mueller, do Google, afirmou num vídeo (2019) que os sistemas do Google não têm qualquer problema com vários títulos <h1> numa página. O Google procura trabalhar com o HTML tal como está: um <h1>, vários, ou apenas texto formatado sem títulos verdadeiros.
• Na documentação sobre links de título (lição 3.1), o Google refere uma situação que pode correr mal: a ausência de um título principal claro. Se houver vários títulos grandes e chamativos no topo e não for claro qual é o principal, o Google pode ter dificuldade em escolher um bom link de título. O Google recomenda distinguir claramente o título principal, por exemplo como o primeiro <h1> visível.

A conclusão deste curso: um único <h1> claro por página é um bom hábito, não porque o Google o penalize caso contrário, mas porque assim a página diz claramente a todos de que trata. Leitores, leitores de ecrã e o Google não têm como o ignorar. Por isso, a verificação do exercício A3.2 dá verde quando existe exatamente um <h1> não vazio, laranja quando há mais do que um e vermelho quando não há nenhum.

O que corre mal com frequência

Construir uma página que dá resposta

Uma boa ordem para quase todas as páginas:

1. Título principal (<h1>) que diz o que o visitante encontra aqui. Costuma ser parecido com o título da lição 3.1, mas não tem de ser igual. O título aparece nos resultados de pesquisa; o título principal, na própria página.
2. Uma introdução curta com a resposta mais importante logo à partida.
3. Subtítulos (<h2>) para cada subtema, escritos como algo que o leitor procura: "Quanto custa um ramo de noiva?" diz mais do que "Preços".
4. Quando necessário, <h3> por baixo de um <h2>, nunca de forma isolada.

A lição 7.3 aprofunda a escrita propriamente dita. Aqui trata-se do esqueleto.

Imagens: texto alternativo e nome de ficheiro

Um motor de pesquisa não "vê" uma fotografia como o utilizador a vê. O Google usa visão computacional, mas retira muita informação do texto à volta. A fonte mais importante é indicada pelo próprio Google: o texto alternativo.

<img src="/imagens/ramo-de-noiva-peonias-brancas.jpg"
     alt="Ramo de noiva com peónias brancas e eucalipto">

O texto alternativo (atributo alt) tem duas funções:

• Acessibilidade: um leitor de ecrã lê-o em voz alta a quem não consegue ver a imagem. Se a imagem não carregar, o navegador mostra-o em vez da fotografia.
• Compreensão: o Google utiliza o texto alternativo, juntamente com a visão computacional, para perceber o que a imagem mostra. Isso ajuda sobretudo no Google Imagens.

Como escrever um bom texto alternativo:

• Descreva o que se vê e porque está nesta página, numa frase curta.
• Use palavras-chave apenas quando encaixam naturalmente. O Google avisa que textos alternativos cheios de palavras-chave dão uma má experiência e podem ser considerados spam.
• Uma imagem que é apenas decoração (uma linha, um padrão de fundo) recebe um alt vazio: alt="". Assim, o leitor de ecrã ignora-a. Um atributo alt em falta é diferente: nesse caso, o leitor de ecrã lê por vezes o nome do ficheiro.
• Se a imagem contiver texto importante (um horário, um preço, um folheto), coloque também esse texto na página como texto normal. Texto dentro de uma imagem é difícil de ler para um leitor de ecrã e para um motor de pesquisa.

O nome do ficheiro também ajuda um pouco. O Google recomenda nomes curtos e descritivos e dá image1.jpg ou pic.gif como exemplos do que é preferível evitar. ramo-de-noiva-peonias-brancas.jpg diz mais do que IMG_4032.jpg.

A velocidade e as dimensões das imagens são abordadas na lição 4.3.

Na prática: títulos nos criadores de sites

• No AI Builder da WebOké, o primeiro título de uma página passa automaticamente a ser o <h1> e todos os títulos seguintes passam a <h2>. Assim, cada página tem exatamente um título principal. Em cada fotografia pode preencher uma descrição, que se torna o texto alternativo. A verificação SEO avisa quando há fotografias sem descrição.
• No WordPress, escolhe o nível (H1 a H6) no bloco Título do editor de blocos. Normalmente, o tema já transforma o próprio título da página no <h1>; no texto, utilize então H2 e níveis inferiores. O texto alternativo é preenchido na imagem, na biblioteca multimédia ou no próprio bloco.

Outros criadores de sites funcionam de forma semelhante. Em caso de dúvida, consulte o código-fonte (Ctrl+U) ou procure <h1 com Ctrl+F.

Resumo

• Os títulos (<h1> a <h6>) são o índice da sua página, para leitores, leitores de ecrã e motores de pesquisa.
• O Google não tem problemas com vários <h1> nem com outra ordem, mas recomenda um título principal claro. Um único <h1> claro é um bom hábito.
• Escolha o nível com base na estrutura e não no tamanho da letra; de preferência, não salte níveis.
• Um bom texto alternativo descreve brevemente o que se vê; a decoração recebe alt=""; nada de acumular palavras-chave.
• O texto importante pertence à página, não apenas a uma imagem.

Questionário

Exercício

Exercício A3.2: Um único título principal e uma estrutura lógica. Introduza o endereço de uma página do seu próprio site. O programa obtém a página, conta os títulos <h1> e mostra a estrutura de títulos como um índice. Vê se existe exatamente um título principal não vazio, se há níveis saltados e quantas imagens não têm atributo alt. Indique antecipadamente quantos <h1> pensa que existem. Não tem site próprio? Utilize www.rijksoverheid.nl.

Para saber mais

• Google Search Central, guia de iniciação à SEO (títulos, texto alternativo): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, boas práticas para imagens: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (títulos acessíveis): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, textos alternativos: https://www.w3.org/WAI/tutorials/images/
• Curso gratuito de WordPress 4.4: Multimédia: imagens e texto alternativo