Uso corretto di <title>, <header>, <h1> e <h2> in un sito Web HTML5?

15

Ho studiato questo argomento per diversi giorni e ho trovato molti suggerimenti contrastanti per quanto riguarda l'indicizzazione della ricerca. Sto lavorando a un progetto che ha molte pagine diverse che vanno dalle semplici descrizioni dei prodotti alla documentazione utente approfondita.

Ho suddiviso questa domanda in sezioni poiché ritengo che ciò lo renderà più utile per i futuri lettori di questa domanda.

Alcune delle mie scoperte

Diversi siti Web sembrano aver assunto contorni di documenti come i seguenti:

1. Programmer's Guide  (https://www.dartlang.org/docs/)
    1. Getting Started
    2. Concepts
        1. Libraries
        2. Fundamental classes
        etc.

Trovo interessante che l'esempio sopra non utilizzi l' <nav>elemento con un'intestazione adatta. Mi piace la semplicità del contorno ed essendo Google sono abbastanza certo che sanno cosa stanno facendo quando si tratta di questo.

Ma sono confuso poiché lo schema sopra non menziona "Dart". L'unica menzione di "Dart" in senso semantico sembra essere all'interno <title>dell'elemento principale del documento "Guida del programmatore | Dart: app Web strutturate".

La MDN (Mozilla Developer Network) è un altro brillante esempio di un sito Web che segue questo principio. Molti <h1>titoli forniscono un contesto completo ( sezioni e contorni di un documento HTML5 ):

1. Sections and Outlines of an HTML5 Document
    1. Untitled Section (nav)
    2. Untitled Section (nav)
    3. Structure of a Document in HTML 4
    4. Problems Solved by HTML5

Mentre altri non hanno molto senso fuori dal contesto ( pratiche obsolete da evitare ). Ad esempio, la seguente struttura HTML5 si riferisce a CSS, HTML5 o C # ... con solo la struttura del documento da seguire, chissà!

1. Obsolete practices to avoid
    1. Untitled Section (nav)
    2. Untitled Section (nav)
    3. Doctype
    4. <meta> element and charset attribute

A peggiorare le cose, cosa succederebbe se l'MDN contenesse 2 argomenti con lo stesso (o molto simile) titolo "Pratiche obsolete da evitare" dove uno fa parte della loro guida CSS e l'altro fa parte della loro guida HTML ...

All'altra estremità dello spettro i siti Web sembrano utilizzare l' <body>intestazione principale per il nome del prodotto (Foo) o il contenitore dell'argomento (Guida dell'utente per Foo). Dove tutte le pagine successive vengono quindi utilizzate <h2>per il titolo della pagina effettiva.

La domanda

In che modo i motori di ricerca deducono il contesto di una pagina Web come quelli trovati sul sito Web MDN utilizzando il profilo DOM e HTML5?

Qual è il modo giusto per contrassegnare la seguente pagina HTML5 in modo che Google possa indicizzare la pagina nel contesto adatto? Questo include l'utilizzo di <title>, <header>e <h1>gli elementi.

  • Nome della ditta
  • nome del prodotto
  • Guida utente
  • Iniziare

L'intestazione più significativa nell'HTML che viene visualizzata in un browser Web, dovrebbe rappresentare il contesto dell'intero sito Web (Nome azienda o Nome prodotto), la raccolta di argomenti (Guida per l'utente) o l'argomento attuale in mano (Guida introduttiva) ?

La mia ipotesi migliore

<!DOCTYPE html>
<html>
<head>
    <title>Getting Started | User Guide | Product Name - Company Name</title>
</head>
<body>
    <header role="banner"> <!-- Note: Lack of <h1> in here -->
        <a id="logo" href="http://example.com">Company Name</a>
        <nav>
            <h1>Site Navigation</h1>
            <ul> ... </ul>
        </nav>
    </header>
    <main role="main">
        <div class="product-name">Product Name</div>
        <div class="document">User Guide</div>

        <h1>Getting Started</h1>

        <p>blah</p>
    </main>
</body>
</html>

Portando al contorno:

1. Getting Started
seo  html  google-search  html5  semantic-web 
— Lea Hayes
fonte
Ti capisco correttamente che stai cercando documentazione se e come i motori di ricerca utilizzano la struttura? (e non per consigli quale markup utilizzare, non correlato a SEO)
— unor
@unor Voglio imparare perché la tecnica utilizzata nella documentazione MDN / Dart funziona e se mi manca qualche conoscenza chiave. Sembrano fare affidamento <title>per fornire un contesto. Ad esempio, è una cattiva idea includere lo stesso <h1>User Guide for Ubermachine</h1>in ogni pagina in cui viene presentata l'intestazione dell'argomento <h2>Getting Started</h2>... o dovrebbe iniziare il contorno <h1>Getting Started</h1>con un accompagnamento <title>Getting Started | User Guide for Ubermachine</title>per fornire un contesto utile per i motori di ricerca. Questa è una domanda SEO.
— Lea Hayes,
Se ci fossero 2 prodotti separati, è molto probabile che ci siano 2 guide utente contenenti il ​​proprio argomento "Guida introduttiva". Da qui parte della mia preoccupazione per l'approccio MDN e perché voglio sapere se <title>fornisce abbastanza contesto.
— Lea Hayes,
2
Non mi preoccuperei dei motori di ricerca. Se stai pensando a questo livello, il resto del tuo sito sarà probabilmente tecnicamente buono e abbastanza buono per i motori di ricerca. Pensa invece ai tuoi utenti.
— John Mueller,
1
Non hai menzionato l'URL. Questo è anche un meccanismo importante per la cordialità umana e robotica. Ad esempio, mentre i tuoi due esempi di MDN <h1> sono incoerenti. contesto, entrambi i loro URL includono / web / guide / html / prima del titolo della pagina.
— Martin F

