Etiqueta de anclaje dentro de <h1> o <h1> dentro de etiqueta de anclaje: ¿cuál es mejor?

52

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?

Sangram
fuente

Respuestas:

57

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

Su '
fuente
Tengo una pregunta: <h1> hola <h1> // 5 caracteres <h1> <a> hola </a> </h1> // ¿5 caracteres o google lo lee como 12 caracteres?
hfarazm
11

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

John Conde
fuente
3
En realidad, los elementos en línea no deben contener elementos de bloque según la especificación HTML.
DisgruntledGoat
3
@DisgruntledGoat No del todo. Doctype debe tenerse en cuenta.
Su '
@Su '¿qué doctypes permiten elementos de bloque dentro de elementos en línea?
DisgruntledGoat
44
@DisgruntledGoat HTML5 permite enlaces (anteriormente solo elementos en línea) para rodear elementos de bloque como encabezados y etiquetas de párrafo. Aquí es donde doctype es importante. Si está utilizando HTML5, utilice el patrón <a><h1></h1></a>. De lo contrario, use el patrón tradicional de <h1><a></a></h1>. Google prestará atención a ambos métodos por igual, pero algunos navegadores pueden no funcionar bien con el patrón no estándar A MENOS QUE tenga el doctype correcto (HTML5).
Tina Bell Vance
así que lo anterior también se aplicará a las etiquetas de anclaje con nombre. no es asi es bueno tener <h1> <a name='intro'> Introducción </a> </h1> que no sea <a name='intro'> <h1> Introducción </h1> </a>.
Jayapal Chandran
6

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

Martijn
fuente
4

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.

Guy Thomas
fuente
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

Sjerp van Wouden
fuente
0

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

rakonda
fuente
3
ambos son correctos en HTML5
Simon Hayter
0

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.

Sumadores
fuente
Con la esperanza de que actualice su respuesta, muestra, en parte, por qué ambos ejemplos NO son equivalentes como otros han dicho.
Rob
-1

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.

Lucian Davidescu
fuente
1
JavaScript en línea? ¿Estamos de vuelta en 1999? ;)
Martijn
¿Por qué harías esto? Simplemente envuelva el encabezado en el ancla. Esto es una mala práctica
Martijn
Lea el comentario cuidadosamente, encontrará su respuesta escrita allí;) Html 4.01 en realidad es tan antiguo como 1999. Cuando intente validar su sugerencia bajo ese doctype, obtendrá el siguiente error: "[D] tipo de documento sí no permitir el elemento "H1" aquí (...) Una posible causa de este mensaje es que ha intentado colocar un elemento de nivel de bloque (como "<p>" o "<table>") dentro de un elemento en línea ( como "<a>", "<span>" o "<font>") ". Por supuesto, uno no tiene que preocuparse absolutamente por lo que dicen los validadores, de ahí el "si" al comienzo del comentario.
Lucian Davidescu