HTMLの論理構造から考える titleタグとhタグの使い方

HTMLの論理構造から考える titleタグとhタグの使い方

SEOで重要なtitleタグとhタグの使い方

#113 SEO titleとh

WEB制作

HTMLのタグにはそれぞれ意味があって、それに合ったタグの使い方をするのが望ましいです。 Hタグは「Heading」の略で見出しという意味です。HタグにはH1~H6までの重みの違うタグがあります。 SEO的にもユーザ的にもわかりやすい使い方重要

公開日:
最終更新日:

サイトマップサイトマップ

SEOに強い内部構造 HTMLの作り方 title Hタグ編

SEOに強いに内部構造について書きます。

HTMLの構文や、OGPタグなどのSNSに対しての設定方法など、直接的なSEOとPVをあげるためにやっておくべきことなどをまとめて記事にしていきます。
今回はその中からTitleタグとHタグについてを記します。

※この記事で書かれている内容は、すべて私の主観で書かれています。
書いたことがすべて正しいということはありませんが、私はこのやり方でやっております。

タイトルタグ

前書き SEO内部構造についての考え 私感

SEOと一言に言っても、影響を及ぼす要素は200以上あると言われております。
私の勝手な考えなのですが、HTMLの構造というのは、基本を押さえておけば、ライバルサイトと差が出るというものではなく、やっておかなくてはならないものだと思っています。

簡単に言うと、HTML構造はSEOにおいて、加点要素ではなく、減点要素であると。

ちゃんとした作りで作ることで、ほかのサイトと比べてマイナスにならない要素。
もっとも、HTML LINTで100点を取らなきゃいけいないという厳格なレベルの話ではないです。

HTML LINTというはHTMLの文法をチェックしてくれるサイトです。

読み込み中

どこで差がつくかと言えば、抽象的な言い方になりますが、サイトの内容である。と、言いたいんですけどね。

2019年のGoogleのUPデートを見ると、今までにない順位変動を繰り返し、サイトの内容ではなく、見えない別のアルゴリズムによる変動がうかがえます。

どう考えても中身がないサイトが上位にいることもしばしば見受けられれますが、そういったサイトの上位表示は一過性のもので、徐々にあるべき場所に落ち着くと思います。

どうかそうあってください。

タイトルタグ

SEOの基本中の基本 Titleタグ

これはわざわざ書く必要もない内容ですが、避けて通るわけにもいかんのでさらっと書きます。

TITLEタグは記事に書かれている「主題」とGoogleで検索されたいキーワードを入れます。
ターゲットキーワードほど左側に書くと良いとされていますが、そこまで気にしなくてもいいんじゃないかと思っています。

1位になっているキーワードのタイトルの左側が、必ずしもそのワードではないので、タイトルタグに入っていればOKです。

文字数は32文字以内がいいと言われています。
長すぎると省略されて表示されるので、文字数を多くしすぎない、その上限が32文字程度という理由です。

私のサイトはタイトルの後に固定で「|Start Point」 と入れているのですが、これは省力されてもいいので、表示させたいタイトルの文字数を32文字以内で書くようにしています。
サイト名を含めると32文字超えています。ペナルティを受けてはいないので、32文字を多少超えても問題ありません。

TITLEタグは勝手に改変されることがある

Googleの検索結果の表示上、こちらがつけたタイトルじゃないものに改変される場合があります。

アナリティクス
<title>とは違うタイトルが表示される場合もある

検索ワードは「日本地図 覚え方」
titleタグは「日本地図を4つのポイントで簡単暗記! 47都道府県の地方別暗記法| Start Point」となっていますが、Googleの検索結果に表示されているのは、
日本地図覚え方 47都道府県を地方別に簡単に暗記するコツと方法。

このワードはどこから出てきたと言うと、descriptionタグに書かれた内容か、本文中に書かれた内容のどちらかをベースに、検索ワードが頭についてます。

改変されたからどうということはないんですが、そういうこともあるという情報でした。

Hタグについて H1 H2 H3 H4

Hタグは見出しに使うタグです。「Heading」という意味で、文字通り「見出し」を意味します。

アナリティクス
headingが見出しというエビデンス

念のためGoogle翻訳で調べたので間違いないです。

HタグにはH1~H6までの6種類がありますが、H1~H4くらいまでしか使いません。

HTMLコーディングにおいて、Hタグ、とくにH1タグにロゴなどの画像を入れて使うのは是か非かという議論が起きるのですが、個人的には「非」だと思ってます。

画像にHタグを使うのはもったいない imgタグにHを使わない理由

HTMLの文法がどうかというより、SEO的にもったいないと思うからです。
画像で書かれた内容はGoogleは認識しません。(2019年12月現在)
ALTタグで文字として読み取ってくれますが、ロゴがH1っていうのがそもそもおかしいと思ってます。

サイト名で順位上げたければ、Titleタグの最後にサイト名入れておけば、競合次第ですが勝手に上位表示されます。
わざわざHタグで囲う必要がないわけです。

