Est-ce une mauvaise pratique pour le référencement d'utiliser <i> dans les éléments d'en-tête?


11

Pour créer un site Web convivial, je dois utiliser certaines des polices Font Awesome dans des <h>éléments comme celui-ci:

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

En fait, il s'agit d'un article de synthèse. Est - il acceptable de mettre ces polices (ou <i>éléments) dans le code HTML intérieur des éléments d' en- tête comme <h1>, <h2>, <h3>, etc.?

Veuillez également fournir votre source ou de la documentation, car c'est très important pour moi; Je ne veux pas faire d'erreurs sur ce sujet.


3
Mieux vaut utiliser <span>pour FontAwesome, son utilisation idiote en <i>utilisant <h2><span class="fa fa-gear"> </span></h2>fonctionnera tout aussi bien.
Simon Hayter

Réponses:


11

Je dirais que cela ne nuirait pas à grand-chose et n'ajouterait rien. Je préfère garder mes balises d'en-tête propres et je n'ajouterais pas le i. Le style en ligne serait un problème plus important, ce qui n'est pas vraiment un gros problème.

Au lieu de cela, vous pouvez ajouter directement l'icône d'engrenage au H2:

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>

3
L'utilisateur doit vraiment utiliser CSS et ne pas gonfler son HTML. Bien que le stylisme d'une balise d'en-tête ne provoque aucune brûlure cardiaque, le HTML gonflé le fera.
closetnoc

1
Je suis en désaccord dans une certaine mesure. Parce que vous avez tous les deux ignoré le fait que vous diminuiez simplement le HTML mais augmentiez ensuite le CSS, en fait votre augmentation était plus que décroissante. Si vous le faites pour consommer beaucoup moins d'octets, utilisez SASS et utilisez une ligne singulière dans le CSS comme ceci: .h2.geared:before, .fa-gear:before,.fa-cog:before{content:"\f013"}En outre, il n'y aurait rien de mal à utiliser <h2>Title <span class="fa fa-gear"> <span></h2>totalement valide et ne nuirait pas le moins du monde au référencement.
Simon Hayter

Bien que le nom de classe soit mal choisi, vous pouvez facilement changer l'équipement en une autre icône sans changer tous vos CSS. Vous pouvez modifier l'apparence avec css, ce qui le placerait dans une feuille de style. Buit je suis d'accord avec votre suggestion, soit ne sont pas mauvais IMO.
Martijn

Il est absurde de suggérer que le HTML et le CSS peuvent être réduits en utilisant sass. Sass se développe en CSS, donc il n'économise aucune bande passante dessus, juste en tapant. C'est précieux, bien sûr, mais pas lié à la discussion en cours.
The Nate

6

Google ne fait presque aucune attention aux balises que vous utilisez ces jours-ci. Google se soucie de l'apparence de la page pour les utilisateurs. Il se soucie du texte qui est gros. Il se soucie du texte qui est en évidence. Il se soucie du texte caché. Des tests SEO récents ont montré qu'il n'y a aucune différence entre l'utilisation d'une <div>balise conçue pour ressembler à un titre et l'utilisation d'une <h1>balise en ce qui concerne Google.

Je fronce les sourcils en utilisant des balises pour l'italique plutôt qu'en utilisant CSS. Il mélange sémantique et présentation. Cependant, d'un point de vue SEO, il ne devrait y avoir aucune conséquence négative ou positive.


Telle est la réponse. <i> est un élément HTML standard et n'affectera JAMAIS votre référencement. De plus, le style CSS n'affectera JAMAIS le référencement, sauf s'il est utilisé pour masquer du contenu. La clé la plus importante sera TOUJOURS le contenu, le contenu, le contenu.
Rob

-1

Oui, c'est une mauvaise idée. Utilisez des <h>balises de déclaration claires , c'est l'une des règles de Google.


2
Cette réponse est incorrecte
John Conde

1
Je n'ai jamais entendu parler d'un <h>tag, et encore moins de parcourir les règles de Google pour leur utilisation. Pouvez-vous créer un lien vers une documentation?
Stephen Ostermiller
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.