Risposte:

8

Durante le mie ampie ricerche sul web ho trovato una citazione che trovo utile e sospetto che anche i futuri lettori di questa domanda lo faranno.

Utilizzare <h1>per intestazione di livello superiore

<h1> è l'elemento HTML per l'intestazione di primo livello di un documento:

  • Se il documento è sostanzialmente autonomo, ad esempio Cose da vedere e da fare a Ginevra, l'intestazione di livello superiore è probabilmente la stessa del titolo.
  • Se fa parte di una raccolta, ad esempio una sezione su Cani in una raccolta di pagine sugli animali domestici, l'intestazione di livello superiore dovrebbe assumere una certa quantità di contesto; basta scrivere <h1>Dogs</h1>mentre il titolo dovrebbe funzionare in qualsiasi contesto: Dogs - Your Guide to Pets.

Fonte originale: http://www.w3.org/QA/Tips/Use_h1_for_Title

La citazione precedente sembra suggerire che l' <h1>elemento a livello di documento possa assumere che il contesto della pagina corrente sia definito usando lo <title>stesso. Quindi presumibilmente se ci fossero più pagine con lo stesso identico, <h1>allora andrebbe bene ...

<title>Getting Started | Guide | Uber Product - Company Name</title>
<h1>Getting Started</h1>

<title>Getting Started | Guide | Other Uber Product - Company Name</title>
<h1>Getting Started</h1>

Vedi anche : <title>: l'elemento più importante di una pagina Web di qualità

Prima di accettare una risposta, vorrei aspettare e vedere cosa pensano gli altri.

— Lea Hayes
fonte
Nizza aggiornamenti delle domande e risposta di follow-up. Forse altri vi entreranno, se non accetteranno la vostra risposta se pensate che sia quella giusta.
— dan
1

Discuterei l'uso di un H1 o qualsiasi livello di intestazione per il "Nome prodotto" nell'intestazione.
H1 rappresenta il titolo della pagina e non il prodotto, l'applicazione o il sito.
Sia per motivi di accessibilità che di SEO, un ripetuto H1 su ogni pagina sarebbe dannoso. Sfortunatamente in questo caso non esiste un tag HTML semantico che significhi "titolo del sito", quindi l'unica opzione è un <div>o <p>o forse un <strong>tag per dargli un accento semantico.

<main>
  <header>
    <div>Logo</div>
    <div>Product name</div>
    <nav>
      <ul> ... </ul>
    </nav>
  </header>
  <section>
    <h1>Getting started</h1>
    ...content
  </section>
</main>
— davidelrizzo
fonte
0

Non c'è una risposta giusta, ci sono diverse opzioni.

Di seguito sono riportate alcune opzioni, ma tutte presentano vantaggi e svantaggi:

Questa opzione è più o meno quella che hai presentato, ma mostra un po 'più di titoli e dove il contenuto andrebbe, oltre all'idea che il logo sarebbe un elemento più complesso di solo l'immagine / testo, avrebbe tutti i relativi elementi per fare colpo come personalità dell'azienda, ecco perché la sezione. Ancora. non potrebbe essere una sezione, ma solo un div.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <section>
            <a id="logo" href="http://example.com">Company Name</a>
        </section>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product Name</h1>
            </header>
            <p>...</p>
            <header>
                <h1>User Guide</h1>
                <p>...</p>
            </header>
            <p>...</p>
        </main>
    </body>
</html>

Il prossimo introduce il tag principale per mostrare qual è la parte rilevante della pagina. Questo tag è ancora impreciso sul supporto e sul futuro, ma fornisce una chiara indicazione che la navigazione non ha nulla a che fare con il prodotto o la pagina. Il tag della sezione potrebbe essere un altro contenitore e main potrebbe essere l'articolo per alcune persone.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <section>
            <a id="logo" href="http://example.com">Company Name</a>
        </section>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product Name</h1>
            </header>
            <section>
                <header>
                    <h1>User Guide</h1>
                    <p>...</p>
                </header>
                <p>...</p>
            </section>
        </main>
    </body>
</html>

Il prossimo usa l'articolo poiché la maggior parte delle persone è incline a usarlo.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <article>
            <a id="logo" href="http://example.com">Company Name</a>
            <nav>
                <ul> ... </ul>
            </nav>
            <main>
                <header>
                    <h1>Product Name</h1>
                </header>
                <section>
                    <header>
                        <h1>User Guide</h1>
                        <p>...</p>
                    </header>
                    <p>...</p>
                </section>
            </main>
        </article>
    </body>
</html>

Vorrei usare qualcosa di simile al prossimo, poiché sono molto modulare e orientato ai blocchi, quindi ogni elemento sarebbe indipendente da una prospettiva del database correlata solo da chiavi pertinenti. Anche se molto probabilmente salterei i tag di sezione.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product name</h1>
            </header>
            <section>
                <header>
                    <h1>description of product</h1>
                </header>
                <p>...</p>
            </section>
            <section>
                <header>
                    <h1>user guide</h1>
                </header>
                <p>...</p>
            </section>
            <section>
                <header>
                    <h1>Getting started</h1>
                </header>
                <p>...</p>
            </section>
        </main>

    </body>
</html>

e ancora, ci sono più opzioni.

— PatomaS
fonte
2
Mi sembrano tutti troppo complicati.
— Martin F
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.