Sto cercando di utilizzare i <h1>tag sul mio blog per il titolo del post e ho riscontrato un problema. Il titolo è hyperlinked.

Caso 1:

<h1> <a href=""> xyz </a> </h1>

caso 2:

<a href=""> <h1> xyz</h1> </a> 

Qual è il migliore in termini di SEO?

Se stai usando HTML5 , scegline uno; sono equivalenti.
HTML5 consente collegamenti a livello di blocco , ma nel tuo caso non esiste un motivo particolare per farlo, poiché esiste un solo elemento a livello di blocco. Personalmente, non lo farei qui, perché avere il <h1>tag all'esterno renderebbe più semplice la scansione del codice sorgente.

Nient'altro (XHTML, HTML4, ecc.) E il secondo è semplicemente sbagliato. Non sarebbe un codice valido e, a un certo livello, è un male per l'ottimizzazione della ricerca [Inserire una dichiarazione di non responsabilità standard su quanto ogni singola infrazione influisce davvero su qualcosa, ecc.].

Sono gli stessi per quanto riguarda la SEO. (Di solito gli elementi a livello di blocco contengono elementi inline e non viceversa, quindi dovresti usare il primo esempio ma non influirà sul SEO).

Sono entrambi corretti in HTML5 , HTML consente elementi di blocco in elementi incorporati. Anche questo non ha alcun effetto sul SEO, in entrambi i casi il testo è racchiuso nell'intestazione, quindi rimane lo stesso valore.

Non è una scelta di validità, ma una preferenza nell'interfaccia utente:

• Se avvolgi l'intestazione attorno all'ancora, crei un'ancora grande, sarà possibile fare clic solo sul testo.
• Quando avvolgi l'ancora attorno all'intestazione, l'intera riga diventa selezionabile.

Ti ho fatto un esempio su jsFiddle.net

Trovo che con il caso 2 l' hrefinserto sia spesso fuori linea rispetto al resto della mia pagina. Ma quello potrebbe essere il modo in cui ho fissato i miei margini nel mio .css. Pertanto preferirei il caso 1.

Ciò che è detto qui è perspicace, grazie a tutti. Prendiamo ancora un altro livello: aggiungere microdati e simili nell'equazione.

Diciamo che abbiamo

<h1 itemprop="name"><a href="http://goldenage.com/maths.html"
itemprop="url">Mathematics in The Muslim Golden Age</a></h1>

in competizione con

<a href="http://goldenage.com/maths.html" itemprop="url"><h1
itemprop="name">Mathematics in The Muslim Golden Age</h1></a>

Per me, "indipendentemente dalle prestazioni", l'esempio 2 ha più senso. Perché il collegamento non fa mai parte del nome. La differenza si riduce alla differenza tra innerHTML e textContent, DOMwise. Guardandolo attraverso innerHTML, l'ancora si intromette. Se textContent fosse la soluzione, i tag verrebbero rimossi. Questo pone anche la domanda: innerHTML o textContent.

Quindi direi, tenendo conto dei microdati, avere l'ancoraggio all'esterno è più puro.

basato su: http://thenewcode.com/617/How-To-Add-Microdata-To-Your-Blog

<h1> <a href=""> xyz </a> </h1> Questo esempio è corretto.

I collegamenti a livello di blocco dovrebbero essere evitati a fini SEO - dalla bocca del cavallo: https://www.seroundtable.com/block-level-links-google-seo-16369.html

Aggiornamento: Takeaways dal link ...

Avere uno dei costrutti di collegamento, come altri hanno già detto, va bene per il collegamento. Tuttavia, ai fini SEO, dovresti mantenere pulito il testo dell'ancora in modo che Google possa interpretare meglio l'ancora e assegnare la pertinenza appropriata.

John Mueller (Webmaster Trends Analyst presso Google) continua dicendo ...

Questo utilizzo andrebbe bene con noi (Google): continueremmo a prendere il link e saremmo in grado di associare il tuo testo come ancoraggio a quello. Siamo abbastanza flessibili con l'analisi dell'HTML, quindi probabilmente potresti persino usarlo con HTML4. Detto questo, più chiaro renderai il tuo testo di ancoraggio, più facile sarà per noi capire il contesto del collegamento, quindi non necessariamente utilizzerei sempre un intero paragrafo come ancoraggio per tutti i tuoi collegamenti interni.

TL; DR Per SEO, non utilizzare il collegamento a livello di blocco.

Se lo scopo è di avere ulteriori elementi cliccabili all'interno del link (come un'immagine ecc.) E comunque validare con html <5, puoi averlo in entrambi i modi con javascript:

<div onclick="if (this.getElementsByTagName('a')[0]) location=this.getElementsByTagName('a')[0].href;">
<img src="/foo" alt="" />
<h1>
<a href="#">
linked-heading
</a>
</h1>
</div>

altrimenti, semplicemente:

<h1 onclick="if (this.getElementsByTagName('a')[0]) location=this.getElementsByTagName('a')[0].href;">
<a href="#">
linked-heading
</a>
</h1>

aggiungi cursor:pointeral css dell'elemento genitore per completare il trucco.