【HTML】SEOとタグの関係、SEO対策に重要なHTML5タグについて解説！

HTML

【 2025/04/14 18:48 更新】

SEOの意味とHTML5タグとの関係性

SEOとは？

SEO（Search Engine Optimization）とは、検索エンジンでWebページを上位に表示させるために行う対策のこと。

Chromeで「こじはなノート」と検索すると、上位にこじはなNoteが表示されます。

SEO対策をしっかりとるほど、意図した検索で意図したページが上位に表示されやすくなります。

検索エンジンとは

インターネット上の情報を検索できるシステムです。
代表的なブラウザChrome・safari・Edge・Firefoxなどに備わっています。

SEOとHTML5タグとの関係性

Webページに対するHTML5タグ付けは重要なSEO対策の1つです。

HTML5タグ付けをするメリット

検索エンジンがページの内容や関係性を正確に理解しやすくなる。
意図した検索で意図したページが上位に表示されやすくなる。

この記事の前提知識

前提としてHTML・CSSの基本知識がないと、理解が難しいかも！
基礎知識がない方は以下の記事を読んでみてね〜！

SEOに重要なHTML5の基本タグ

titleタグ

Webページのタイトルを記載します。
30文字程度で、Webページの重要なキーワードを必ず含めて記載してください。

ポイント

文字数は30文字程度。
重要なキーワードを含める。
Webページの内容が理解できるタイトルにする。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <!-- titleタグ -->
        <title>【HTML】SEOに関係する重要なHTML5の基本的なタグ</title>
    </head>
    <body>
        <h2>SEOについての説明</h2>
    </body>
</html>

metaタグのname="description"

Webページの概要を記載します。
50~100文字程度で、Webページの重要なキーワードを必ず含めて記載してください。

ポイント

文字数は50~100文字程度。
重要なキーワードを含める。
Webページの内容が理解できる説明にする。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
        <!-- Webページの概要 -->
        <meta name="description" content="テスト説明文！こじはなが今までに経験したことや蓄えた知識をノート感覚で発信していきます！">
    </head>
    <body>
        <h2>SEOについての説明</h2>
    </body>
</html>

headerタグ

Webページのヘッダーを定義する際に、使用します。
「ここからここまでがヘッダーです」と示します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <!-- 開始タグこれ↓ -->
        <header>
            <h1>ヘッダーだよ〜！</h1>
        <!-- 終了タグこれ↓ -->
        </header>
    </body>
</html>

footerタグ

Webページのフッターを作る際に、使用します。
「ここからここまでがフッターです」と示します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <!-- 開始タグこれ↓ -->
        <footer>
            フッターだよ〜〜〜〜！
        <!-- 終了タグこれ↓ -->
        </footer>
    </body>
</html>

mainタグ

Webページのメイン部分を定義する際に、使用します。
ヘッダー・フッターがないページでも、<main></main>はあった方が良いです。

メイン部分がないページは滅多にないと思うから、基本あった方が良いね！

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <!-- 開始タグこれ↓ -->
        <main>
            <h2>メイン部分！！</h2>
        <!-- 終了タグこれ↓ -->
        </main>
    </body>
</html>

h1~h6タグ

見出しに使用します。
h1が一番大きな見出しで、h2、h3...と数字が大きくなるほど小さい見出しになります。

ポイント

h1~h6の階層構造を明確にする。
重要なキーワードを含める。
本文の内容が理解できる文章にする。

<h1>1番大きな見出し</h1>
<h2>2番目の見出し</h2>
<h3>3番目の見出し</h3>
<h4>4番目の見出し</h4>
<h5>5番目の見出し</h5>
<h6>6番目の見出し</h6>

sectionタグ

Webページ内で章や内容ごとにまとまっている箇所にsectionタグを使います。
sectionタグで区分けして、まとまりを明確化します。

ポイント

sectionタグの中には、必ずh1～h6といった見出しタグを入れることがルール。

<section>
    <h2>第１章こじはなは誰！？</h2>
    <p>こじはなは、社会人3年目です。</p>
