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

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

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

と定義されており、

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

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

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

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

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

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

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

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

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

行動規範の内容に同意します

回答1件

ベストアンサー

正しい文法かどうか

アイコンフォントなどを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要素を使う決定的な意味はありません。代用が可能ならより合った要素を使用すると良いのではないかと思います。

要素名が1文字で打ちやすいから。
i要素という要素名はiconの頭文字からとられているという間違った認識が広まった。
Font Awesomeに関しては、そうしているからそうした。

[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の文法を守っておくに越したことはないと思います。