É uma má prática para o SEO usar <i> nos elementos do cabeçalho?

11

Para criar um site amigável, eu tenho que usar algumas das fontes Font Awesome em <h>elementos como este:

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

De fato, este é um artigo de revisão. É ok para colocar essas fontes (ou <i>elementos) no HTML interior de elementos de cabeçalho, como <h1>, <h2>, <h3>, etc.?

Por favor, forneça sua fonte ou alguma documentação também, porque é realmente importante para mim; Não quero cometer erros sobre este tópico.

seo html heading Amirreza Nasiri
fonte
3
Melhor usar <span>para FontAwesome, sua boba usando <i>Usando <h2><span class="fa fa-gear"> </span></h2>vai funcionar tão bem.
Simon Hayter

Respostas:

11

Eu diria que não prejudicaria muito, nem acrescentaria nada. Prefiro manter minhas tags de cabeçalho limpas e não adiciono o i. O estilo embutido seria um problema maior, o que não é realmente um grande problema.

Em vez de fazer isso, você pode adicionar o ícone de engrenagem ao H2 diretamente:

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
fonte
3
O usuário realmente deve usar CSS e não inchar seu HTML. O estilo de uma tag de cabeçalho não causará azia, mas o HTML inchado.
closetnoc
1
Eu discordo até certo ponto. Como você ignorou o fato de você simplesmente diminuir o HTML, mas aumentar o CSS, na verdade, você está aumentando mais do que diminuindo. Se você está consumindo muito menos bytes, use o SASS e use uma linha singular no CSS da seguinte forma: .h2.geared:before, .fa-gear:before,.fa-cog:before{content:"\f013"}Além disso, não haveria nada de errado em usar <h2>Title <span class="fa fa-gear"> <span></h2>totalmente válido e não prejudicaria o SEO nem um pouco.
Simon Hayter
Embora o nome da classe seja mal escolhido, você pode facilmente mudar a engrenagem para outro ícone sem alterar todos os seus css. Você pode alterar a aparência com css, que a colocaria em uma folha de estilo. Buit Concordo com sua sugestão, ou não são ruins IMO.
287 Martijn
Sugerir que html e css possam ser reduzidos usando sass é um absurdo. O Sass se expande para css, portanto, não economiza largura de banda, apenas digitando. Isso é valioso, claro, mas não está relacionado à discussão em questão.
The Nate
6

O Google quase não presta atenção em quais tags você usa atualmente. O Google se preocupa com a aparência da página para os usuários. Ele se importa com o texto que é grande. Ele se importa com o texto que é proeminente. Ele se importa com o texto que está oculto. Testes recentes de SEO mostraram que não há diferença entre usar uma <div>tag estilizada para parecer um cabeçalho e usar uma <h1>tag no que diz respeito ao Google.

Eu desaprovo o uso de tags para itálico, em vez de usar CSS. Mistura semântica e apresentação. No entanto, do ponto de vista de SEO, não deve haver consequências positivas ou negativas.

Stephen Ostermiller
fonte
Essa é a resposta. <i> é um elemento HTML padrão e NUNCA afetará seu SEO. Além disso, o estilo CSS NUNCA afetará o SEO, exceto se for usado para ocultar o conteúdo. A chave mais significativa será SEMPRE conteúdo, conteúdo, conteúdo.
Rob
-1

Sim, é uma má ideia. Use <h>tags de declaração claras , esta é uma das regras do Google.

user6521985
fonte
2
Esta resposta está incorreta
John Conde
1
Eu nunca ouvi falar de uma <h>tag, e muito menos de regras do Google para seu uso. Você pode criar um link para alguma documentação?
Stephen Ostermiller