1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

SEOにも有効!初心者が覚えておきたいHTMLタグ22選

shutterstock_208516351
Pocket

HTMLタグはたくさんあって覚えるのが大変

プログラミングを習い始めた段階は度のタグを覚えるべきかなかなかわからないですよね。今回は初心者が覚えておきたいHTMLタグを22個紹介します。
SEO対策する上で重要なものも多いので、是非この機会にご確認ください。

おすすめのHTMLタグ22選

HTMLを記述するうえで押さえるべきタグを紹介しています。またSEOにおいてタグはとても重要な意味を持っています。紹介したタグで記述することが対策に有効になります。

タグ名(属性名) タグの説明/入力例/出力例
title <タグの説明>
検索エンジンの検索結果に表示されるタグ。
そのページ内で最も重要な要素といってもいい。
titleタグの設定だけで検索結果に影響が出るくらい重要。

※上位表示させたいキーワードをタイトルに含めることを意識する。
※複数ページの場合titleタグの内容は重複させないようにする。
※全角32文字以内で設定する。
<入力例>
<title>タイトルAmazon |本, ファッション, 家電から食品まで| アマゾン</title>
<出力例>

h1 <タグの説明>
見出しを意味するタグ。見出しタグの中で一番重要度が高い。
ページ内で1つのh1タグを設定する。(複数記述することは可能だが、主要テーマが分散する為なるべく1ページ1つを意識すること)

h1タグはページの主要テーマを記載するタグであり、検索エンジンからの評価も高いので、titleタグ同様キーワードを含めるのが効果的。
<入力例>
<h1>一番重要な見出し!</h1>ここに書かれた内容は一つの段落であることを表します。
<出力例>

h2~h6 <タグの説明>
h1に続く見出しのタグ。トピックの見出しとして使われる。
数字が小さいほどそのテキストは重要であると扱われる。複数個設置するのが普通だが、設置しすぎると重要度が分散するため注意。
hタグを適切に使用すればページ内の全体のテーマが検索エンジンに正確に伝わり評価が高くなる。

※h2~h6は2から順に使う。○h2→h3 ×h2→h4
<入力例>
<h2>トピック見出し</h2>
ここに書かれた内容は一つの段落であることを表します。
<出力例>

strong <タグの説明>
強調を意味するタグ。重要なキーワードに使用することで、重要性を検索エンジンに伝えることができる。※使用しすぎると1つ当たりの重要度は分散し、また過度なSEOとしてペナルティの恐れがあるため、ページ内の使用回数は3回程度に抑えた方がいい。
※重要だからと言って、hタグのような見出しに使用しない事。あくまで自然に使用する事。
<入力例>特に強調したい重要なワードは<strong>このワード</strong>です。
<出力例>

em <タグの説明>
強調を意味するタグ。
strongタグを「強い強調」とすると、emタグは「強調」
<入力例>強調したいワードは<em>このワード</em>です。
<出力例>

meta(description) <タグの説明>
検索エンジンの検索結果の説明文箇所に表示される。

SEO順位に直接は影響しないが、検索結果画面でサイトが表示されたときのクリック率に影響するタグである。
※100文字程度で設定する。
<入力例>
<meta> name=”description” content=”Amazon.co.jp 公式サイト。お急ぎ便ご利用で当日・翌日にお届け。アマゾンで本, 日用品, ファッション, 食品, ベビー用品, カー用品ほか一億種の商品をいつでもお安く。通常配送無料(一部を除く)”
<出力例>

meta(Keywords) <タグの説明>
キーワードを設定する。

キーワード数は1~3が理想とされている。キーワードが多すぎるとSEOとしてペナルティの恐れがあるため注意。
<入力例>
<meta< name=”keywords” content=”Amazon,アマゾン,通販,インターネットショッピング”<>
<出力例>
表示はされない
a <タグの説明>
リンクを意味するタグ。

内部リンク(自サイト内を行き交うリンク)を最適化することは外部リンクを獲得する事と同様に重要な要素となる。
アンカーテキストにはリンク先のページを端的に表すキーワードを用いる。
なるべくリンクはテキストにした方がいい。
(画像リンクを使用する場合はalt属性に代替テキストをつけるようにする。)
ユーザビリティ向上の為だけでなく検索順位にも効果があるのでグローバルナビゲーションやパンくずリスト、フッター等を配置しよう。
<入力例>
<a> href=”../top.html”>TOPページ</a>へのリンク>
<出力例>

img(alt) <タグの説明>
画像の説明を設定する。

