Avançar para o conteúdo principal

Metadados do <head>

Após a criação do header, é importante adicionar corretamente os metadados no cabeçalho. Apesar da informação do header se repetir em todas as páginas, é possível fazer com que alguma dessa informação possa ser alterada automaticamente, consoante a página em que o utilizador final esteja a visitar. Um caso disto é o título da página.

Vejamos como podemos melhor configurar os metadados.

Primeiro, devemos identificar no cabeçalho a informação que queremos modificar.

image-1641299179001.png

No caso do template que estamos a utilizar, temos o título da página e o favicon, mas ainda queremos colocar a descrição da página e outras informações úteis para efeitos de SEO (Search Engine Optimization).

Em primeiro lugar, vamos selecionar o texto do título da página e depois abrir o modal de inserção de elementos. Clique em Elementos de Informações da Página. Deverá abrir desde modo:

image-1641299333080.png

Agora, clique em Título da Página.

O código HTML deverá agora estar assim:

image-1641299453115.png

Com esta alteração, a aba do navegador WEB deverá ter o nome que foi dado à página no momento de criação da mesma.

Pode, também, escrever qualquer informação que preferir e conjugar a mesma com o [page_title]. Por exemplo, assim:

image-1641299700560.png

Deste modo, quando estiver, por exemplo, na página inicial do seu website, a aba do separador do navegador WEB deverá ter o nome de "Início - O meu website", mas a página contactos (caso a tenha nomeada de "Contactos", ficará automaticamente como "Contactos - O meu website".