<h1> - Impatto semantico vs. impatto SEO

C'è molto dibattito sull'architettura della struttura delle intestazioni in HTML5. Dopo aver letto vari articoli, sono arrivato a tre possibili architetture che hanno un senso logico per me, ma non sono sicuro di quale sia il vero metodo di approccio. Li elencherò di seguito con esempi di codice e si spera che qualcuno possa far luce sul giusto equilibrio, o peggio / meglio ancora, dire il temuto "Stai sbagliando" e dare una mano.

Approccio 1: versione A

Singolo <h1>: utilizzo delle intestazioni solo per il contenuto specifico della pagina.

Questo lascia la <h1>navigazione di livello superiore per l'intestazione specifica della pagina mentre scorre <h2-6>come necessario all'interno dell'area del contenuto. Lasciando i <header>, <nav>e <footer>come elementi "Senza titolo".

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <section>
    <h2>
      <section>
        <h3>

<footer>
  <!-- no headings -->

Approccio 1: versione 2

Multipli <h1>: utilizzo delle intestazioni solo per contenuti specifici di una pagina.

Come 1A con l'aggiunta di più argomenti, ugualmente importanti, sul contenuto della pagina. (ad es. possibile per blog o pagine di argomenti divisi)

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <article>
    <h2>
  <article>
    <h1>

<footer>
  <!-- no headings -->

Schema dell'approccio 1: più logico per la SEO (la mia opinione dalla mia ricerca)

• CORPO senza titolo
  • NAV senza titolo
• titolo principale
  • Titolo della sezione
    • Titolo della sottosezione
  • SEZIONE senza titolo

Approccio 2:

Multipli <h1>: enfatizzare la struttura dei contorni E la gerarchia dei contenuti

Questo vale intestazioni agli elementi a livello di sito <header>, <nav>e <footer>l'utilizzo di più <h1>'s per la non-contenuti elementi orientati.

<header>
  <h1>
  <nav>
    <h2>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h1>
  <section>
    <h2>

Schema dell'approccio 2: più logico per il profilo semantico (di nuovo, la mia opinione)

• Intestazione
  • Direzione di navigazione
• titolo principale
  • Titolo della sezione
    • Titolo della sottosezione
• Titolo piè di pagina
  • Titolo della sezione

Approccio 3

Singolo <h1>: focus sulla gerarchia dei contenuti; livello inferiore <h1-6>per elementi a livello di sito

Questo vale intestazioni agli elementi a livello di sito <header>, <nav>e <footer>senza l'utilizzo di più <h1>'s per i non-contenuti elementi orientati.

<header>
  <h2>
  <nav>
    <h3>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h2>
  <section>
    <h3>

Schema dell'approccio 3: un po 'ibrido di entrambi gli approcci

• Intestazione
  • Direzione di navigazione
• titolo principale
  • Titolo della sezione
    • Titolo della sottosezione
  • Titolo piè di pagina
  • Titolo della sezione

Quindi, con tutto ciò che ho detto, come posso dare un senso a tutto ciò? Qualunque approccio ha un valore semantico maggiore dell'altro? Uno ha più senso in termini di SEO? C'è un felice equilibrio che può essere raggiunto?

Fonti: ce n'erano molte altre, queste sono quelle che ricordo al 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

Per cominciare, nessuno dei tuoi esempi ha nulla a che fare con la semantica. La tua domanda si basa completamente sul modello di parser in cui la pagina viene letta dall'alto verso il basso in modo tradizionale.

Per questo motivo, il tuo primo esempio è corretto. I seguenti esempi non daranno risultati prevedibili e possono causare gravi ustioni al cuore.

Ti preghiamo di comprendere che la tua pagina web verrà esaminata concettualmente in diversi modi: uno, seguendo il tradizionale modello DOM in cui HTML e simili vengono valutati dal punto di vista dell'utente; due, solo testo con semplice mark-up per indicare titoli, sottotitoli, contenuti e così via; e tre, utilizzando una vista semantica in cui viene applicato solo un leggero peso ai tag di intestazione nell'indice in base alla sua posizione nella gerarchia h1-6. Dal modello DOM, otterrai cose come il tag del titolo, il meta-tag di descrizione e così via che mancherebbero nelle altre due viste. Tuttavia, la vista DOM fa poco per ponderare i tuoi contenuti. La sua funzione principale è capire la tua pagina, dove si trova la tua navigazione, dove si trovano intestazione e piè di pagina, dove iniziano e finiscono i tuoi contenuti, ecc.

Ciò a cui devi davvero prestare attenzione è solo il testo e le viste semantiche. La vista semantica deriva principalmente dalla vista solo testo, tuttavia porta con sé varie linguistiche, psicosemantiche, semaniti e altre analisi dei tuoi contenuti.

Non descriverò di nuovo la semantica, ma ti indicherò una risposta che ho scritto qualche tempo fa che è un mini tutorial sull'argomento: Perché un sito Web con riempimento di parole chiave si posizionerebbe più in alto di uno senza nei risultati di ricerca di Google?

Poiché il web è basato sulla pagina stampata e i parser dei primi tempi hanno seguito queste tradizioni e sono rimasti sostanzialmente invariati, è impossibile sfuggirle. Ecco una risposta che spiega l'ordine di lettura del titolo che rimane la migliore strategia basata sul modello del parser: Migliora il posizionamento di Google per parole chiave generiche o specifiche

