<h1> - Impacto semântico x impacto no SEO

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

• https://youtu.be/GIn5qJKU8VM
• http://accessiblehtmlheadings.com/
• http://html5doctor.com/outlines/
• http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

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.

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 h1qualquer lugar (se você estiver sempre usando elementos de conteúdo de seção, quando apropriado).

Você não pode "aplicar" cabeçalhos headerou footerelementos, 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 de header/ 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- h6sã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 navsem 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ê navaparece antes do primeiro elemento do cabeçalho; caso contrário, esse h1seria o cabeçalho de todo o documento).
Não acho que ter uma bodyseçã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 bodycabeçalho da seção, porque a navegação global pertence a todo o site , não apenas ao documento atual:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
-->

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:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <article> <!-- document content -->
    <h2>My blog post</h2>
  </article>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "My blog post"
-->

Se você possui várias seções do conteúdo principal, por exemplo, uma lista de postagens do blog, geralmente faz sentido usar um sectionque contenha tudo isso article, em vez de ter os articlefilhos diretos de body:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- document content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
-->

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 navconteúdo principal (como ele pertence ao site, não o conteúdo principal):

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- main content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

  <section> <!-- site footer -->
    <!-- this section should be the child of a 'footer' element -->
  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
    1.3. Untitled section
-->

(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 h1nome do site esteja antes de qualquer outra seção / título.)