Estoy tratando de usar <h1>etiquetas en mi blog para el título de la publicación y encontré un problema. El título está hipervinculado.

Caso 1:

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

caso 2:

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

¿Cuál es mejor en términos de SEO?

Si está utilizando HTML5 , simplemente elija uno; son equivalentes
HTML5 permite enlaces a nivel de bloque , pero en su caso no hay una razón particular para hacerlo, ya que solo hay un elemento a nivel de bloque. Personalmente, no lo haría aquí, porque tener la <h1>etiqueta en el exterior facilitaría la exploración en el código fuente.

Cualquier otra cosa (XHTML, HTML4, etc.) y la segunda es simplemente errónea. No sería un código válido, y en algún nivel es malo para la optimización de su búsqueda [Inserte un descargo de responsabilidad estándar sobre cuánto afecta realmente cualquier delito, etc.].

Son lo mismo en lo que respecta al SEO. (Por lo general, los elementos de nivel de bloque contienen elementos en línea y no al revés, por lo que debe usar el primer ejemplo, pero no afectará al SEO).

Ambos son correctos en html5 , html permite elementos de bloque en elementos en línea. Esto tampoco tiene ningún efecto en SEO, en ambos casos el texto está envuelto en el encabezado, por lo que sigue teniendo el mismo valor.

No es una opción de validez, sino una preferencia en la interfaz de usuario:

• Si ajusta el encabezado alrededor del ancla, crea un ancla grande, solo se podrá hacer clic en el texto.
• Cuando envuelve el ancla alrededor del encabezado, se puede hacer clic en toda la línea.

Te he hecho un ejemplo en jsFiddle.net

Me parece que con el caso 2, la hrefinserción a menudo está fuera de línea con el resto de mi página. Pero esa podría ser la forma en que establezco mis márgenes en mi .css. Por lo tanto, estaría a favor del caso 1.

Lo que se dice aquí es perspicaz, gracias a todos. Tomemos una muesca más: agregar microdatos y demás a la ecuación.

Digamos que tenemos

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

compitiendo con

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

Para mí, "independientemente del rendimiento", el ejemplo 2 tiene más sentido. Porque el enlace nunca es parte del nombre. La diferencia se reduce a la diferencia entre innerHTML y textContent, DOMwise. Mirándolo a través de innerHTML, el ancla se interpone en el camino. Si textContent fuera el camino, las etiquetas se eliminarían. Eso también plantea la pregunta: innerHTML o textContent.

Entonces diría, teniendo en cuenta los microdatos, tener el ancla en el exterior es más puro.

basado en: http://thenewcode.com/617/How-To-Add-Microdata-To-Your-Blog

<h1> <a href=""> xyz </a> </h1> Este ejemplo es correcto.

Los enlaces a nivel de bloque deben evitarse para fines de SEO: desde la boca del caballo: https://www.seroundtable.com/block-level-links-google-seo-16369.html

Actualización: conclusiones del enlace ...

Tener una construcción de enlace, como han dicho otros, está bien para unir. Sin embargo, para fines de SEO, debe mantener limpio el texto del ancla para que Google pueda interpretar mejor el ancla y asignar la relevancia adecuada.

John Mueller (Webmaster Trends Analyst en Google) continúa diciendo ...

Ese uso estaría bien con nosotros (Google): aún así recogeríamos el enlace y podríamos asociar su texto como un ancla con eso. Somos bastante flexibles con el análisis de HTML, por lo que probablemente incluso podría usar esto con HTML4. Dicho esto, cuanto más claro sea su texto de anclaje, más fácil será para nosotros entender el contexto del enlace, por lo que no siempre usaría necesariamente un párrafo completo como el ancla para todos sus enlaces internos.

TL; DR Para SEO, no use el enlace de nivel de bloque.

Si el propósito es tener elementos adicionales en los que se pueda hacer clic dentro del enlace (como una imagen, etc.) y aún validar con html <5, puede tenerlo en ambos sentidos 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>

de lo contrario, simplemente:

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

agregue cursor:pointeral elemento principal css para completar el truco.