È prassi comune per gli sviluppatori front-end inserire il titolo o il logo del sito Web nel tag H1 e il titolo in H2. Ma il più delle volte il titolo della pagina / articolo è più importante perché porta il valore del contenuto. Quindi la mia domanda è qual è l'approccio migliore dal punto di vista semantico e SEO. Esempi:
Altre varianti fornite se si ritiene che avranno un effetto maggiore.
Risposte:
Di solito non inserisco il logo o il titolo del sito in un H1. Il modo in cui mi piace guardarlo è che ogni pagina è un documento. Tale documento riguarda un argomento particolare, come indicato nel titolo della pagina e anche nell'intestazione principale. Il sito Web stesso è solo l'editore del documento. Quindi, semanticamente, non è corretto utilizzare il logo o il nome del sito come intestazione principale di ogni pagina. I loghi vengono visualizzati in modo prominente per ricordare all'utente dove si trovano e per scopi di branding, ma in realtà non fanno parte del contenuto o del documento.
Voglio dire, quando guardi una notizia potresti vedere un piccolo logo del canale di notizie nell'angolo, ma la notizia non si chiamerà "CNN" o "BBC News". Il titolo riguarderà la storia, non la rete che pubblica la storia. Allo stesso modo, quando leggi una rivista, nell'intestazione viene utilizzato solo il titolo dell'articolo, non il nome della pubblicazione.
È anche semanticamente errato utilizzare un tag H1 per il nome del logo / del sito e uno per il titolo del documento. I titoli definiscono la struttura gerarchica del contenuto della pagina; usarne uno per il nome del sito e un altro per il titolo del documento è come dire, questa pagina ha 2 sezioni principali: "mydomain.com" e "contattaci".
h1, ma solo sulla sua pagina principale . Vai a un elenco specifico e il titolo dell'elenco è ora in h1.
Vedi pagina 37 del documento SEO Report Card di Google :
La maggior parte delle pagine principali del prodotto ha l'opportunità di utilizzare un
<h1>tag, come nell'esempio sopra, ma attualmente utilizza solo altri tag di intestazione (<h3>in questo caso) o stili di carattere più grandi. Mentre lo stile del tuo testo in modo che appaia più grande potrebbe ottenere la stessa presentazione visiva, non fornisce al motore di ricerca lo stesso significato semantico di un<h1>tag. Il nome del prodotto e / o alcune parole sulle sue caratteristiche sono fantastici da avere in un<h1>tag per la pagina principale del prodotto.
Secondo l'analisi di Google delle sue offerte, arriverei alla conclusione che Google si aspetta che un valore univoco specifico per pagina appaia in un H1 (l'illustrazione nel documento collegato lo illustra).
Ecco una buona logica: il tuo logo è un'immagine, non un <h1>
Semanticamente, <h1>dovrebbe essere usato per il titolo della pagina e il titolo della pagina dovrebbe essere unico per pagina. Il tuo logo o il nome del sito non è il titolo della pagina (a parte forse la home page).
Il nome del tuo logo / sito dovrebbe essere in un div div, forse con ID di "titolo". Oppure, il <header>tag se si utilizza HTML5.
<img>tag, può essere uno sfondo, ma non uno sfondo di un <h1>tag. Tuttavia, come sostiene l'articolo collegato, il tuo logo può essere visto come contenuto della pagina.
IMO dovrebbe esserci solo un H1 nella pagina. E l'H1 dovrebbe sempre essere prima dell'H2 - per mantenere una corretta gerarchia dei tuoi contenuti.
Il logo viene spesso ripetuto su ogni pagina e, come dici tu, sulla maggior parte delle pagine il titolo è quasi sempre più importante.
Nella home page prenderei in considerazione l'utilizzo di:
logo / titolo - H1 [, titolo - H2]
Sebbene sulla tua homepage il logo potrebbe essere il tuo titolo.
Tuttavia, su tutte le pagine successive vorrei scegliere:
logo - altro tag, titolo - H1
Anche se il logo è un'immagine di sfondo, se appropriato.
Quello che stai veramente cercando nel tuo tag H1 è il titolo della pagina o ciò che rende unica questa pagina. Se stai usando un'immagine al suo interno, devi farlo con un metodo di fallback per la degradabilità:
<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>
<h1><span>Unique Page Title</span></h1>
In questo modo puoi impostare un'immagine da mostrare per l'H1 (che le persone usano spesso come area del logo) e avere comunque un buon contenuto al suo interno per le persone che usano esperienze Internet degradate. Rende anche felice il tuo valore SEO.
Questa è una domanda formidabile, a causa delle pratiche (e dei modelli) disponibili.
Personalmente, mi piace fare riferimento alla logica "Delineare 101", considerando quanto segue:
H1 è come un titolo (sicuramente ti piace integrare il tuo titolo HTML) e dovrebbe essercene solo uno per pagina, così come una pagina ha un solo titolo
H2 è un po 'come i numeri romani nel contorno: I., II., III., Ecc.
H3 sarebbe l'equivalente di contorno di A., B., C.
Spesso, l'uso pratico di questa logica è difficile da applicare esattamente su una pagina Web: ci sono così tante parti accidentali di informazioni che semplicemente non rientrano in quella gerarchia. Tuttavia, se ti siedi e cerchi di abbatterlo con quella logica, sento che c'è un beneficio per la disciplina.
Sono h1per il ragazzo del titolo principale. E il titolo principale è il nome del sito decorato, o come lo chiami, il logo. Ecco il punto: nell'intestazione del sito Web, il logo non è in realtà un logo, è l'intestazione del sito illustrata. Ai designer piace solo progettarlo come logo.
Cosa c'è che non va in LOGO -> H1?
<div>Google</div>
<h1>About Us</h1>
Ora, poiché h1è la sezione più importante in quanto indica al visitatore di cosa si tratta, il visitatore non può capire la pagina, perché h1è troppo specifica. Riguardo chi?
<h1>Google</h1>
<h2>About Us</h2>
Questa pagina riguarda Google. Ecco la sezione su di noi. Vedi - non c'è dubbio? È tutto pulito.
Struttura della pagina. Se inserisci l'intestazione principale del sito in div o p, non c'è nulla a cui associarlo.
<p>Google</p>
<h1>About us</h1>
Come posso associare "About U" a Google se h1viene dopo? Perché tutto ciò che viene DOPO H1è associato ad esso, non ciò che diventa prima.
<h1>Google</h1>
<h2>About Us</h2>
"Chi siamo" appartiene a Google. Niente domande.
HTML è un linguaggio per DESCRIVERE le informazioni. Pertanto non visualizzi le informazioni, le descrivi. E ogni pagina è indipendente. Quindi descrivi una pagina perché non ci sono associazioni tra le pagine. Solo collegamenti che collegano singole pagine.
<p>Google</p>
<h1>About us</h1>
QUESTA pagina è Chi siamo. Chi / che cos'è? Poco chiaro. Descrive semplicemente qualcosa chiamato "Chi siamo".
<h1>Google</h1>
<h2>About Us</h2>
Questo sito descrive google. E c'è una sezione Chi siamo. Us = molto probabilmente google, perché la struttura lo descrive in questo modo.
Spero di aver fatto il punto :)
PS! Non puoi usare h2- h1- h3dato che è illogico, quindi un grosso fallimento. Solo perché w3c non ha detto che non è permesso, non lo rende valido. È illogico, pensaci.
Logo come tag h2?
Stavo solo visitando SitePoint (www.sitepoint.com) che è un blog WordPress con un mix di pagine e blog regolari. In generale, ho scoperto che hanno il titolo della pagina come tag h1 e il logo impostato come h2. Puoi vederlo su una pagina del blog come www.blogs.sitepoint.com/category/design/. Girando per il sito trovi diverse configurazioni. Spesso non sono riuscito a trovare il tag h1, ad esempio nella pagina principale del prodotto (http://products.sitepoint.com/). Sebbene da quella pagina, se si fa clic su un particolare prodotto per maggiori informazioni www.sitepoint.com/books/design2/, si riscontra nuovamente che h1 è il titolo della pagina, h2 è il logo. Una tipica pagina Web è simile al blog (vedere www.sitepoint.com/help/). In questo caso gli argomenti delle FAQ sono tutti tag h2.
Tom Rogers
Non è necessario che il tuo logo sia nidificato in un'intestazione: headerè sufficiente una semplice immagine collegata in . Ma dovrebbero essere sia il titolo del sito che il titolo della pagina / articolo <h1>. Questo articolo è informativo: la verità su più tag H1 nell'era HTML5 .