SEOがヘッダー要素で<i>を使用するのは悪い習慣ですか?


11

ユーザーフレンドリーなウェブサイトを作成するには、次の<h>ような要素でFont Awesomeフォントを使用する必要があります。

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

実際、これはレビュー記事です。それは、これらのフォント(または入れてOKである<i>ようなヘッダ要素の内側のHTMLの要素を)<h1><h2><h3>など、?

ソースまたはドキュメントも提供してください。これは私にとって非常に重要です。私はこのトピックについて誤解したくありません。


3
<span>FontAwesomeの方が使いやすく、ばかげた<i>Usingの使用<h2><span class="fa fa-gear"> </span></h2>も同様に機能します。
Simon Hayter

回答:


11

それはそれほど害を及ぼすことはなく、何も追加しないでしょう。私はヘッダータグをきれいにしておくことを好み、を追加しませんi。インラインスタイリングはもっと大きな問題になりますが、これはそれほど大きな問題ではありません。

これを行う代わりに、歯車アイコンを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
ユーザーは実際にはCSSを使用し、HTMLを膨らませないでください。ヘッダータグのスタイルを設定しても胸焼けは発生しませんが、HTMLの肥大化は発生します。
closetnoc

1
私はある程度同意しません。HTMLを単純に減らしてからCSSを増やすという事実を見落としているためです。それをはるかに少ないバイトを消費するようにする場合は、SASSを使用し、次のようにCSSで単一の行.h2.geared:before, .fa-gear:before,.fa-cog:before{content:"\f013"}を使用し<h2>Title <span class="fa fa-gear"> <span></h2>ます。
Simon Hayter

クラス名の選択が不十分ですが、すべてのCSSを変更せずに簡単にギアを別のアイコンに変更できます。CSSを使用して外観を変更できます。CSSを使用すると、スタイルシートに配置されます。でも私はあなたの提案に同意します、どちらも悪いIMOではありません。
Martijn、2016

sassを使用してhtmlとcssを削減できることを示唆するのはばかげています。Sassはcssに拡張されるため、入力するだけで帯域幅を節約できます。それは確かに貴重ですが、現在の議論とは関係ありません。
ネイト

6

Googleは最近使用するタグにほとんど注意を払っていません。Googleは、ページがユーザーにどのように見えるかを気にします。どのテキストが大きいかを気にします。どのテキストが目立つかを気にします。どのテキストが非表示になるかを考慮します。最近のSEOテストでは<div>、見出しのようにスタイル設定されたタグを使用することと<h1>、Googleに関する限りタグを使用することの間に違いがないことが示されています。

CSSを使用するのではなく、イタリック体のタグを使用することを嫌います。セマンティクスとプレゼンテーションが混在しています。ただし、SEOの観点からは、マイナスまたはプラスの結果があってはなりません。


これが答えです。<i>は標準のHTML要素であり、SEOに影響を与えることはありません。さらに、CSSスタイリングは、コンテンツの非表示に使用される場合を除いて、SEOに影響を与えることはありません。最も重要なキーは常にコンテンツ、コンテンツ、コンテンツです。
Rob

-1

はい、それは悪い考えです。明確なステートメント<h>タグを使用します。これはGoogleのルールの1つです。


2
この答えは正しくありません
ジョンコンデ

1
私は<h>タグを聞いたことがありません。使用するためにGoogleのルールに出くわすことは言うまでもありません。いくつかのドキュメントにリンクできますか?
スティーブンオスターミラー
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.