hタグのSEO効果がある使い方【h1~h6見出しタグを最適化】

こんぺい

はいどーもーこんぺいです。
ブログ記事の見出しをつけるとき、どのhタグを使えばいいかいつも迷うんですよねぇ。

師匠

見出しタグは正しく使わへんかったらSEOに不利じゃし、なによりユーザーが「読みにくい」と感じてしまうゾ。

こんぺい

実は、今まで見出しってあんまり気にしてなかったんで正しい使い方がわからないです。
そこで師匠に相談なんですけど、どうでしょうか?ボクにおしえてみませんか?

師匠

頼み方がちょっと気になるが、まぁええじゃろ。SEO効果がある正しい見出しタグの使い方をおしえてやろ。
あと、CSSのコピペで見出しのデザインをおしゃれにできるコードをたくさん紹介してるサイトもおしえてやろう!

こんぺい

あざっす!そうと決まれば早く教えやがれー!

 

この記事でわかること

hタグの使いかと使い分けのルール
おしゃれでかわいいhタグのデザインにできるサイト

 

 

内部SEO対策の記事で見出しタグについても解説しています。

ホワイトハットSEO戦略とは?すぐに実践できるSEOテクニックを解説

 

hタグのSEO効果がある使い方

hタグとは、記事のテーマを検索エンジンとユーザーにHTMLでマークアップするタグのことです。

見出しタグともよばれて、<h1>~<h6>であらわします。

そして、hタグにはGoogleが推奨する正しい使い方がありまして、正しく使うとSEO対策の効果があります。

なにより、hタグを正しく使ってわかりやすいコンテンツを作ることは、ユーザーの利便性を向上させられるので、Googleが掲げる『ユーザーファースト』もしっかり満たせます。

それでは1つずつ見ていきましょう。

 

hタグは順番どおりに使う

hタグにはh1~h6まであって、

  • h1…大見出し(記事タイトル)
  • h2…中見出し
  • h3…小見出し
  • h4~h5…さらに細かい見出し(僕はほとんど使わない)

 

となっていて、記事本文で使うのは主にh2とh3です。ボクはh4からあとのタグはほぼ使いません。ま、この辺は好みですね。

hタグの使い方は、h2の中にh3を2つ以上作る『入れ子』のような構成で、順番も数字の若い順に使うのがSEOの正解。

h3の中にh2を入れたり、h2の中にh4を入れるのは✖。

また、h2の中にh3が1つという構成も✖で、その場合はh2を2つ設置してください。

 

h1タグの使い方

h1タグは記事タイトルにしか使わないので、基本的には1記事1回しか使いません。

HTML5では、h1タグを複数回つかえる仕様にはなってはいますが、h1を何回もつかうメリットはSEO的にないし、なにより不自然です。

また、パンくずリストにh1タグを使うのもNG。

 

h2タグの使い方

Googleクローラーはh2タグで記事の内容を読み取ります。

ですので、h2タグには狙っているキーワードを入れてやるとSEOがかかりますが、キーワードによっては入れにくい場合があるので、その場合は無理に入れなくてもOK。

h2タグにキーワードを入れにくいときは、その見出しの本文に入れるといいですよ。

たまに不自然にキーワードが入った見出しを見かけますが、やりすぎはGoogleペナルティの対象になります。

また、記事の一番初めにつかうh2には記事タイトルで狙うキーワードと同じキーワードを入れることも重要。
そうすることでGoogleクローラーに何について書いた記事なのか伝えられます。

 

h3タグの使い方

h3タグはh2タグの中に入れ子のようにして使うの基本です。h3だけといった、単体使いはしません。

また、サイトのサイドバーと記事下のメニューにはh3が使われています。

 

hタグに画像はOK

hタグに画像をつかうとよくないと言われていた時期もありましが、その理由はの検索エンジンが『alt』を読めないからでした。(もちろん今は読めます)

ですので今は画像に対してh1~h6をつかっても全然OK。テキストはaltに記入します。

