È una cattiva pratica per il SEO utilizzare <i> negli elementi di intestazione?


11

Per creare un sito web facile da usare, devo usare alcuni dei caratteri Font Awesome in <h>elementi come questo:

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

In realtà, questo è un articolo di revisione. E 'ok per mettere questi tipi di carattere (o <i>elementi) nel codice HTML interno di elementi di intestazione come <h1>, <h2>, <h3>e così via?

Fornisci anche la tua fonte o un po 'di documentazione, perché è davvero importante per me; Non voglio fare errori su questo argomento.


3
Meglio usare <span>per FontAwesome, il suo stupido usando <i>Utilizzando <h2><span class="fa fa-gear"> </span></h2>funzionerà altrettanto bene.
Simon Hayter

Risposte:


11

Direi che non farebbe molto male, né aggiungerebbe nulla. Preferisco mantenere puliti i miei tag di intestazione e non aggiungerei il i. Lo stile in linea sarebbe un problema più grande, che non è davvero un grosso problema.

Invece di farlo, puoi aggiungere direttamente l'icona dell'ingranaggio a 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'utente dovrebbe davvero usare i CSS e non gonfiare il proprio HTML. Mentre lo stile di un tag di intestazione non provoca bruciori di cuore, HTML gonfio lo farà.
closetnoc,

1
Non sono d'accordo in una certa misura. Poiché entrambi avete trascurato il fatto che state semplicemente diminuendo l'HTML ma poi aumentando il CSS, in effetti aumentate più che diminuendo. Se lo fai per consumare molto meno byte, usa SASS e usa una linea singolare nel CSS in questo modo: .h2.geared:before, .fa-gear:before,.fa-cog:before{content:"\f013"}Inoltre, non ci sarebbe nulla di sbagliato nell'usare un valore <h2>Title <span class="fa fa-gear"> <span></h2>totalmente valido e non danneggerebbe il SEO in nessun modo.
Simon Hayter

Sebbene il nome della classe sia scelto male, puoi facilmente cambiare la marcia in un'altra icona senza cambiare tutti i tuoi CSS. È possibile modificare l'aspetto con CSS, che lo posizionerebbe in un foglio di stile. Acquista Sono d'accordo con il tuo suggerimento, o non sono male IMO.
Martijn,

Suggerire che html e css possono essere ridotti usando sass è assurdo. Sass si espande in CSS, quindi non risparmia larghezza di banda su di esso, solo digitando. È prezioso, certo, ma non correlato alla discussione in corso.
The Nate,

6

Google non presta quasi attenzione ai tag che usi in questi giorni. A Google interessa l'aspetto della pagina per gli utenti. Si preoccupa di quale testo è grande. Si preoccupa di quale testo è importante. Si preoccupa di quale testo è nascosto. Recenti test SEO hanno dimostrato che non vi è alcuna differenza tra l'utilizzo di un <div>tag in stile simile a un'intestazione e l'utilizzo di un <h1>tag per quanto riguarda Google.

Non vedo l'ora di usare i tag per il corsivo piuttosto che usare i CSS. Mescola semantica e presentazione. Tuttavia, dal punto di vista SEO, non dovrebbero esserci conseguenze negative o positive.


Questa è la risposta <i> è un elemento HTML standard e non influenzerà MAI il tuo SEO. Inoltre, lo stile CSS non influirà MAI sulla SEO, tranne se utilizzato per nascondere il contenuto. La chiave più significativa sarà SEMPRE contenuto, contenuto, contenuto.
Rob,

-1

Sì, è una cattiva idea. Usa <h>tag di dichiarazione chiari , questa è una delle regole di Google.


2
Questa risposta è errata
John Conde

1
Non ho mai sentito parlare di un <h>tag, per non parlare delle regole di Google per il loro uso. Puoi collegarti ad alcuni documenti?
Stephen Ostermiller
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.