Mentre ammetterò che potrebbe esserci un po 'di effetto spostare i tag header, chiedo: è una cosa saggia da fare? Diavolo, no! Il modo in cui le cose vengono ponderate oggi potrebbe non essere il modo in cui vengono ponderate domani. Seguire un formato tradizionale assicura risultati prevedibili in cui un semplice cambiamento nella ponderazione può far girare il tuo sito in una coda.

Ecco una prospettiva su come funziona: Vantaggi del nome di dominio in SEO Ignora il titolo, salta la cima della risposta e arriva alla prospettiva dei programmatori.

Se leggi queste tre risposte, puoi facilmente capire gli effetti del tag header. È molto possibile rovinare le prestazioni della tua pagina / dei siti diventando carino con il modo in cui li organizzi. Anche seguendo la tradizione, puoi annullare il tag del titolo e il tag h1 in modo estremamente rapido ottimizzando alcuni tag dell'intestazione più bassi. Un attento equilibrio è la chiave.

Infine, ti avvertirò di tutti questi consigli SEO online di persone che non sono ingegneri. È una racchetta per fare soldi e lottare per la tua attenzione. Come funzionano i motori di ricerca non è un segreto. È là fuori se sai dove cercare. Quasi tutti gli esperti SEO non sono affatto esperti in quanto non possono dirti gli interni di come viene messa insieme la tecnologia di ricerca. A parte essere un ingegnere per Google o Bing, non potremo mai sapere esattamente come funzionano questi motori di ricerca. Fortunatamente, Google ci ha detto abbastanza (e in realtà ci hanno detto quasi tutto ciò che dobbiamo sapere- e no, non è venuto da un ragazzo di nome Matt) che se conosci la scienza e le tecnologie, una serie abbastanza ragionevole di ipotesi può essere fatto. Dal mio punto di vista, la maggior parte dei SEO ha più torto che ragione, mentre alcuni hanno un tasso di successo molto più alto della media.

Quanto segue è dal punto di vista della specifica HTML5, basata sul presupposto che i consumatori (come i motori di ricerca) si aspetteranno e lavoreranno con quanto specificato negli standard HTML. Nella pratica attuale, tali dettagli di markup probabilmente non contano molto per la SEO, ma possono essere importanti per altri consumatori e accessibilità.

Userò le intestazioni del rango appropriato, poiché questo è ciò che HTML5 incoraggia , ma è anche possibile usarlo h1ovunque (se usi sempre gli elementi di contenuto della sezione dove appropriato).

Non è possibile "applicare" intestazioni headero footerelementi, poiché non sono contenuti in sezione (possono contenere solo intestazioni, ma questa intestazione non sarebbe limitata all'ambito di header/ footer).

Ciascun elemento contenuto sezionamento ( section, article, nav, aside) e ciascun elemento radice sezionamento ( body, blockquoteecc) possono avere un titolo applicato.

Questi elementi di contenuto / radice di sezionamento e gli elementi di intestazione h1- h6sono gli unici elementi che contano per la struttura del documento .

Mentre ogni sezione "desidera" un'intestazione, non è necessario fornirne una (in tal caso, ottiene un'intestazione "implicita" e senza titolo). Mentre è spesso utile fornirne uno, ci sono casi in cui non è davvero necessario. Ad esempio, se hai una sola navigazione, navsarebbe sufficiente avere un senza titolo. Ma se il tuo sito avrebbe più navigazioni, potrebbe avere senso usare intestazioni che spiegano i diversi scopi.

Nel tuo approccio 1, questa bodyè una sezione senza titolo (ma questo è solo il caso perché navappare prima del primo elemento di intestazione; altrimenti questa h1sarebbe l'intestazione per l'intero documento).
Non penso che avere una bodysezione senza titolo sia una buona scelta. È la prima voce nella struttura e, idealmente (ma non necessariamente), tutto ciò che segue rientra nell'ambito di questa voce.

Per un tipico sito Web che ha una navigazione globale, ha senso ( spiegazione più lunga ) utilizzare il nome del sito per l' bodyintestazione della sezione, poiché la navigazione globale appartiene all'intero sito , non solo al documento corrente:

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

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

</body>

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

Il contenuto principale di questo documento dovrebbe anche rientrare nell'ambito del sito, poiché il sito è il contesto del contenuto principale di questo documento, ovvero fa parte del tuo sito:

<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 hai più sezioni del contenuto principale, ad esempio un elenco di post di blog, spesso ha senso usare un file sectionche contenga tutti questi article, invece di avere articlecome figli diretti di 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 disponi di un piè di pagina a livello di sito che è così complesso da richiedere elementi di sezionamento, dovrebbe essere di nuovo allo stesso livello navdel contenuto principale e (poiché appartiene al sito, non al contenuto principale):

<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
-->

(In tutti questi esempi la navigazione precede il contenuto principale, ma spesso ha senso avere prima il contenuto principale. Lo scambio di questi è possibile. Dovresti solo assicurarti che il h1nome del sito venga prima di qualsiasi altra sezione / titolo.)