とはいえ、画像が多くなりすぎると表示速度が遅くなるし、メンテナンスのことを考えれば見出しはテキストだけで作るのがいいかな、と。

 

hタグを装飾目的で使わない

h1からh6の順番に文字の大きさが小さくなっていきます。

たまに見出しを大きくしたり小さくしたりすることを目的に見出しタグを使っているのを見かけますが、これは完全にNG。

見出しはそのセクションを要約した内容でないといけないので、違う使い方をするのはGoogleウェブマスター向けガイドラインに違反します。

 

hタグの中にdivはいれない

hタグはブロック要素になるので、divが入ると不自然になります。

見出しの文字の色や大きさを変えたい場合は『span』を使のが正解。

CSSでspanをブロック要素にかえてしまうのもアリ。

ブロック要素を入れるならdivよりブロック要素にしたspanが自然なカタチです。

 

hタグを太字にするのに<strong>は使わない

見出しの文字を太字にするときは<span>を使うのが正解。

hタグの中の太字にしたい文字を選択して、テキストエディタにある『b』ボタンでspanの太字にすることができます。

ちなみに、spanもstrongも同じ太字ですが意味がちがっていて、

span→装飾として強調
strong→言葉の意味を強調

という使い分けが正解。この使い分けは、僕もこのあいだ知ったばかりです(笑)

 

hタグの改行

hタグは改行させないほうがいいと言う人もいますが、SEOの視点で見るとどちらでも問題ありません。

ただし、見出しが長くて改行が入っているとユーザーは読みにくです。

ですので、見出しを見るだけでそのセクションの内容がわかる、端的なものがGOOD。

 

1つのhタグに書く文字数は200~300文字

文字数には決まりはありませんが、読みやすさと視認性が高いのは200~300文字です。

1つの見出しに書きすぎても読みにくいし、少なすぎても見ずらくなります。

また、はじめに記事の目次を見るユーザーは多いので、200~300文字の見出しをたくさん作ってやることがユーザーの利便性アップにもつながります。

 

hタグのリンク指定

ブロック要素のhタグの中にインライン要素のaタグを入れて、hタグの子要素としてリンクしてすることができます。

Googleウェブマスターガイドにも、

  • 簡潔なテキスト
  • わかりやすいテキスト
  • 見つけやすいリンクの書式

ならリンク設定OKとなっているので間違いありません。

 

 

hタグのデザインをおしゃれにできる見本サイト

ブログ・サイトのテーマにあったカラーやデザインの見出しを使ってパッと見た時の印象をよくしてやると、ユーザーの離脱率を下げることができます。

てことで、CSSのコピペでカンタンにデザインを変えられるコードを掲載しているサイトをいくつかご紹介します。

 

サルワカ

 

Webデザインに必要なプログラミングを学習できるサイトで、見出しだけではなくサイト全体をカスタマイズするための色々なコードが掲載されています。

どれもコピペでカンタンに使えるようになっているので僕もよくお世話になっているサイトです。

 

侍エンジニア塾

 

プログラミン入門者向けの学習情報サイトなので、すこし変わったスタイリッシュな見出しがたくさんあります。

 

NxWorld

よく見かけるシンプルな見出しから、吹き出し風・リボン風・手書き風といったおしゃれなものまでたくさん取り揃えられてます。

色々なデザインの見出しを試してみて、「シンプルなデザインが一番おしゃれ」ということに気づきました(*’v`丱)☆+゜

 

第0版

花柄・ストライプ・水玉といった、女性にピッタリなかわいいデザインの見出しがたくさんあります。

 

まとめ

まとめ

hタグを正しく使って最適化すると、

・ユーザーの利便性を高める
・SEOの効果がある

見出しのデザインもユーザーにとって重要

 

昔にくらべてhタグのSEO効果はすくなくなっていると言われていますが、内部SEO対策はこのようなことの積み重ねですので、この機会に正しい見出しタグの使い方をマスターしましょう。

ということで、最後までありがとうございました(人∀`●)