Ist es für SEO eine schlechte Praxis, <i> in Header-Elementen zu verwenden?


11

Um eine benutzerfreundliche Website zu erstellen, muss ich einige der Font Awesome-Schriftarten in <h>Elementen wie diesen verwenden:

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

In der Tat ist dies ein Übersichtsartikel. Ist es OK , um diese Schriftarten (oder zu setzen <i>Elemente) in den inneren HTML - Header - Elemente wie <h1>, <h2>, <h3>usw.?

Bitte geben Sie auch Ihre Quelle oder eine Dokumentation an, da dies für mich sehr wichtig ist. Ich möchte zu diesem Thema keine Fehler machen.


3
Besser <span>für FontAwesome zu verwenden, funktioniert die alberne Verwendung von <i>Using <h2><span class="fa fa-gear"> </span></h2>genauso gut.
Simon Hayter

Antworten:


11

Ich würde sagen, es würde nicht viel schaden, noch wird es etwas hinzufügen. Ich ziehe es vor, meine Header-Tags sauber zu halten und würde die nicht hinzufügen i. Das Inline-Styling wäre ein größeres Problem, was eigentlich kein großes Problem ist.

Stattdessen können Sie das Zahnradsymbol direkt zum H2 hinzufügen:

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
Der Benutzer sollte wirklich CSS verwenden und sein HTML nicht aufblähen. Während das Stylen eines Header-Tags keinen Sodbrennen verursacht, wird aufgeblähtes HTML.
Schrank

1
Ich bin bis zu einem gewissen Grad anderer Meinung. Weil Sie beide übersehen haben, dass Sie einfach den HTML-Code verringern und dann das CSS erhöhen, und dass Sie mehr als nur abnehmen. Wenn Sie es tun, um weit weniger Bytes zu verbrauchen, verwenden Sie SASS und verwenden Sie eine einzelne Zeile im CSS wie folgt: .h2.geared:before, .fa-gear:before,.fa-cog:before{content:"\f013"}Außerdem wäre es nichts Falsches, wenn Sie eine <h2>Title <span class="fa fa-gear"> <span></h2>vollständig gültige verwenden und SEO im geringsten nicht schaden.
Simon Hayter

Obwohl der Klassenname schlecht gewählt ist, können Sie den Gang leicht in ein anderes Symbol ändern, ohne Ihr gesamtes CSS zu ändern. Sie können das Erscheinungsbild mit CSS ändern, wodurch es in ein Stylesheet eingefügt wird. Aber ich stimme Ihrem Vorschlag zu, entweder sind IMO nicht schlecht.
Martijn

Es ist absurd zu behaupten, dass HTML und CSS durch die Verwendung von Sass reduziert werden können. Sass wird zu CSS erweitert, sodass keine Bandbreite gespart wird, sondern nur getippt wird. Das ist zwar wertvoll, hat aber nichts mit der Diskussion zu tun.
The Nate

6

Google achtet fast nicht darauf, welche Tags Sie heutzutage verwenden. Google kümmert sich darum, wie die Seite für Nutzer aussieht. Es ist wichtig, welcher Text groß ist. Es ist wichtig, welcher Text prominent ist. Es ist wichtig, welcher Text versteckt ist. Jüngste SEO-Tests haben gezeigt, dass es für Google keinen Unterschied zwischen der Verwendung eines <div>Tags gibt, das so gestaltet ist, dass es wie eine Überschrift aussieht, und der Verwendung eines <h1>Tags.

Ich runzele die Stirn, Tags für Kursivschrift zu verwenden, anstatt CSS zu verwenden. Es mischt Semantik und Präsentation. Aus SEO-Sicht sollte es jedoch keine negativen oder positiven Konsequenzen geben.


Das ist die Antwort. <i> ist ein Standard-HTML-Element und hat NIEMALS Auswirkungen auf Ihre SEO. Darüber hinaus wirkt sich das CSS-Styling NIEMALS auf die Suchmaschinenoptimierung aus, es sei denn, es wird zum Ausblenden von Inhalten verwendet. Der wichtigste Schlüssel wird IMMER Inhalt, Inhalt, Inhalt sein.
Rob

-1

Ja, das ist eine schlechte Idee. Verwenden Sie eindeutige Anweisungs- <h>Tags. Dies ist eine der Regeln von Google.


2
Diese Antwort ist falsch
John Conde

1
Ich habe noch nie von einem <h>Tag gehört, geschweige denn von Google-Regeln für deren Verwendung. Können Sie auf eine Dokumentation verlinken?
Stephen Ostermiller
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.