¿Es una mala práctica para SEO usar <i> en elementos de encabezado?

11

Para hacer un sitio web fácil de usar, tengo que usar algunas de las fuentes Font Awesome en <h>elementos como este:

<h2>
<i style="color: rgb(102, 149, 45); vertical-align: inherit;" class="fa fa-gear"></i>
 Performance
</h2>

De hecho, este es un artículo de revisión. ¿Está bien para poner estas fuentes (o <i>elementos) en el código HTML interno de elementos de la cabecera como <h1>, <h2>, <h3>, etc.?

Proporcione su fuente o alguna documentación también, porque es realmente importante para mí; No quiero cometer ningún error sobre este tema.

seo html heading Amirreza Nasiri
fuente
3
Mejor usar <span>para FontAwesome, su tonto uso de <i>Using <h2><span class="fa fa-gear"> </span></h2>funcionará igual de bien.
Simon Hayter

Respuestas:

11

Yo diría que no dañaría mucho, ni agregará nada. Prefiero mantener limpias mis etiquetas de encabezado y no agregaría el i. El estilo en línea sería un problema mayor, que no es realmente un gran problema.

En lugar de hacer esto, puede agregar el ícono de ajustes al H2 directamente:

h2.Geared:before{
    display: inline-block;
    color: rgb(102, 149, 45); 
    font-family: "FontAwesome";
    content: "\f013"; /*The actual character FontAwesome uses */
}

<h2 class="Geared">This text will have the gear</h2>
Martijn
fuente
3
El usuario realmente debería usar CSS y no hinchar su HTML. Si bien el diseño de una etiqueta de encabezado no causará angustia, sí lo hará HTML hinchado.
closetnoc
1
No estoy de acuerdo en algún grado. Debido a que ambos han pasado por alto el hecho de que simplemente disminuyen el HTML pero luego aumentan el CSS, de hecho, aumentan más que disminuyen. Si lo hace para consumir muchos menos bytes, use SASS y use una línea singular en el CSS de la siguiente manera: .h2.geared:before, .fa-gear:before,.fa-cog:before{content:"\f013"}Además, no habría nada de malo en usar <h2>Title <span class="fa fa-gear"> <span></h2>totalmente válido y no dañará el SEO en lo más mínimo.
Simon Hayter
Aunque el nombre de clase se elige mal, puede cambiar fácilmente el engranaje a otro icono sin cambiar todo su CSS. Puede cambiar la apariencia con css, que lo colocaría en una hoja de estilo. Pero estoy de acuerdo con tu sugerencia, tampoco están mal IMO.
Martijn
Sugerir que html y css pueden reducirse usando sass es absurdo. Sass se expande a css, por lo que no ahorra ancho de banda, solo escribe. Eso es valioso, claro, pero no está relacionado con la discusión en cuestión.
The Nate
6

Google casi no presta atención a las etiquetas que usa en estos días. A Google le importa cómo se ve la página para los usuarios. Le importa qué texto es grande. Se preocupa por qué texto es destacado. Se preocupa por el texto que está oculto. Recientes pruebas de SEO han demostrado que no hay diferencia entre usar una <div>etiqueta diseñada para parecer un encabezado y usar una <h1>etiqueta en lo que respecta a Google.

Frunzo el ceño al usar etiquetas para cursiva en lugar de usar CSS. Mezcla semántica y presentación. Sin embargo, desde el punto de vista de SEO, no debería haber consecuencias negativas o positivas.

Stephen Ostermiller
fuente
Esta es la respuesta. <i> es un elemento HTML estándar y NUNCA afectará su SEO. Además, el estilo CSS NUNCA afectará al SEO, excepto si se usa para ocultar contenido. La clave más importante SIEMPRE será contenido, contenido, contenido.
Rob
-1

Sí, es una mala idea. Utilice <h>etiquetas de declaración claras , esta es una de las reglas de Google.

usuario6521985
fuente
2
Esta respuesta es incorrecta
John Conde
1
Nunca he oído hablar de una <h>etiqueta, y mucho menos encontrar reglas de Google para su uso. ¿Puedes vincular a alguna documentación?
Stephen Ostermiller