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,870円(税込)

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

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

1,920円(税込)

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

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

1,738円(税込)

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

10年つかえるSEOの基本

1,628円(税込)

10年つかえるSEOの基本

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

1,540円(税込)

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

SEO titleとhの関連ページ

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

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

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

SEOキーワード選定

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

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

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

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

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

GTM イベントトラッキング

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

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

OGP設定

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

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

リンク構造

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

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

GA4カスタムイベント

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

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

Googleアップデート対策

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

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

GTMの導入

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

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

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

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

jquery-match-height.js
1位

jquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

SEL50F18F
2位

SEL50F18F

ソニーの単焦点レンズSEL50F18Fを愛用しています。コスパに優れた単焦点レンズで、F値の開放が1.8と明るく撮れるレンズです。

Kazakiri 1枚刃のカミソリ
3位

Kazakiri 1枚刃のカミソリ

カミソリの替刃の価格が高すぎるので1枚当たり11円で使える片刃のカミソリを購入しました! 切れ味抜群でヒゲソリが楽しい!

千鳥ヶ淵夜桜
4位

千鳥ヶ淵夜桜

2019年4月3日に九段下は千鳥ヶ淵の夜桜撮影をα7Ⅲでしてきました。往路は広角レンズSEL24F14GMで復路は単焦点レンズSEL50F18Fにて。

PHPで作るカレンダー
5位

PHPで作るカレンダー

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

ノートPCスタンド
6位

ノートPCスタンド

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

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

MusicBeeのレイアウト変更方法

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

レンズ比較
8位

レンズ比較

「ズームレンズ SEL2870」「単焦点レンズ SEL50F18F」「マクロレンズ SEL50M28」の比較検証をしました

車用スマホホルダー
9位

車用スマホホルダー

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

α7Ⅲで夜景
10位

α7Ⅲで夜景

去年はPENTAX Q7で撮影してきた東京タワーと浅草に今年も夜桜撮影に行ってきました。買ったばかりのソニー α7Ⅲを片手に。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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

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

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

3,278
(税込)