【HTML】テキストの意味を解らせるタグを紹介します【SEO】

こんにちは朱夏です。

今回は、HTMLのテキストに意味を付けるタグについて書いていきたいと思います。

朱夏

<cite>などのタグをつけて書いても見た目に何も変化がないんだけど・・・全部<span>じゃだめなのかな？

正直に言うと、<span>だけで作成するのはお勧めできません。
人の目からは同じに見えますが、Googleの検索ボットを意識するならしっかり活用していきたいタグになります。
それではいってみましょう。

タグの紹介

先ずはどんなタグがあるのか紹介をしていきます。
それぞれのタグについて、どんな意味をテキストに与えるのかを書いていきたいと思います。

1.<a>～</a>ハイパーリンク

HTMLの初歩として覚えている人も多いと思います。
<a>タグの役割としては、ユーザーがクリックした時にリンク先へ移動します。
Googleボットに対してはハイパーリンクである事、リンク先がどこかを伝えています。

2.<strong>～</strong>強調表示

テキストを強調表示するタグです。
<strong>を使った場合、そのテキストは太字になります。
Googleボットには重要なテキストであることを伝えています。

3.<small>～</small>注釈

<strong>は説明文などの注釈を書くときに使います。
<strong>を使って書かれたテキストは、通常のフォントより少し小さく表示されます。
Googleボットには注釈あるということを伝えます。

4.<cite>～</cite>作品タイトル

<cite>は本や映画などの作品タイトルにつけるタグです。
<cite>を使ってもブラウザでの見た目は変わりませんが、Googleボットにはこれが作品タイトルであることを伝える事が出来ます。

5.<time>～</time>日時表示

<time>は日時を正確に表示したいときに使います。
ブログなどで言えば投稿日時などに使えます。
Googleボットには、これが日時であることを伝えます。
このタグを使う上での注意事項として、正確な日時であることが必要です。

6.<code>～</code>プログラムコード

<code>は、サイト上でプログラムコードを表示させたいときに使います。
見た目は何も変わりませんが、Googleボットにはプログラムのコードであることを伝えます。

7.<samp>～</samp>出力サンプル

<samp>は、プログラムの出力結果サンプルを表示する時に使います。
実行時のエラーメッセージなどに使われます。

あとがき

というわけで、テキストに意味を付けるタグについて書いてきました。

サイトを見る人以外にも、Googleボットにも読み取りやすいサイトを作るために、タグを上手に使っていきたいと思います。

今回は以上です。
次回もよろしくお願いします。