MENU
  • ホーム
  • エンジニア技術MEMO
  • デザインチーム
    • webコーダー挑戦
    • Webデザイナ挑戦デザイナーがWebデザイナーに挑戦し、コーディングやデザインマターでの困りごとや調査内容、他の専門家との情報交換等を投稿します。
    • WordPressWordpressのサイト構築あれこれ!
    • コーダー技術MEMO
    • デザインチーム
  • IT TOOL
    • ECサイトIT TOOL ECサイト
    • レッスン施術サービスレッスン施術サービス予約サイト
    • 美容院予約美容院予約システム
    • 会議室予約
    • 家事代行予約
    • 求人サイト
    • 発注・請求システム
  • IT導入補助金
  • 電気自動車(EV)
  • FAQ
  • どこの国
  • 業務効率化
    • 見積
    • 請求
  • ホーム
  • エンジニア技術MEMO
  • デザインチーム
    • webコーダー挑戦
    • Webデザイナ挑戦デザイナーがWebデザイナーに挑戦し、コーディングやデザインマターでの困りごとや調査内容、他の専門家との情報交換等を投稿します。
    • WordPressWordpressのサイト構築あれこれ!
    • コーダー技術MEMO
    • デザインチーム
  • IT TOOL
    • ECサイトIT TOOL ECサイト
    • レッスン施術サービスレッスン施術サービス予約サイト
    • 美容院予約美容院予約システム
    • 会議室予約
    • 家事代行予約
    • 求人サイト
    • 発注・請求システム
  • IT導入補助金
  • 電気自動車(EV)
  • FAQ
  • どこの国
  • 業務効率化
    • 見積
    • 請求
  • ホーム
  • エンジニア技術MEMO
  • デザインチーム
    • webコーダー挑戦
    • Webデザイナ挑戦デザイナーがWebデザイナーに挑戦し、コーディングやデザインマターでの困りごとや調査内容、他の専門家との情報交換等を投稿します。
    • WordPressWordpressのサイト構築あれこれ!
    • コーダー技術MEMO
    • デザインチーム
  • IT TOOL
    • ECサイトIT TOOL ECサイト
    • レッスン施術サービスレッスン施術サービス予約サイト
    • 美容院予約美容院予約システム
    • 会議室予約
    • 家事代行予約
    • 求人サイト
    • 発注・請求システム
  • IT導入補助金
  • 電気自動車(EV)
  • FAQ
  • どこの国
  • 業務効率化
    • 見積
    • 請求
  1. ホーム
  2. webコーダー挑戦
  3. SEO検索に必要な「hタグ」のおさらい

SEO検索に必要な「hタグ」のおさらい

2024 2/09
webコーダー挑戦 Webデザイナ挑戦 コーダー技術MEMO
2024年2月9日
hタグおさらい

簡単にchat GPTさんにおさらいしてもらい、Google、その他参考サイトの調査結果も追記しておきます。もっと極める方はご自身で調査してくださいね!

Hの意味は??

hタグとは、ユーザーや検索エンジンに対して文章の中で重要な文章を伝えるために、HTMLでマークアップを行う見出しタグです。見出しタグのhはheadを表し、見出しタグの種類は<h1>から<h6>まで6種類あり、

ウェブサイトの構造におけるH1、H2、H3、H4タグの適切な使用について簡単に説明します。これらのタグは、HTMLで見出しをマークアップする際に使用され、ページの構造を整理し、コンテンツの階層を明確にするのに役立ちます。SEO(検索エンジン最適化)においても重要な役割を果たします。

目次

検索に必要な「hタグ」のおさらい

H1タグ

  • 用途: ページの主要なタイトルや最も重要な見出しに使用されます。
  • 推奨: 各ページに1つのH1タグを含めることが推奨されています。これは通常、ページの最も重要なトピックやコンテンツの焦点を示します。サイト名よりも、そのページ固有の内容を反映したタイトルの方が望ましい場合が多いです。

HTML5の場合、<h1>を複数回使用することが認められています。しかし、一方でGoogleは、<h1>タグが複数あることに関して、「どの<h1>要素が本来重要なのかが判断できなくなり、本来の大見出しとしての重要度や価値が薄まる。」と公式に発言しています。つまり、検索エンジンの中でもトップシェアのGoogleに適切にページを認識してもらい、多くのユーザーに情報を発信したいのであれば、大見出しとなる<h1>タグの使用回数は、1ページ毎にひとつに絞る必要があるのです。<h2>以下に関しては複数回使用しても問題はありませんが、階層を意識して、適切に使用するようにしましょう。

