A diferença entre os argumentos Header x Head é simples, mas os usos do argumento <header> ainda são pouco comuns entre os produtores de conteúdo SEO. O motivo? Falta de conhecimento. O problema do Head x Header, ou vice-versa, é o problema de entender como um arquivo Web deve ser estruturado. E isso você vai conferir aqui.
Para que serve a tag <header>
A tag <header> é a marcação de um cabeçalho de conteúdo. Semanticamente, um cabeçalho é a parte principal do conteúdo, que direciona sobre o que o que vêm na sequência aborda. Lembre-se dos seus cabeçalhos de cadernos escolares. Eles provavelmente tinham essa cara:
Título | Matéria | DD/MM/AA
É um formato clássico que segue um propósito também batido: orientar. Saber do que se trata. Direcionar o olhar. É um conceito de escaneabilidade que internalizamos depois de ver os professores repetirem várias vezes nos quadros e repetimos instintivamente. Veja que informações ele traz:
- Título: orienta o olhar para o nome do assunto
- Matéria: contextualiza o assunto dentro de um universo de referências
- Data: contextualiza o assunto dentro de uma janela temporal
Isso para atender a uma demanda do aluno. Estudar para provas. Passar na matéria. Fácil, não? Mas o cabeçalho dos conteúdos web precisa conter outras informações, que falem tanto para o leitor – pessoa – quanto para a máquina – crawler.
Como usar a tag <header>
A tag <header> pode ser usada em diversos conteúdos com o intuito de marcar o cabeçalho do conteúdo principal (tag <main>) ou conteúdo complementar (tag <article>). Não é recomendável que haja também uma tag <header> para sessões de conteúdo (<sections>), pois uma sessão pressupõe que haja um cabeçalho.
Portanto, por ser a frente do conteúdo e explicar para o buscador que aquele seu article ou main possui um cabeçalho, os elementos que tendem a ficar dentro da tag <header> são:
- Os H’s da divisão do conteúdo (H1 para <header> do conteúdo <main> e os H2 dos <articles> internamente)
- Os primeiros parágrafos do conteúdo.
Para colocar todos dentro de uma tag <header>, recomendo o uso do agrupador de blocos da versão 6.0.2 do WordPress. O processo é bem simples.
- Selecione o título da seção ou artigo (H1 ou H2) e os dois primeiros parágrafos;
- Clique na opção “agrupar”;
- Vá em “avançado” no editor de blocos e clique em “elemento HTML”
- Selecione o elemento “Header”
E pronto! O cabeçalho da sua sessão de conteúdo está construído. Separei esse pequeno GIF para facilitar a diagramação.
Orientações para usar o elemento <header>
Outro aspecto muito comum é inserir dentro do elemento <header> qualquer elemento navegacional – como é o caso de Tables of Content (ToC). Esse plug-in, valiosíssimo do ponto de vista de usabilidade de usuário, nada mais é do que um campo navegacional (<nav>) inserido no conteúdo, permitindo ao leitor transitar por diferentes áreas.
A inserção de elementos <nav> dentro de <header>, mesmo que não explicitamente um <nav> (ou seja, uma ToC criada manualmente) é considerada das melhores práticas de conteúdo e deve ser a header principal do conteúdo (dentro do <main> do URL).
É importante destacar que elementos <footer> e <address>, por exemplo, não podem conter um elemento <header> em seu interior. A Mozilla tem algumas recomendações sobre seu uso que valem a pena serem lidas.
Qual a diferença entre <header> e <h1>, <h2> e <h3>?
A tag <header> é um cabeçalho de maneira geral, incluindo todos os dados contextuais úteis para o conteúdo. Já a tag <h1>, <h2> e <h3> são títulos – também contextuais -, mas de maior demarcação.
Muitos conteúdos web não se preocupam em marcar essa diferença, fazendo com que a tag <header> tenha menos peso do que a aplicação correta das tags headings (os H’s). Porém, ela ainda diferencia a produção de conteúdo SEO madura da amadora.
Confira abaixo um exemplo de código com Header prevista.
<main>
<header>
<h1>Head ou Header</h1>
<p><b>:qual formato utilizar</b></p>
<p>Se você tem dúvida entre usar Head ou Header, lembre-se que Head é a cabeça do documento HTML, e Header, é a cabeça do conteúdo no documento.</p></header>
<article>
<header>
<h2>O que é a tag Head</h2>
<p>A tag Head é uma das principais estruturas de um documento HTML, a primeira lida pelo navegador e onde se inserem os metadados da página.</p>
</header>
<section>
<h3>Para que serve a Head</h3>
<p>A Head é onde se insere o conteúdo lido <b>apenas</b> pelo navegador, pelo <i>crawler</i>, e, portanto, não se repete no documento além de uma vez. Ele também não pode estar contido dentro da tag "<body>"</p>
</section>
</article>
</main>Repare sempre que as chaves foram abertas e fechadas em uma sequência. O <H2> ficou dentro de uma tag <header>, que por sua vez estava dentro de um <article>, enquanto a tag <H3>, não, pois ela é uma sessão dentro desse mesmo <article>.
E para que serve a tag <head>
Diferente da <header>, a <head> é um dos mais altos níveis de hierarquia em uma página HTML. A quesito de comparação, três tags englobam todo o conteúdo – legível e invisível – de uma página HTML: <head>, <body> e <footer>.
A tag Head é a primeira e vem logo na sequência da abertura do arquivo HTML. Nela se inserem todos os metadados da página, assim como os códigos do Google Analytics, Search Console e APIs similares.
Ela não é editável em arquivos de blogs, sendo algo mais dentro do escopo do SEO Técnico. Muitas vezes sua alteração pede que o desenvolvedor opere em arquivos de temas, por exemplo. A tag Head também é muito usada para schemas, pois é a primeira informação lida pelo Google e essencial para se conquistar SERPs.
Qual a diferença entre Header x Head?
Ambos os elementos são fundamentalmente diferentes, e para o Redator SEO é importante entender sobretudo os usos possíveis de uma <header>, e a importância teórica de uma <head>. A diferença Header x Head é sobretudo estrutural, conceitual e de aplicação. Um tipo de questão necessária para a certificação em produção de conteúdo SEO ou para uma vaga bem desejada.