ブログだろうと、LPだろうと、Hタグには文字で書かれた見出しを入れるべきだと思っております。

HタグとPタグをセットで使う

私はHタグを使う時は必ずPタグをセットにしています。
H1でもH2でも必ずPタグをHタグの下にいれます。

Hタグは見出しなら、それを説明する文章が必要だという我流の解釈です。

ちなみに「Pタグ」はparagraph(パラグラフ)で段落、という意味です。
改行が入る便利なタグ、という使い方は根本的に間違っていますのでご注意ください。

文字間の調整や、隙間を作りたいときはCSSで調整してください。

H1タグの使い方 ページ上部に1回

H1タグの使える回数についても議論があって、昔は1ページ1回と言われていたのですが、何回使っても大丈夫です。
私は1回しか使いませんが。

SEO上、H1タグは昔ほど重要視されなくなったといいますが、少しでも上位表示される可能性をあげたいじゃないですか。
なので、昔ながらの製法でページの上部に1回だけ使うようにしてます。

あとはCSSでH1の見た目を固定しているので、1回だけが都合が良いという理由もありますが。

H1タグを小さく使うのが嫌い

ページの上部にちっちゃくSEO用にH1タグでテキストが表示されるサイトが昔はよくあったんですよね。今はどうなのしらないけど。

H1タグはそのページの主題が書かれるべきなタグなので、それがすげー小さい文字っていうのが昔から嫌いで、私は目立つところにドーンと置いてます。

アナリティクス
H1はページ上部に1回

これは個人の好みなので、H1タグをの文字を大きくする方が効果的、という話ではありません。

TITLEタグとは別のキーワードや言い回しを使う

H1タグには、TITLEタグで書けなかったキーワードや、補足的な内容、共起語などを入れるようにしています。

最近のGoogleは、検索意図や検索ワードから類推される言葉を勝手に補完してくれるので、書かれていない言葉でも検索結果として表示してくれるケースもあるのですが、基本的にページ内に書かれていない言葉は検索結果に引っ掛かりません。

なるべく多くのワードで検索結果に表示されるようにタイトルタグとは別のワードを入れています。

H2タグの使い方 文中の見出し

H2タグは記事内の見出しとして使います。
回数などの制限は特にないので、好きなように使ってください。

個人的にはここでもimgタグで囲ったりはしません。理由はH1タグと同様です。

アナリティクス
見出しには語る内容の方向性を書く

H2は文中で語る内容の見出しに使います。
可能な限り検索にひっかけたいキーワードをいれつつ、見出しとしてふさわしい内容で書くようにしています。

正直、記事を書いている段階ではそこまでターゲットキーワードというものを意識してないので、キーワードよりも伝えたいことを優先して書いています。

キーワードだからと入れまくるとうっとうしくなる

この記事は「SEO 内部構造 HTML Hタグ Titleタグ」とかそういったキーワードで上位表示されればいいなぁと思って書いてます。
これを見出しタグに必ず入れるように書くと、同じような言葉がなんども出てくるので、嫌なんですよね。

ターゲットワードが入っていないのはダメですが、何度も書けばいいわけじゃないので、入れすぎないようにしましょう。

H3 H4 はH2に関連した内容につかう

Hタグは数字に応じた相関関係があるので、タイトル>H1>H2>H3>H4 という流れで使います。
H2タグで書いた内容の深堀がH3、さらに書きたいことはH4(あまりH4は使いませんが)という使い分け。

語る内容が変わるときはH2に戻って文脈が変わることを明示するという使いかたです。

H2の話の流れで、どんどん深くなっていくようだったらH3、H4、H5、H6と続けて問題ありませんが、H7以降はタグがないのでNGです。

Hタグの装飾について

見た目のデザインとかは、基本的にどんな風にしても問題ありませんが、CSSを適用しない状態のHタグは、見出しにふさわしく「太字」でHの数が少ないものほど文字が大きく設定されています。

HTMLには論理的な意味が備わっているので、それに大幅に相反するような使い方はしない方が無難です。

太字を通常のウェイトにしたらNGとかではなく、H2よりもH3の方が文字が大きい、Hタグが見えないくらい小さい(これは別の問題なんですが)などは控えたほうが良いです。

SEO上というよりも、ユーザに与える影響の問題です。
H3よりもH2の方が重要度が高い情報なのに、H3の方が文字が大きい、目立つ、だと論理構造の主従関係が逆転してしまうため。

私はH2を使う場合は、話の方向が変わるので、H2には罫線を入れて今までとは違う話をするよ、と言うことを意図して装飾しています。

H3は太字なだけで罫線は入れていません。H2の続きの内容であることを暗喩しているつもりでそうしています。
その意図が伝わっているかどうかわからないけども。

アナリティクス
装飾方法にも書き手の意図が入ってる

HタグとTitleタグについてのまとめ

Titleタグは記事の中に入ると見えないのであまり意識しなくなりますが、検索結果(SERPsと呼びます:Search Engine Result Pages)に一番目立って表示されます。