画像が表示されない場合alt属性の内容が表示され、画像検索でも使用される。
画像にリンクを張る場合、altに設定したテキストがアンカーテキストのように扱われる。
<入力例><img> src=”./images/001.gif” alt=”画像を説明するテキスト” </>
<出力例>


※画像が表示されない場合

p <タグの説明>
段落を意味するタグ。

hタグとpタグを使用すると、見出しと説明部分を区別して表記できるので検索エンジンに分かりやすい文章となる。
※段落以外では使用しないようにする。
<入力例>
<p>段落その1です。</p>
<p>段落その2です。</p>段落後の文章です。
<出力例>

ul li <タグの説明>
順不同のリストを意味するタグ。

特に順序を付けない箇条書きリストを作成する場合にはulタグを使用するようにする。
※見た目上変わらないからと言って、「・(点)~~~」のように直接「点」を記述しないように。
<入力例>
<h3>○○料理に必要な材料</h3>
<ul>
<li>ニンジン 1本>/li>
<li>ピーマン 1個>/li>
<li>玉ねぎ 1個</li>
</ul>
<出力例>

ol li <タグの説明>
番号付きリストを意味するタグ。

番号順に整列したリストを作成する場合にはolタグを使用するようにする。
ulタグとolタグの入れ子構造も可能。
<入力例>
<h3>○○料理の手順</h3>
<ol>
<li>材料を切る>/li>
<li>材料を炒める>/li>
<li>皿に盛りつける>/li>
<出力例>

dl dt dd <タグの説明>
定義型(説明付き)リストを意味するタグ。

箇条書きの内容に対して説明文を付けることが出来る。
dtに用語、ddにその用語に対する説明を記載する。
<入力例>
<h3>野菜の栄養について</h3>
<dl>
<dt>にんじん</dt>
<dd>ビタミンが○○が多く含まれている。</dd>
<dt>ピーマン</dt>
<dd>ビタミン○○とビタミン○○が含まれている。</dd>
</dl>
<出力例>

br <タグの説明>
改行を意味するタグ。

2つ以上連続して使わない事。
区切りを使用するのであればpタグを使用する事。
(検索エンジンが読みやすくするために)
見た目上行間を調整したい場合は、css(スタイルシート)に表記する。
<入力例>
この文章の後改行されます<br />改行後です。
<出力例>

b <タグの説明>
太字にするタグ。

※多用は、過剰なSEOと判断される可能性がある。
特定の文字を太字にしたい場合は、cssに表記する
<入力例>
太字表示される文字は<b>ここに記載された</b>文字です。
<出力例>

i <タグの説明>
斜体にするタグ。
特定の文字を斜体にしたい場合は、cssに表記する。
<入力例>
斜体表示される文字は<i>ここに記載された文字</i>/です。
<出力例>

装飾系タグ

装飾系タグは下記に記載した以外にもありますが、つい使用頻度が高くなりがちなタグをピックアップしています。また、装飾系タグはCSSに書くことがシンプルで読みやすいHTML、加えてSEO対策にもつながります。装飾系タグはCSSに記載することをおすすめします。

タグ名(属性名) タグの説明/入力例/出力例
hr <タグの説明>
水平線を引くタグ。

水平線を引きたい場合は、cssに表記する
<入力例>
水平線が引かれます<hr>
<出力例>

u <タグの説明>
下線(アンダーライン)を引くタグ。

特定の文字に下線を引きたい場合は、cssに表記する
<入力例>
下線が引かれる文字は<u>ここに記載された文字</u>です。
<出力例>

s <タグの説明>
取り消し線を引くタグ。

特定の文字に取り消し線を引きたい場合は、cssに表記する
<入力例>
取り消し線が引かれる文字は<s>ここに記載された文字</s>です。
<出力例>

center <タグの説明>
中央寄せにするタグ

中央寄せにしたい場合は、cssに表記する。
<入力例>
この後の段落は中央表示されます<p><center>ここの文章は中央に表示されます</center></p>
<出力例>

font <タグの説明>
文字サイズ等を指定するタグ

文字サイズ等を指定したい場合は、cssに表記する。
<入力例>
サイズ指定される文字は<font size=”5″>ここに記載された文字</font>です。
<出力例>

color <タグの説明>
文字色を指定する属性

文字色を指定したい場合は、cssに表記する。
<入力例>
色指定される文字は<font style=”color:red”>ここに記載された文字</font>です。
<出力例>

いかがだったでしょうか。今回紹介したタグはページ作成には必須といえるものばかりです。
学習を始めたばかりの方のご参考になればと思います。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾

メールマガジン

ページ上部へ戻る