Há muito debate sobre a arquitetura da estrutura de cabeçalho no html5. Depois de ler vários artigos, cheguei a três arquiteturas possíveis que fazem sentido lógico para mim, mas não tenho certeza qual é o método adequado de abordagem. Vou listá-los abaixo com exemplos de código e espero que alguém possa lançar alguma luz sobre o equilíbrio adequado, ou pior / melhor ainda, dizer o temido "Você está fazendo errado" e dar uma mãozinha.
Abordagem 1: Versão A
Único <h1>
: usando títulos apenas para conteúdo específico da página.
Isso deixa a <h1>
navegação de nível superior para o cabeçalho específico da página enquanto flui <h2-6>
conforme necessário na área de conteúdo. Deixando os <header>
, <nav>
e <footer>
como elementos de "Untitled".
<header>
<nav>
<!-- no headings -->
<div role="main">
<h1>
<section>
<h2>
<section>
<h3>
<footer>
<!-- no headings -->
Abordagem 1: Versão 2
Múltiplos <h1>
: use apenas títulos para conteúdo específico da página.
O mesmo que 1A com a adição de vários tópicos de conteúdo da página igualmente importantes. (por exemplo, possível para blogs ou páginas de tópicos divididos)
<header>
<nav>
<!-- no headings -->
<div role="main">
<h1>
<article>
<h2>
<article>
<h1>
<footer>
<!-- no headings -->
Abordagem da abordagem 1: mais lógica para SEO (minha opinião da minha pesquisa)
- BODY sem título
- NAV sem título
- cabeçalho principal
- Título da seção
- Título da subseção
- Sem título SECÇÃO
Abordagem 2:
Múltiplos <h1>
: enfatize a estrutura de tópicos E a hierarquia de conteúdo
Isto aplica-se títulos para os elementos em todo o site <header>
, <nav>
e <footer>
usando múltiplos <h1>
é para elementos orientados não de conteúdo.
<header>
<h1>
<nav>
<h2>
<div role="main">
<h1>
<section>
<h2>
<section>
<h3>
<footer>
<h1>
<section>
<h2>
Esboço da Abordagem 2: Mais lógico para o esboço semântico (novamente, minha opinião)
- Cabeçalho Cabeçalho
- Cabeçalho de navegação
- cabeçalho principal
- Título da seção
- Título da subseção
- Cabeçalho do rodapé
- Título da seção
Abordagem 3
Único <h1>
: foco na hierarquia de conteúdo; nível mais baixo <h1-6>
para elementos em todo o site
Isto aplica-se títulos para os elementos em todo o site <header>
, <nav>
e <footer>
sem o uso múltiplo <h1>
é para elementos orientados não de conteúdo.
<header>
<h2>
<nav>
<h3>
<div role="main">
<h1>
<section>
<h2>
<section>
<h3>
<footer>
<h2>
<section>
<h3>
Abordagem da abordagem 3: meio que um híbrido de ambas as abordagens
- Cabeçalho Cabeçalho
- Cabeçalho de navegação
- cabeçalho principal
- Título da seção
- Título da subseção
- Cabeçalho do rodapé
- Título da seção
Então, com tudo o que foi dito, como entendo tudo isso? Alguma abordagem carrega mais valor semântico que a outra? Alguém faz mais sentido em termos de SEO? Existe um equilíbrio feliz que pode ser alcançado?
Fontes: Havia muito mais, são essas as que me lembro no momento
Respostas:
Para começar, nenhum de seus exemplos tem nada a ver com semântica. Sua pergunta é completamente baseada no modelo do analisador, em que a página é lida de cima para baixo da maneira tradicional.
Por esse motivo, seu primeiro exemplo está correto. Os exemplos a seguir não fornecerão resultados previsíveis e podem causar queimaduras graves no coração.
Por favor, entenda que sua página da web será analisada conceitualmente de várias maneiras: uma, seguindo o modelo DOM tradicional, onde o HTML é avaliado da perspectiva do usuário; dois, texto apenas com marcação simples para indicar títulos, subtítulos, conteúdo e assim por diante; e três, usando uma visualização semântica, na qual apenas um leve peso é aplicado às tags de cabeçalho no índice, com base no seu lugar na hierarquia h1-6. No modelo DOM, você obterá coisas como a tag title, a meta tag de descrição e outras que faltariam nas outras duas visualizações. No entanto, a exibição do DOM pouco faz para ponderar seu conteúdo. Sua principal função é entender sua página, onde está sua navegação, onde estão seu cabeçalho e rodapés, onde seu conteúdo começa e termina etc.
O que você realmente precisa prestar atenção é o texto apenas e as visualizações semânticas. A visão semântica é principalmente derivada da visão apenas do texto, no entanto, ela carrega várias linguísticas, psicosemanticas, semânticas e outras análises do seu conteúdo.
Não descreverei a semântica novamente, mas apontarei para uma resposta que escrevi há pouco tempo, que é um mini-tutorial sobre o assunto: Por que um site com preenchimento de palavras-chave teria uma classificação maior que uma sem os resultados de pesquisa do google?
Como a Web se baseia na página impressa e nos analisadores desde os primeiros dias seguidos dessas tradições e são praticamente inalterados, é impossível escapar deles. Aqui está uma resposta que explica a ordem de leitura do título, que continua sendo a melhor estratégia com base no modelo do analisador: melhore a classificação do Google para palavras-chave gerais e específicas
Embora eu admita que possa haver algum efeito movendo as tags de cabeçalho, pergunto: é uma coisa sábia a se fazer? De jeito nenhum! Como as coisas são pesadas hoje pode não ser como são pesadas amanhã. Seguir um formato tradicional garante resultados previsíveis, onde, como uma simples alteração na ponderação, o site pode ser torcido.
Aqui está uma perspectiva de como isso funciona: Benefício de nomes de domínio em SEO Ignore o título e pule a parte superior da resposta e chegue à perspectiva dos programadores.
Se você ler estas três respostas, poderá entender facilmente os efeitos da tag do cabeçalho. É muito possível arruinar o desempenho da sua página / sites, ficando fofo com a maneira como você os organiza. Mesmo seguindo a tradição, você pode desfazer sua tag de título e tag h1 extremamente rapidamente, otimizando demais algumas tags de cabeçalho inferiores. Equilíbrio cuidadoso é a chave.
Por fim, vou avisá-lo sobre todos esses conselhos de SEO on-line de pessoas que não são engenheiros. É uma raquete para ganhar dinheiro e disputar sua atenção. Como os mecanismos de pesquisa funcionam não é um segredo. Está lá fora, se você souber onde procurar. A maioria dos especialistas em SEO não é especialista em nada, pois não pode lhe dizer o interior de como a tecnologia de pesquisa é montada. A não ser que seja engenheiro do Google ou Bing, nunca podemos realmente saber exatamente como esses mecanismos de pesquisa funcionam. Felizmente, o Google nos disse o suficiente (e realmente eles nos disseram quase tudo o que precisamos saber - e não, não veio de um cara chamado Matt) que, se você conhece a ciência e as tecnologias, um conjunto bastante razoável de suposições pode ser feito. Na minha perspectiva, a maioria dos SEOs está mais errada do que certa, enquanto alguns têm uma taxa de acerto muito maior que a média.
fonte
O seguinte é da perspectiva da especificação HTML5, com base na suposição de que os consumidores (como os mecanismos de pesquisa) esperam e trabalham com o que é especificado nos padrões HTML. Na prática atual, esses detalhes de marcação provavelmente não importam muito para o SEO, mas podem ser importantes para outros consumidores e acessibilidade.
Usarei títulos da classificação apropriada, pois é isso que o HTML5 incentiva , mas também é possível usar em
h1
qualquer lugar (se você estiver sempre usando elementos de conteúdo de seção, quando apropriado).Você não pode "aplicar" cabeçalhos
header
oufooter
elementos, porque eles não estão secionando conteúdo (eles podem conter apenas cabeçalhos, mas esse cabeçalho não estaria restrito ao escopo deheader
/footer
).Cada elemento de conteúdo de seccionamento (
section
,article
,nav
,aside
) e cada elemento de corte de raiz (body
,blockquote
, etc.) podem ter um título aplicado.Esses elementos de conteúdo / raiz de seção e os elementos de cabeçalho
h1
-h6
são os únicos elementos importantes para o esboço do documento .Embora toda seção "anseie" por um título, não é necessário fornecer um (nesse caso, ele obtém um título "implícito" e sem título). Embora muitas vezes seja útil fornecer uma, há casos em que não é realmente necessário. Por exemplo, se você tiver apenas uma navegação, ter um
nav
sem cabeçalho seria suficiente. Mas se o site tiver várias navegações, pode fazer sentido usar cabeçalhos que expliquem os diferentes propósitos.Na sua abordagem 1, essa
body
é uma seção sem título (mas esse é apenas o caso porque vocênav
aparece antes do primeiro elemento do cabeçalho; caso contrário, esseh1
seria o cabeçalho de todo o documento).Não acho que ter uma
body
seção sem título seja uma boa escolha. É a primeira entrada no esboço e, idealmente (mas não necessariamente), tudo o que se segue está no escopo desta entrada.Para um site típico que possui uma navegação global, faz sentido ( explicação mais longa ) usar o nome do site para o
body
cabeçalho da seção, porque a navegação global pertence a todo o site , não apenas ao documento atual:O conteúdo principal deste documento também deve estar no escopo do cabeçalho do site, pois o site é o contexto do conteúdo principal deste documento, ou seja, faz parte do seu site:
Se você possui várias seções do conteúdo principal, por exemplo, uma lista de postagens do blog, geralmente faz sentido usar um
section
que contenha tudo issoarticle
, em vez de ter osarticle
filhos diretos debody
:Se você tem um rodapé em todo o site que é tão complexo que precisa de elementos de seção, ele deve estar novamente no mesmo nível que o
nav
conteúdo principal (como ele pertence ao site, não o conteúdo principal):(Em todos esses exemplos, a navegação vem antes do conteúdo principal, mas geralmente faz sentido ter o conteúdo principal primeiro. É possível trocar isso. Você só deve garantir que o
h1
nome do site esteja antes de qualquer outra seção / título.)fonte