ホームページの文章で「重要」なワードを強調するタグ!

ホームページの文章で「重要」なワードを強調するタグ!

ホームページで文字を書く時にはpタグで文章を記述することをお伝えしました。文章内の文字を強調したいときに使うタグは少し注意が必要なポイントがあります。ここではホームページの文章で「重要」なワードを強調するタグ!についてを説明します。

こんにちは!あーるくんです。ヾ ^_^♪
Adobe提携校でWEBクリエイター講師を2年ほどしていました。しっかりと学べるように記事を書いていくので閲覧よろしくお願い致します。

もくじ

ホームページの文章で「重要」なワードを強調するタグ!

重要な文字を強調したいときに使うタグか〜

あーる君コアラ

ここでは注意するポイントがあるみたいよ!

あーる子コアラ

文字を強調するstrongタグとemタグについて

タグ意味
<strong></strong>テキスト文字を重要だと強調したいときに使用するタグです。開始タグがあり終了タグがあります。挟み込まれた文字が強調されて太文字となります。
<em></em>テキストを斜体(しゃたい)で表現したいときに利用します。開始タグがあり終了タグがあります。挟み込まれた文字が「斜めに傾く」ような斜体となります。

strongタグの特性

<p>おいしい<strong>パンケーキ</strong>を食べました。</p>

実際の表示例 → おいしいパンケーキを食べました。


テキスト文字を<strong>タグで囲むと視覚的に太文字になります。しかし太文字にしたいだけに使うのはNGです。

デザイン的な要素はすべてCSSの記述で行うルールがあります。太文字にしたい場合はCSSでフォントの大きさを指定します。

strongタグには重要な意味がある

strongタグには一つ重要な要素があります。それはstrongタグで記述するワードに「強い重要性」がある時に使いましょう。という意味が込められています。

結論を先に説明すると、ユーザーがGoogleで検索する「キーワード」に影響してくる。ということになります。

Googleのクローラーについて

Googleにはクローラーといるロボットがいます。そのクローラーがインターネットを巡回してサイトの情報を登録します。データーベースに登録されることで検索にヒットすることができるようになります。

そのGoogleのクローラーがサイトへ訪問した時に、<strong>タグで囲った「文字」に対して「重要な意味」があると伝える役割があります。

そうなると、サイトの運営側にとってはエンドユーザーが検索する「キーワード」に関係するワードを<strong>タグで指定した方がいいという意味に繋がります。

例えばこのサイトなら「HTML5」や「ホームページ」などのキーワードになるでしょう。

strongタグの乱用はダメ!

エンドユーザーが検索する「キーワード」に関係するという理由からstrongタグを乱用して使うのはNGです。Googleのクローラーがどの「ワード」が重要なのか認識ができません。

場合によってはスパムのように捉えられてしまう可能性があります。そうなると検索順位が下がってしまう可能性もあるので乱用には注意しましょう!

strongタグの利用回数とした制限はありませんが一つのページで3回くらいの使用が適切とされています。

emタグの特性

<p>おいしい<em>パンケーキ</em>を食べました。</p>

実際の表示例 → おいしいパンケーキを食べました。


emタグ「強勢してアクセントを付ける」という意味があります。emタグは視覚的な要素が強くstrongタグのようなGoogleクローラーに対する意味付けもありません。

emタグについて

emタグで囲むと文字が「斜体」になります。フォントが少し斜めに表示します。

視覚的な要素はCSSで指定するというルールがありますので、斜体についてもCSSのフォント(イタリック体)を指定することで同じようにできます。

そんな理由からemタグはあまり使われなくなっています。HTMLにはあまり使われないタグがあります。ホームページ作成に必要なタグを覚えれば問題はありません!

補足

古いHTMLのバージョンにはCSSの概念がありませんでした。

HTMLタグに直接デザインの記述もしていました。そうなるとGoogleのクローラーがHTMLのソースコードを上手く読み取れない事例もあったといいます。

CSSが登場した背景にはデザインやレイアウトを別ファイルで管理することで、HTMLが正確に読み取ってもらえるようになったと言われています。

ワンポイント

Googleのクローラーが読み取るのはHTMLタグ文章です。「ホームページの構造を伝える」ために必要な重要度の高いタグは使うべきだと思います。このブログではそんなタグを中心に説明していきます。

Lesson.12