検索順位に影響も大きいタグですが、その文字をみてクリックされるかどうかのCTR(クリック率:Click Through Rate)への影響も大きいのでなかなか悩ましいタグです。

クリックしたくなるキャッチーなワードを入れたい反面、検索されるワードも入れないといけいないというジレンマがありますよね。文字数も限られてますし。

Hタグは自由度が高いのですが、SERPsにはあまり影響がなく、SEO的な効果を優先しがちなんです。
SEOキーワードにとらわれすぎると記事自体のよみやすさが損なわれるので、これもさじ加減が難しいところです。

Googleの指針は今も昔も、ユーザーに有益な情報を書けと言っていますので、迷ったときは、自分が検索ユーザーになって、その目線でどんな見出しだったら読みやすく、納得できるかを優先するのが最善だと私は信じています。

次はパンくずリストとサイトマップについてを書きます!

記事内で紹介している商品リスト
(価格はAmazon参考価格)

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)

3,278円(税込)

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)

UP-BLOG 申込みが止まらないブログの作り方 (マーチャントブックス)

2,585円(税込)

UP-BLOG 申込みが止まらないブログの作り方 (マーチャントブックス)

これからのSEO内部対策 本格講座

1,980円(税込)

これからのSEO内部対策 本格講座

Webプロジェクトを成功に導く 戦略的SEO思考

1,980円(税込)

Webプロジェクトを成功に導く 戦略的SEO思考

いちばんやさしい新しいSEOの教本 第2版 人気講師が教える検索に強いサイトの作り方[MFI対応] (「いちばんやさしい教本」シリーズ)

1,738円(税込)

いちばんやさしい新しいSEOの教本 第2版 人気講師が教える検索に強いサイトの作り方[MFI対応] (「いちばんやさしい教本」シリーズ)

10年つかえるSEOの基本

1,628円(税込)

10年つかえるSEOの基本

文芸オタクの私が教える バズる文章教室 (サンクチュアリ出版)

1,540円(税込)

文芸オタクの私が教える バズる文章教室 (サンクチュアリ出版)

SEO titleとhの関連ページ

GA4カスタムイベント

GA4 GTMを使ったカスタムイベントの設定方法

GA4のカスタムイベントをGTMを使い設定する方法です。 イベント、パラメータ、カスタムディメンションの解説記事です。

GTM イベントトラッキング

GTMを使ってイベント計測を簡単に行う方法

グーグルタグマネージャーを使ってイベントトラッキングを計測する方法の手順を解説。何がクリックされたかを知ることは大事です

カノニカルとリダイレクト

SEOの必須項目 カノニカル設定とリダイレクト設定

URLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定です

リンク構造

ブログのアクセスアップに欠かせないSEO的リンク構造の考え方

SEOのリンク構造を効果的に作るための情報をまとめました。 可能な限り情報の出どころのリンクも用意しております。

SEOキーワード選定

SEO キーワード選定の方法を考察してみた

SEOは結構頑張っていますが、キーワード選定という手法をあまり深く考えたことがなかったので深く考えてみました。

構造化データとパンくずリスト

構造化データで作るパンくずリストとSEO

SEO上必須ともいえる構造化データ化されたパンくずリストの解説と、ユーザー目線で考えるパンくずリストの価値について

GTMの導入

グーグルタグマネージャーの導入手順とメリットについて

Google Tag Manager 通称「GTM」と呼ばれる無料で使えるタグを管理するツールの説明と導入手順の解説

Googleアップデート対策

Googleコアアップデートで順位が下がったときにやるべきこと

Googleのアルゴリズム変更によるGoogleコアアップデートでSERPsの順位変動が起きたときにやったこと

OGP設定

OGP設定をしてSNSからの流入とCTRを改善する

シェアするとき、シェアしてもらうときに最適な形で紹介したいとなるとOGP設定をしっかり設定することが重要です

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

SVG背景
1位

SVG背景

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

カレンダー
2位

カレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

ノートPCスタンド
3位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

MusicBeeのレイアウト変更方法
4位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

カー用品
5位

カー用品

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

AM-AX1800HP
6位

AM-AX1800HP

Wifi6は今後スタンダードになるので先行投資で導入しましたが、速度改善の効果が皆無でちょっとしょんぼりです。

ロジクール マウス
7位

ロジクール マウス

PCを操作するのに必要なマウス。高級品でも安いマウスでも操作をするという点においては大差はありません。違いがあるのは操作に対する満足感。

ツタヤディスカス
8位

ツタヤディスカス

定額レンタル宅配CD・DVDサービスのツタヤディスカスを利用してみました。 1ヵ月で20枚レンタルしました!1枚93円!

c920n
9位

c920n

ロジクールの評判の良かったWEBカメラ「c920n」を購入し、ノートPCとデスクトップの両方で使えるようにしました!

MusiceBee
10位

MusiceBee

PCで音楽の再生と管理をするならiTunseよりもMusicBeeがオススメです。軽くて早くて便利で使いやすい。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)

3,278
(税込)