</section>
<section>
    <h2>第２章こじはなの性別は何？</h2>
    <p>こじはなは、おそらく女性。</p>
</section>

aタグ

aタグを使うとリンクが作れます。
内部リンク・外部リンクとしてSEOの評価対象の1つです。

<a href="cojihana-note.com/">こじはなNoteのホーム</a>

imgタグのalt属性

imgタグにはalt属性が指定でき、代替テキストを設定できます。
画像SEO・アクセシビリティの対策強化となります。

<img src="test.png" alt="テスト画像">

ulタグ・olタグ

ulタグ・olタグは、基本的にliタグを内包するタグです。

liタグとは

リストの項目に使うタグです。

<li>お金</li>
<li>お花</li>
<li>抹茶</li>

ulタグとは

順序のあるリストを意味し、手順のように番号が付くリストに使用します。

<h1>こじはな好きな物ランキング</h1>
<ul>
    <li>1位：お金</li>
    <li>2位：お花</li>
    <li>3位：抹茶</li>
</ul>

olタグとは

順序のないリストを意味し、箇条書きのように箇条書きなど順序がない場合に使用します。

<h1>こじはな好きな物</h1>
<ol>
    <li>お金</li>
    <li>お花</li>
    <li>抹茶</li>
</ol>

navタグ

リンクのリストに使用します。基本的に、ulタグ・olタグを内包します。
ブログ記事の目次、パンくずリスト、他ページへのリンクメニューなどに使用します。

<nav>
    <ol>
        <li><a href="/">トップページ</a></li>
        <li><a href="/category.html">カテゴリ一覧</a></li>
        <li><a href="/contact.html">お問い合わせ</a></li>
    </ol>
</nav>

asideタグ

補足情報や余談の場所として使用します。
基本的に、サイドメニューや関連コンテンツに使われます。

<aside>
    <h4>メニュー</h4>
    <nav>
        <ol>
            <li><a href="/">トップページ</a></li>
            <li><a href="/category.html">カテゴリ一覧</a></li>
            <li><a href="/contact.html">お問い合わせ</a></li>
        </ol>
    </nav>
</aside>

articleタグ

Webページ内の独立した内容の部分に使用します。
Webページの脇にあるニュース記事やランキングなどのように、独立して単体で意味を持つ部分に使用します。

asideタグとの違い

asideタグ：メインコンテンツに関係した補足情報。
articleタグ：メインコンテンツから独立した内容。

<article>
    <h4>こじはな好きな物ランキング</h4>
    <ul>
        <li>1位：お金</li>
        <li>2位：お花</li>
        <li>3位：抹茶</li>
    </ul>
</article>

まとめ

SEOは検索エンジンでWebページを上位に表示させるための対策。
HTML5タグ付けは重要なSEO対策の1つ。
titleタグ：30文字程度で、重要なキーワードを含めて分かりやすく記載。
<meta name="description">：50~100文字程度で、重要なキーワードを含めて分かりやすく記載。
headerタグ：ヘッダーを定義する際に使用。
footerタグ：フッターを定義する際に使用。
mainタグ：メイン部分のタグで、ヘッダー・フッターがなくてもmainタグはあった方が良い
h1~h6タグ：見出しのタグで、階層構造・キーワードを含めて分かりやすく記載。
sectionタグ：章や内容ごとにまとまった箇所に使い、必ず見出しタグ(h1～h6)を入れる。
aタグ：リンクのタグで、内部リンク・外部リンクとしてSEOの評価対象となる。
imgタグのalt属性：代替テキストを設定でき、画像SEO・アクセシビリティの対策強化となる。
ulタグ：順序のあるリストで、番号が付くリストに使用。
olタグ：順序のないリストで、箇条書きなど順序がない場合に使用。
navタグ：リンクのリストに使用し、基本的にulタグ・olタグを内包する。
asideタグ：補足情報や余談のタグで、サイドメニューや関連コンテンツに使用。
articleタグ：Webページ内の独立して単体で意味を持つ部分に使用し、ニュース記事やランキングに使われる。

HTML

【 2025/04/14 18:48 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！