É 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

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