質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.38%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

SEO

SEO(Search Engine Optimization)は、検索エンジンでウェブページがランキング上位に上がるように工夫する様々なテクニックの事です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

31559閲覧

<i>タグにアイコンを置くことによるSEO評価

lovesana

総合スコア24

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

SEO

SEO(Search Engine Optimization)は、検索エンジンでウェブページがランキング上位に上がるように工夫する様々なテクニックの事です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

3グッド

1クリップ

投稿2017/03/12 17:47

###前提
<i>タグは、HTML5タグリファレンスによると、

声や心の中で思ったことなど、他と区別したいテキストを表す

と定義されており、

分類学上の名称、専門用語、他言語の慣用句、思考の内容、船の名前

その他一般的に印刷される際にイタリック体となるようなテキスト

に使うと書かれています。

しかし、Font Awesomeを始めとしたアイコンを置くために用いる用法をよく見かけます。
これは、内側には何も文字列を記入せずに図を入れるためだけに<i>タグを用いるものです。

###発生している問題
①これは印刷時にイタリック体となるようなテキストではないが、正しい文法なのか
②この用法で文法的に正しくない場合は、SEOで不利にならないのか

###該当のソースコード

HTML

1<i class="fa fa-hand-peace-o" aria-hidden="true"></i>

###意図
何かしらの手段でアイコンを利用したく、
Font Awesomeは便利なので使用したいと考えていますが、
SEOで不利になるようであれば別の手段(<img>など)を使うつもりです。

###補足
もしSEOで不利になるようであれば、
どのような代替案があるのかもご教示くださると幸いです。

T_sa, time_, muyzns👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

正しい文法かどうか

アイコンフォントなどをi要素でマークアップすることがよくありますが、i要素の意味としてアイコンの意味はありません。そもそも、アイコンはテキストですらありませんので、HTML5の文法的には怪しいと考えて良いと思います。

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

参考: 4.5 Text-level semantics — HTML5

ですが、アイコンを置くためにi要素を使うという風習があります。この風習が広まった背景には、以下のようなものが考えられますが、i要素を使う決定的な意味はありません。代用が可能ならより合った要素を使用すると良いのではないかと思います。

[Font Awesome](Font Awesome)の場合、i要素以外でも動作するので、span要素で代用することをお勧めします。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 </style> 13</head> 14<body> 15<div class="box"> 16 <span class="fa fa-camera-retro fa-5x"></span>テキスト 17</div> 18</body> 19</html>

SEOで不利にならないのか

SEOは、どうすれば有利になるか、不利になるか完全にわかるものではないので、一概にこうだということは言えませんが、ウェブマスター向けガイドライン(品質に関するガイドライン)に以下のような記述があることから、HTMLの文法も評価の対象にしている可能性が高いので、HTMLの文法を守っておくに越したことはないと思います。

<title> タグの要素と alt 属性の説明をわかりやすく正確なものにします。

投稿2017/03/12 19:15

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lovesana

2017/03/12 19:26

文法的に誤っているということがわかりスッキリしました。 awesomeを使用しつつ、<span>で代用しようと思います。 素早い回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.38%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問