titleタグの内容と併せて<h1>タグでも対策キーワードを使用することで、キーワードの重要度もクローラーへ伝わりやすくなります。titleタグは検索結果、<h1>タグはページ内で表示されるものですので、その点に留意して設定する。

<h1>に画像を使用することは基本的に問題ありません。ですが、なるべくテキストで記述するほうがベター。

<h1>に設定するテキストは全角30~60文字程度

H2タグ

  • 用途: セクションの見出しやページ内の主要なポイントを分けるために使用されます。
  • 推奨: H1タグの下にあるメインのセクションタイトルに使用します。ページの主要なサブトピックや、大きなセクションを導入する際に役立ちます。

H3タグ

  • 用途: H2タグで導入されたセクション内のサブセクションのタイトルに使用されます。
  • 推奨: より詳細なポイントやサブトピックを区別するために使用します。H2タグの内容をさらに細かく分ける際に有効です。

H4タグ(およびそれ以下のH5、H6)

  • 用途: より細かいコンテンツの階層や、H3タグで導入されたセクションの中のさらに細かいポイントに使用されます。
  • 推奨: 非常に詳細な情報や追加のサブポイントを整理するために使用します。必要に応じて、より深い階層の情報を整理するためにH5やH6タグも使用できますが、過度に深い階層は避け、コンテンツを分かりやすく保つことが重要です。

一般的なヒント

  • 階層の整合性: H1からH6までのタグは、論理的かつ階層的な順序で使用することが重要です。つまり、H2タグはH1タグの下、H3タグはH2タグの下の階層にあるべきです。
  • キーワードの使用: 見出しには、そのセクションの内容を正確に反映し、必要に応じて重要なキーワードを含めることが重要です。これはSEOにおいても役立ちます。

見出しタグの使用は、ウェブサイトのアクセシビリティとSEOにとって非常に重要です。正しい階層と明確な構造を持つことで、ユーザーにとっても検索エンジンにとっても、コンテンツを理解しやすくなります。

hタグに強調タグを使用すること

hタグはコンテンツの見出しタグなので、コンテンツの本文に使用するタグを併用するのは不適切と言われています。

タグの併用例

<h2>冬は<strong>とても</strong>寒い<h2>このようにテキストを強調するタグ<strong>や、同様に<em>をhタグのテキスト内に使用するのは避けましょう。
また、<strong>タグや<em>タグは使い過ぎるとGoogleからスパム行為と見なされ、ペナルティを受ける場合がありますので、なるべく使用しないように気を付けましょう。

hタグの順番

2018年4月13日のGoogleオフィスアワーで「h1、h2、h3などのhタグの順番が間違っていた場合、問題になるのか?」という質問ができました。それに対してGoogleのジョン・ミュラー氏は「問題にならない。検索エンジンはページの内容を理解するためにhタグを多少は使っているが、必ずしも正しい順番である必要はない。」と答えました。これに対して元Google社員のペドロ・ディアス氏は「GoogleにとってH1, H2, H○などの順番は重要なのか?重要ではない。でもユーザビリティやアクセシビリティにとっては重要だ。なのにどうして修正しないのか?」と述べています。つまり、2人の意見から考えるとユーザーを考慮したサイトを設計することが重要であると言えます。hタグを正しい順番で使うことはSEOの観点からは良いことです。しかし、正しい順番で利用した際にユーザビリティが下がってしまう場合、サイトに訪れるユーザーのことを考えて順番を変更する必要もあります。そのため、ユーザビリティも考慮して設定を行うようにしましょう。

Googleの推奨する適切な<h1>タグ

Googleは検索エンジンスターターガイド内で適切な見出しタグの使い方について説明しています。
Googleの示す<h1>(見出しタグ)についての記述ポイントは下記のとおりです。

  1. ページの構成と関係なく見出しタグでテキストを囲わない
  2. <em>や<strong>が適切な箇所で見出しタグを使用しない
  3. 見出しタグのサイズの使い分けを不規則にしない
  4. ページ内で見出しタグの乱用はしない
  5. ページ内のすべてのテキストを見出しタグで囲わない
  6. 見出しタグをスタイル変更のためだけに使用しない

ブログでの適切なhタグの使用例

<h1>ブログの記事タイトル</h1>
<h2>ブログの記事内で使用する中見出しタグ</h2>
<h3>~<h6>ブログの記事内で使用する小見出し

[cc id=1656]

webコーダー挑戦 Webデザイナ挑戦 コーダー技術MEMO
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • Adobe「After Effect」動画制作
  • 【頭脳】ChatGPT と【技術】DALL-Eでキャラクターを作る 

この記事を書いた人

内田明子のアバター 内田明子

関連記事

  • WordPressサイト自動更新が無効化されている場合の設定を解除する方法とは?
    2025年1月15日
  • LP構成・デザイン
    デザイナー必須「LP」の構成・デザイン① アピス
    2024年6月13日
  • phpからjQueryへ配列データを引き渡す方法【smarty】【Laravel】【javascript】
    2024年6月10日
  • YouTubeのiframeのサイズ調整CSS
    2024年4月15日
  • LINE内で使うアプリ開発のために、LIFFを試す(スターターキットを立ち上げてみる)
    2024年3月14日
  • git管理下でsourcetreeとmonacaを併用してハイブリッドアプリの開発をする【Vue.js】~環境構築とクラウド反映確認~
    2024年3月5日
  • キャラクター制作
    【頭脳】ChatGPT と【技術】DALL-Eでキャラクターを作る 
    2024年2月15日
  • monaca×Vue.jsをローカルでトランスパイルする際、最初にインストールするもの(notエンジニア向け)
    2023年12月26日

コメント

コメントする コメントをキャンセル

カテゴリー

  • ECサイト
  • IT TOOL
  • IT導入補助金
  • monaca
  • PC関連
  • Shopify
  • webコーダー挑戦
  • Webデザイナ挑戦
  • Web制作
  • Wordpress
  • アパレル
  • エクセル・ワード
  • エンジニア技術MEMO
  • お知らせ
  • コーダー技術MEMO
  • スマートガジェット
  • セキュリティ
  • セルフオーダーシステム
  • デザインチーム
  • どこの国
  • ネットで販売
  • ブログ
  • ブログ
  • ブログ収益化
  • プロンプト
  • マーケティング
  • レッスン施術サービス
  • 会議室予約
  • 回線・インターネット
  • 家事代行予約
  • 未分類
  • 業務効率化
  • 画像生成AI
  • 発注・請求システム
  • 社内用
  • 社長
  • 美容院予約
  • 見積
  • 見積
  • 請求
  • 電気自動車(EV)

最近の投稿

  • 100記事書いてもアクセスが増えない?記事リライト後の測定のコツとアクセス数の目安を解説
  • ブログアクセス数が目安に届かない…100記事書いたのにアクセスが増えない人の改善ステップ
  • 100記事書いてもアクセスが増えない?記事リライトのコツとアクセス数の目安を解説
  • 初心者向け:なぜ記事が “表示回数0” のまま放置されるのか?実例で学ぶSEO改善の基本
  • SWELLテーマで埋め込み(oEmbed)がうまくいかない?原因と対処法まとめ

最近のコメント

  1. Elementor Pro ライセンス・更新について に wpmaster より
  2. Elementor Pro ライセンス・更新について に 志村和久 より

アーカイブ

  • 2025年5月
  • 2025年4月
  • 2025年3月
  • 2025年2月
  • 2025年1月
  • 2024年12月
  • 2024年11月
  • 2024年9月
  • 2024年8月
  • 2024年7月
  • 2024年6月
  • 2024年4月
  • 2024年3月
  • 2024年2月
  • 2024年1月
  • 2023年12月
  • 2023年11月
  • 2023年10月
  • 2023年8月
  • 2023年7月
  • 2023年6月
  • 2023年5月
  • 2023年4月
  • 2023年3月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月

APICE

問い合わせ

アピステクノロジー|tec note

  • ホーム
  • エンジニア技術MEMO
  • デザインチーム
    • webコーダー挑戦
    • Webデザイナ挑戦
    • WordPress
    • コーダー技術MEMO
    • デザインチーム
  • IT TOOL
    • ECサイト
    • レッスン施術サービス
    • 美容院予約
    • 会議室予約
    • 家事代行予約
    • 求人サイト
    • 発注・請求システム
  • IT導入補助金
  • 電気自動車(EV)
  • FAQ
  • どこの国
  • 業務効率化
    • 見積
    • 請求

 〒224-0032 神奈川県横浜市都筑区茅ケ崎中央42−21 第2佐藤ビル 203

電話番号: 045-532-4480

お問い合せ

© .

目次