SEOに効果的な見出しタグ(hタグ)の使い方6選・テクニック7選

SEOに効果的な見出しタグ(hタグ)の使い方6選・テクニック7選

「見出しタグ(hタグ)とは?」「見出しタグ(hタグ)はどう使えばいいの」と見出しタグ(hタグ)についての詳細や、その使用方法に関して気になりますよね。

見出しタグは、コンテンツを作成する上で絶対に必要なものです。間違って使用するとSEO効果が低下したり、ユーザービリティにも影響が出てきます。

そこでこのページでは、Web Reach編集部メンバーの筆者が、見出しタグ(hタグ)とは何かを詳しく説明し、以下のことを解説します。

  • 見出しタグ(hタグ)とは?
  • 見出しタグ(hタグ)の正しい使い方6選
  • 効果的な見出しを作成するテクニック7選
  • 見出しをHTML&CSSでデザインする方法
  • 【WordPress】見出しタグで目次を自動生成

このページを読めば、見出しタグ(hタグ)の正しい使用方法や、効果的な見出しをつけられるようになり、Googleから高評価を受けるコンテンツを作成できるようになります。

内容を簡単にまとめると・・・

  • 見出しタグとはコンテンツの見出しを正しく伝えるために用いるタグ
  • 見出しタグは適切に使うことによって、検索エンジンに記事を正当に評価してもらえる
  • つまり、見出しタグを適切に使えるようになるとSEO対策に繋がる
  • SEO対策をしたいという方にはsmartASPという無料のツールがおすすめ
  • smartASPはウェブサイト運営者のために開発された無料ツール
  • smartASPを用いればウェブサイト運営は今より更に効率化される
  • 無料なのでまだ使っていない人は1度使ってみましょう
smartASPの公式サイトはこちら

\今なら完全無料!/

好きなところから読む

見出しタグ(hタグ)とは

見出しタグ(hタグ)とは

まず見出しとは、コンテンツ一つ一つのまとまった内容が一目でわかりやすいように、その内容の前に示す簡単な標題をさします。

そして、見出しは、大きな文字で強調して書かれている場合が多いです。

ここで言うと、「見出しタグ(hタグ)とは」の部分に当たります。

では見出しタグとは何かというと、ユーザーや検索エンジンにコンテンツの見出しを正しく伝えるために用いるタグをさします。

見出しタグの記述には、HTMLが用いられ別名「hタグ」とも言われています。

見出しは、HTMLとCSSを用いることで文字の大きさを変えたり、文字の強調・文字色の変更を行えます。

見出しタグを用いれば、検索エンジンには見出しであるとすぐに伝わりますが、ユーザーには見出しタグ+文字の強調を用いたほうが見出しがより伝わりやすいですね。

CSSで見出しタグのデフォルト設定を決めておくのをおすすめします。

HTMLの見出しタグはh1~h6

HTMLを用いた見出しタグに「h1、h2、h3、h4、h5、h6」の6種類のタグが存在します。

記述方法は以下のようになります。

HTML記述例

<h1>見出しテキスト</h1>

<h2>見出しテキスト</h2>

<h3>見出しテキスト</h3>

<h4>見出しテキスト</h4>

<h5>見出しテキスト</h5>

<h6>見出しテキスト</h6>

<></>の中に、使用したいタグを入れて、間にテキストで見出しを記述します。

数字が小さいものから順番に、重要度が高い見出しになります。

見出しタグを使用することで、文字が大きくなり強調されます。また、検索エンジンに「これは見出しです」ということを伝える手段でもあります。

見出しタグとSEOの関係

見出しタグは、「h1、h2、h3、h4、h5、h6」と6種類ありますが、どれでも好きに使っていいという訳ではありません。

使用する順番が定められており、順番を誤って使用するとSEOに悪い影響を与えます。

しかし、逆にしっかり見出しタグを使用することで、多少はSEO効果の向上を狙えるでしょう。

また、正しい見出しタグの使用方法を守りながらユーザーにわかりやすい見出しを作成することでユーザービリティの向上にも繋がります。

SEO対策を更に行いたいという方は「SEO対策とは?知っておくべきSEO対策を解説」の記事をご覧ください。

ユーザーにとっても有益

見出しタグを使用しなかった場合、ユーザーにとってとても読みづらいコンテンツになってしまいます。

しかし、見出しタグを使用することで、見出しが強調され文章のメリハリや切り替わりがユーザーにわかりやすくなります。

また、見出しタグはそれ自体が目次替わりとなる場合もあります。

見出しタグは、ユーザーにとってもとても有益なものであると言えるでしょう。

見出しタグの具体例

ここでは、見出しタグの具体的な正しい使い方をご紹介します。

HTML記述例

<h1>見出しタグとは?なぜ見出しタグを使用するメリット2つ</h1>

<h2>見出しタグとは?</h2>

<h3>見出しタグを使用するメリット2つ</h3>

<h4>SEO効果に影響がある</h4>

<h4>ユーザービリティが向上する</h4>

<h2>まとめ:見出しタグとは?</h2>

このように、大きい話題には数字の小さい見出しタグを使用して、その下にある小さな話題にはその次の数字の見出しタグを使用するようにしましょう。

また、本格的なSEO対策をしたいという方にはsmartASPという無料のツールがおすすめです。

smartASPはウェブサイト運営者のために開発された無料ツールです。

smartASPを用いればウェブサイト運営は今より更に効率化されることでしょう。

なぜなら、smartASPは客観的な数字を元に修正すべき記事を抽出してくれるため、SEO知識に自信がないという人でも本格的なSEO対策が可能だからです。

また、競合分析も効率化してくれるため、非常に便利です。

無料なのでまだ使っていない人は1度使ってみましょう。

smartASPの公式サイトはこちら

\今なら完全無料!/

見出しタグ(hタグ)の正しい使い方6選

見出しタグ(hタグ)の正しい使い方6選

見出しタグの(hタグ)の具体的な正しい使い方を6選ご紹介します。

これらを守れば、SEOに効果的な見出しを作成できます。

1.見出しタグをh1〜h6で順番に使う

見出しタグは「h1、h2、h3、h4、h5、h6」の順番に使用しましょう。

見出しタグはコンテンツの階層関係を正しく表すために用いられます。

<h1>のあとは<h2>、<h2>の後は<h3>と順番をしっかり守ることで、検索エンジンにコンテンツの階層関係を伝えられます。

しかし、見出しタグの順番を守らないと、検索エンジンに階層関係がおかしいコンテンツとして認識されてしまうため、結果としてSEOの評価が低下する可能性があります。

また、コンテンツを作成する際には、話題の大きいものの下にその話題の詳細を持ってくるように、見出しタグを設定しましょう。

例えば、以下の見出しタグをみてください。

HTML記述例

<h3>美味しい料理の作り方</h3>

<h2>塩は入れすぎない</h2>

「美味しい料理の作り方」の方が話題が大きいですが、「塩は入れすぎない」の方が数字が小さい見出しタグが設定されていますね。

このように、話題が大きいものより、詳細な話題のhタグの数字が小さいと階層関係がおかしくなってしまいますので注意しましょう。

2.見出しタグh1〜h6の意味を理解する

【h1タグに関して】

h1タグは基本的にタイトルと同じで問題ありません。

しかし、基本的に記事の内容部分ではh1タグは使用しません。

WordPressでは、タイトルを入力すると自動的にタイトルにh1タグが使用されるため、意識してh1タグを使用する必要はないです。

【h2タグに関して】

h2タグは、大見出しとして使用されます。

h1タグはタイトルで使用されるため、記事内容では一番初めにh2タグが使用されます。

【h3タグに関して】

h3タグは、中見出しとして使用されます。

h2タグ(中見出し)の次に、h3タグ(小見出し)を使用するようにしましょう。

【h4〜h6タグ】

h4〜h6タグはh3の次に、数の小さいものから順番に使用しましょう。

h4タグを使用することはありますが、コンテンツの構造関係が複雑になってしまう可能性があるため、基本的にh5タグとh6タグは使用しません。

3.h1タグは1回の使用にする

h1タグは記事タイトルで使用されます。

基本的に記事一本につき記事タイトルは一つしか存在しないため、h1タグは1回のみしか使用しません。

しかし、GoogleのJohn Mueller(ジョン・ミューラー)氏がユーザーからの質問に対して以下のように発言しています。

Hello

regarding the use of heading tags: How many h1-tags should be used on a single webpage? Only one? #seo

参照:https://twitter.com/M_Sauermann/status/852105945245261824

こちらは翻訳すると、

見出しタグの使用について:1つのWebページで使用するh1タグはいくつ必要ですか?一つだけですか?

という内容の質問をしています。これに対して、GoogleのJohn Mueller(ジョン・ミューラー)氏は、

As many as you want.

参照:https://twitter.com/JohnMu/status/852131231928135680

好きなだけ。」と回答しています。

この回答に基づくと、h1タグは1度しか使用してはいけないという決まりはないようです。

しかし、h1タグを複数多用すると、Googleにもユーザーにもコンテンツの階層関係が伝わりにくくなってしまいます。

結果として、ユーザーへの伝わりやすさを優先すると、h1タグは一度のみの使用で控えておくのが得策と言えるでしょう。

また、現在検索結果で上位表示されている記事のほとんどがh1タグを一回しか使っていないことから、h1タグの使用は一度のみをおすすめします。

4.見出しタグh1の文字数は32文字に収める

見出しタグh1の文字数は32文字以内に収めましょう。

理由としては、h1タグは記事のタイトルと同じになることが多いからです。

検索一覧に表示される際に、記事のタイトルは32文字までしか表示されない決まりになっているため、32文字以上の場合だと検索一覧でタイトルの文字が切れてしまう恐れがあります。

33文字以降に主要なキーワードを入れている場合、ユーザーがそのキーワードを検索しても、タイトルにキーワードが含まれているのを検索一覧では確認することができません。

万が一、文字数が32文字以上になる場合には、主要なキーワードや関連キーワードができるだけ前の方に持ってくるのが得策ですね。

見出しタグh1の文字数について詳しく知りたい方は「SEOとタイトルの文字数は関係する?」の記事をご覧ください。

5.見出しタグh2〜h6の文字数は20文字以内

h1タグの文字数は、検索一覧への表示を考慮すると32文字以内がベストだとご説明しました。

では、h2〜h6タグの文字数はどれくらいがいいのでしょうか。

h1タグのように、32文字以内というような特定の文字数はありませんが、h2〜h6は20文字前後が妥当と言えるでしょう。

なぜかというと、あまりにも長い見出しを作成してしまうと、見出しのみが目立ってしまいコンテンツ内容が薄れてしまう可能性があります。

また、見出しが長いとユーザーに読みづらい印象を与えてしまったりする可能性もありますね。

h2〜h6タグの見出しの文字数は、ユーザーがパッとみてわかりやすい内容で、20文字前後で収めるのがおすすめです。

6.見出しタグは何回使用してもOK

h1タグに関しては、先ほど何度でも使用してOKと提言されているとご紹介しましたが、結果としては1回のみの使用をおすすめするとご説明しました。

しかし、h2〜h6タグは基本的に、見出しタグの正しい使い方を守って入ればを1記事内で何度でも使用して大丈夫です。

h5タグ、h6タグに関しては、使用すると構造が複雑になってしまう恐れがあるため、あまり使用することはありません。

それ以外のタグは、何度でも使用して問題ないです。

見出しタグを適切に使うことはSEO対策に繋がります。

他にもSEO対策を行い方には無料のSEOツールがおすすめです。

smartASPはウェブサイト運営者のために開発された無料の便利ツールです。

smartASPを使えば、あなたのサイトは以前より更に魅力的なものになるでしょう。

なぜなら、自動でサイト分析をし、修正すべき記事を抽出してくれるだけでなく、SEOで最重要と言っても過言ではない内部リンクを可視化できるからです。

無料なので今すぐ登録しましょう。

smartASPの公式サイトはこちら

\今なら完全無料!/

【発展】その他に見出しタグを使用する方法

【発展】その他見出しタグを使用する方法

見出しタグの(hタグ)の具体的な正しい使い方をご紹介させていただきました。

それ以外にも、上級者向けの見出しタグの使用方法をご紹介します。

見出しタグに画像を使用する

h2〜h6タグで画像を使用するのは基本的にNGです。

しかし、記事タイトルであるh1タグでは画像を使用できます。

h1タグに画像を設定する際は、以下のようにHTMLを記述しましょう。

HTML記述例

<h1><img scr=”webreach.jpg” alt=”WebメディアWebReach”></h1>

scr属性には画像を、alt属性にはWebサイトのタイトルを記入しましょう。

h1タグに画像を設定する際には、必ずalt属性を記入しておく必要があります。

なぜかというと、画像に記事タイトルが記入されていたとしても、検索エンジンは画像の中身の文字までは読み取ってくれないからです。

しかし、alt属性を設定しておくことで、その画像がなんの画像なのかを検索エンジンが読み取ってくれます。

注意点として、SEOに強いサイトではこのように画像をh1タグに使用している例がほとんどないため、特別な理由がない限りは積極的に使用するのはあまりおすすめしません。

altタグについて詳しく知りたい方は「HTMLのaltタグとは?」の記事をご覧ください。

見出しタグにリンクを設定する

見出しタグにはリンクを設定できます。リンクには、HTMLのaタグを使用します。

HTMLで以下のように記述します。

HTML記述例

<h1><a href="https://○○○○.com">見出しテキスト</a></h1>

href属性には、リンク先を設定できます。

注意点として、見出しタグに画像を使用するのと同様に、見出しタグにリンクを使用するのもあまりおすすめしません。

そのため、こういう使用方法もあるというのを、知識として取り入れておくくらいの認識で良いでしょう。

見出しタグのダメな使用例

見出しタグのダメな使用例

見出しタグのダメな使用例を以下の3つでご紹介します。

  • 全て同じ見出しタグを使用している例
  • 見出しタグを順番に使用していない例
  • 見出しタグをh1から使用していない例

見出しタグを正しく使用しないと、SEO評価が低下してしまいます。

全て同じ見出しタグを使用している例

以下の見出しは、全て同じ見出しタグを使用しています。

HTML記述例

<h1>見出しタグとは?なぜ見出しタグを使用するメリット2つ</h1>

<h1>見出しタグとは?</h1>

<h1>見出しタグを使用するメリット2つ</h1>

<h1>SEO効果に影響がある</h1>

<h1>ユーザービリティが向上する</h1>

<h1>まとめ:見出しタグとは?</h1>

全て同じタグを使用するのではなく、話題の大きさごとに見出しタグを使い分けましょう。

見出しタグを順番に使用していない例

以下の見出しは、見出しタグを順番に使用していません。

HTML記述例

<h1>見出しタグとは?なぜ見出しタグを使用するメリット2つ</h1>

<h3>見出しタグとは?</h3>

<h4>見出しタグを使用するメリット2つ</h4>

<h5>SEO効果に影響がある</h4>

<h5>ユーザービリティが向上する</h4>

<h3>まとめ:見出しタグとは?</h3>

コンテンツの内容の見出しがh3タグから始まっています。

正しくはh2タグからですね。

見出しタグの順番はきちんと守って使用しましょう。

見出しタグをh1から使用していない例

以下の見出しは、見出しタグh1から使用されていません。

HTML記述例

<h2>見出しタグとは?なぜ見出しタグを使用するメリット2つ</h2>

<h2>見出しタグとは?</h2>

<h3>見出しタグを使用するメリット2つ</h3>

<h4>SEO効果に影響がある</h4>

<h4>ユーザービリティが向上する</h4>

<h2>まとめ:見出しタグとは?</h2>

h1タグが設定されていないと、Googleに不自然な見出しタグという印象を与えてしまいます。

不自然ということはSEOの観点からみてもよくありません。

きちんと見出しは使えるようになりましょう。

また、他にもSEO対策をしたい方にはsmartASPがおすすめです。

smartASPはSEO対策に欠かせないリライトに関する効率化や内部リンクの可視化などを行うことが出来る無料ツールです。

ここまで便利なのにも関わらず、無料なので使わないてはありません。

今すぐ登録しましょう。

smartASPの公式サイトはこちら

\今なら完全無料!/

効果的な見出しを作成するテクニック7選

効果的な見出しを作成するテクニック7選

ユーザービリティが向上する、効果的な見出しを作成するテクニックを7つご紹介します。

1.見出しだけで内容がわかるように

見出しだけで、コンテンツの中身がわかるようにするのがベターです。ユーザーは、コンテンツの中身を全てじっくり読んでくれるとは限りません。

最近では、PCよりもスマホでネットを見る人が多くなってきています。

スマホは簡単に指でスクロールができるため、コンテンツの中身を目についたものだけ読んで、他は飛ばして読まれる可能性が高いです。

そんな際にも、ユーザーにコンテンツの中身をしっかり読んでもらうために、コンテンツの内容が一目でわかるような見出しを作成するのが重要になってきます。

2.見出しタグだけで文章を構成しない

見出しタグのみでコンテンツの文章を構成してはいけません。

コンテンツの中身は、見出しタグで作成するのではなくpタグというタグを使用します。

pタグの使い方は以下のようになります。

HTML記述例

<h1>見出しタグとは?</h1>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<h1>見出しタグを使用するメリット2つ</h1>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

改行したい際には、新しいpタグで文章を囲みましょう。

このように、コンテンツの文章を作成する際には見出しタグは使用せずに、決まったタグを使用します。

見出しタグのみで、コンテンツを構成してしまうと、検索エンジンより低い評価を受けSEO効果にも悪い影響があります。

また、ユーザーからしても見出しタグのみで構成されている文章は、不信感を与えユーザービリティにも悪い影響を及ぼしますね。

詳しく知りたい方は「SEOライティングとは?」の記事を参考にしてください。

3.見出しの下には文章を入れる

見出しの下には必ず、文章を入れましょう

見出しの役割は、コンテンツの中身をわかりやすく一言でまとめたものになります。

見出しの下に文章がない場合、そこに見出しをつける必要はありませんよね。

見出しばかりが並んでしまうと、ユーザーに読みにくくわかりにくいといった印象を与えてしまう場合があるかもしれません。

見出しの下には必ず1行以上の文章を入れるようにしましょう。

見出しと文章はセットと考えて、コンテンツを作成することでメリハリのある内容になります。

また、見出しの下に文章がないとGoogleに対して不自然な印象を与えてしまいます。

4.見出しに数字を入れる

数字を入れるとユーザーに興味を持たれやすい見出しを作成できます。

下の、数字を使用したものと使用していない見出しを見比べてください。

数字を使用したHTML記述例

<h1>見出しタグとは?なぜ見出しタグを使用するメリット2つ</h1>

<h2>見出しタグとは?</h2>

<h3>見出しタグを使用するメリット2つ</h3>

<h4>1.SEO効果に影響がある</h4>

<h4>2.ユーザービリティが向上する</h4>

<h2>まとめ:見出しタグとは?</h2>

数字を不使用のHTML記述例

<h1>見出しタグとは?なぜ見出しタグを使用するメリット</h1>

<h2>見出しタグとは?</h2>

<h3>見出しタグを使用するメリット</h3>

<h4>SEO効果に影響がある</h4>

<h4>ユーザービリティが向上する</h4>

<h2>まとめ:見出しタグとは?</h2>

数字を使用している見出しの方が、メリットをいくつ教えてくれるのかがタイトルや見出しをみただけですぐにわかりやすいですね。

また、見出しに連番をつけることで、今いくつ目の項目を読んでいるのかをユーザーに把握してもらいやすくなります。

見出しに数字を入れると、ユーザーに興味を持たれやすく読みやすいという印象を与えられるでしょう。

しかし、注意して欲しいのは数字を見出しに入れるのが効果的だからといって多用しすぎることです。

見出し、全てに無理に数字を入れるなど、数字を不自然に乱用しないように気をつけましょう。

5.主要キーワードを先頭に持ってくる

先ほども説明しましたが、ユーザーはスマホでネットを閲覧する際に、大きい文字の最初の2、3語を読み流している場合が多いです。

ユーザーはどれを読むのか読まないのかは、見出しを見て決めています。

そのため、見出しの最初にそのコンテンツ内容の主要なキーワードを持ってきましょう

そうすれば、流し読みしているユーザーが、見出しをみて求めている情報がどこにあるのかを把握してもらいやすくなります。

また、パッと目につくインパクトのあるキーワードを見出しの最初に持ってくると、ユーザーの興味を引ける可能性もありますね。

6.見出しタグにキーワードを詰めすぎない

SEO対策で必要なのがキーワードです。そのため、見出しにはキーワードを用いるのを推奨します。

しかし、見出しにキーワードを入れるのは1~2個までにしましょう。

見出しにキーワードを詰めすぎるのはよくありません。

Googleは記事内にキーワードを詰め込みすぎるとペナルティを受ける可能性があります。

そのため、たとえ検索上位に表示されていたとしてもキーワードを詰め込みすぎているとペナルティを受けて検索順位が一気に低下してしまう恐れがあります。

また、見出しにキーワードを詰め込みすぎると、ユーザーに不快感を与えたり読みにくいと思われる可能性もあるでしょう。

見出しに不自然にキーワードを詰め込みすぎると、検索エンジンからスパムとして認定されてしまう場合もありますのでご注意ください。

見出し1つにつきキーワードは1~2個までです。

7.関連キーワードを含める

見出しには、キーワードを含めるだけでなく、そのキーワードの関連キワードも含めましょう。

例えば、「見出し」というキーワードを用いて記事を作成する場合、関連キーワードは「見出し 意味」や「見出し html」が当てはまります。

関連キーワードの探し方については、関連キーワード取得ツール(仮名・β版)」という関連キーワード取得サイトを活用するのをおすすめします。

狙いたいキーワードを打ち込むと、「Googleサジェスト」と「教えて!goo、Yahoo!知恵袋」より関連するキーワードを一覧で表示してくれます。

ツールなどを使ってキーワードの関連キーワードを探し出し、見出しに関連キーワードも含めてユーザーの興味を引けるようなものにしましょう。

キーワード同様に、同じ関連キーワードを見出しに多用しすぎると、Googleよりペナルティを受ける恐れがあります。

関連キーワードも見出しに詰め込みすぎるのはNGです。

Googleのペナルティについて詳しく知りたい方は「Googleペナルティとは?」の記事をご覧ください。

見出しタグを正しく使用する必要性について

見出しタグを正しく使用する必要性について

見出しタグを使用すると、ユーザーにわかりやすいコンテンツを提供できるだけではなく、検索エンジンにもコンテンツの構造関係を的確に伝えられます。

見出しタグを使用すると、検索エンジンに構造が的確に伝わりインデックスをしてもらいやすくなります。

検索エンジンは、例えばユーザーが「見出し html」というキーワードで検索を行った場合、検索キーワードに関係する記事を的確にユーザーに提供しなければいけません。

では、なぜ検索キーワードに関係する記事を的確に検索エンジンはピックアップできるのかというと、クローラーという情報を収集するロボットを使用して、世界中のサイトをチェックしているからです。

チェックが完了したサイトは、そのサイトの分類やどういった内容のサイトなのかを分析します。

分析の際には、Googleはキーワードと記事の関連性を評価するために見出しタグをかなり重要視しているようです。

そのため、見出しのhタグを的確に使用することは、狙っているキーワードで上位表示するために最重要となるでしょう。

しかし、Googleはタイトルタグ、h1、h2にキーワードが入っているかはかなり見ていますが、上位表示されている記事を分析すると、h3タグ以下にはキーワードが入っているかはあまり重要視されていないと感じています。

分析した結果、そのサイトが「見出し html」であったとしたら、「見出し html」というデータベースにそのサイトの情報が保存されます。

そして、サイトが検索エンジンのデータベースに登録される行為が、先ほど説明したインデックス(index)と言います。

見出しタグは、検索エンジンに正しいコンテンツ内容を認識してもらって、適切にデータベースに保存してもらうためにも、とても重要になってきますので必ず使用するのを推奨します。

インデックスについて詳しく知りたい方は、インデックス登録の確認方法が解説されている「Fetch as Googleの使い方とは?」の記事をご覧ください。

文字数にあったおおよその見出しタグの数

文字数にあったおおよその見出しタグの数

文字数がどれくらいのときに、見出しをいくつ作ればいいのかをご紹介します。

あくまで、目安ですのでこちらの見出しタグの数を厳守する必要はありません。

文字数 h2タグの数 h3・h4タグの数
2000文字  2~3 7
3000文字  3~4 10〜11
4000文字  4~5 13〜14
5000文字  5~6 16〜17

構成を作るのが苦手だという人は、初めはこの表の数通りに見出しタグを作成するといいかもしれませんね。

また、本格的なSEO対策をしたいという方にはsmartASPという無料のツールがおすすめです。

smartASPはウェブサイト運営者のために開発された無料ツールです。

smartASPを用いればウェブサイト運営は今より更に効率化されることでしょう。

なぜなら、smartASPは客観的な数字を元に修正すべき記事を抽出してくれるため、SEO知識に自信がないという人でも本格的なSEO対策が可能だからです。

また、競合分析も効率化してくれるため、非常に便利です。

無料なのでまだ使っていない人は1度使ってみましょう。

smartASPの公式サイトはこちら

\今なら完全無料!/

見出しをHTML&CSSでデザインする方法

見出しをHTML&CSSでデザインする方法

見出しタグは、HTMLとCSSを使用すればデザインを好きに変更できます。

今回は、以下の4つの見出しデザイン変更をご紹介します。

  • 見出し色を変更する方法
  • 見出しに下線をつける方法
  • 見出しに囲いをつける方法
  • 見出しに背景色を設定する方法

見出しの色を変更する

見出しの色を変更する際にはCSSで、「color」を設定する必要があります。

colorには自分の好きなカラーコードを設定しましょう。

HTML記述例

<h2>見出しテキスト</h2>

CSS記述例

h2{

  color: #ffffff;

}

見出しに下線をつける

見出しに下線をつけるにはCSSで、「border-bottom」を設定する必要があります。左から、線の太さ・線の種類・色を順番に設定します。

HTML記述例

<h2>見出しテキスト</h2>

CSS記述例

h2{

  border-bottom: 1px solid #ffffff;

}

見出しに囲いをつける

見出しに下線をつけるにはCSSで、「border」を設定する必要があります。

見出しに下線をつける際と同様に左から、線の太さ・線の種類・色を順番に設定します。

「border-top」とすると、見出しの上に線をつけられます。

「border-left」「border-right」とすると、見出しの左と右にそれぞれ線をつけられます。

HTML記述例

<h2>見出しテキスト</h2>

CSS記述例

h2{

  border: 1px solid #ffffff;

}

見出しに背景色を設定する

見出しに背景色を設定するにはCSSで、「background-color」を設定する必要があります。

background-colorには自分で好きなカラーコードを設定しましょう。

HTML記述例

<h2>見出しテキスト</h2>

CSS記述例

h2{

  background-color: #ffffff;

}

【WordPress】見出しタグで目次を自動生成するには

【WordPress】見出しタグで目次を自動生成

WordPressには、見出しタグを使用して自動で目次を作成してくれる便利なプラグインが存在します。

「Table of Contents Plus」プラグインを使用する

WordPressで、目次を自動作成してくれるプラグインの一つが「Table of Contents Plus」です。

今回は、Table of Contents Plusの使用方法をご紹介します。

「Table of Contents Plus」の設定方法

1.まずは、WordPressの管理画面いにログインしてください。左メニューより「プラグイン」→「新規追加」をクリックします。

2.「Table of Contents Plus」と検索欄に入力し検索します。検索結果に表示された「Table of Contents Plus」をインストールし、有効化ボタンをクリックします。

これで、「Table of Contents Plus」のインストールは完了です。

3.次に「Table of Contents Plus」の設定を行います。管理画面の左メニューより、「設定」→「TOC+」をクリックします。

4.「Table of Contents Plus」の設定画面が表示されます。

基本設定欄にて以下の項目の設定を行います。

・位置

目次が表示される位置を設定できます。こちらは基本的には、デフォルトのままで大丈夫です。

・表示条件

目次が表示される条件を設定できます。「2〜3以上で見出しがあるとき」で設定するのをオススメします。

・以下のコンテンツタイプを自動挿入

目次が表示されるコンテンツタイプを設定できます。「post(記事)」「page(固定ページ)」にチェックを入れましょう。

・見出しテキスト

目次の文言や、目次の非表示・表示の文言などを設定できます。目次の文言を好きに設定してください。必要であれば、その他の設定も行いましょう。

設定方法は以上になります。

記事投稿画面にて、見出しをつけてして記事を作成すると、自動で目次が挿入されています。

WordPressについて詳しく知りたい方は「WordPressとは?」の記事をご覧ください。

まとめ:見出しタグとは

まとめ:見出しタグとは

見出しタグ(hタグ)について解説しましたが、いかがだったでしょうか。

このページの要点は以下になります。

  • 見出しタグ(hタグ)とは、「ユーザーや検索エンジンにコンテンツの見出しを正しく伝えるために用いるタグ」をさす
  • 見出しタグ(hタグ)の正しい使い方は「見出しタグをh1〜h6で順番に使う」「見出しタグh1〜h6の意味を理解する」「h1タグは1回の使用にする」「見出しタグh1の文字数は32文字に収める「見出しタグh2〜h6の文字数は20文字以内「見出しタグは何回使用してもOK」
  • 効果的な見出しを作成するテクニックは、「見出しだけで内容がわかるように」「見出しタグだけで文章を構成しない」「見出しの下には文章を入れる」「見出しに数字を入れる」「主要キーワードを先頭に持ってくる」「見出しタグにキーワードを詰めすぎない」「関連キーワードを含める」
  • 見出しをHTML&CSSでデザインする方法は、CSSで「見出し色を変更にはcolorを設定」「見出しに下線をつけるにはborder-bottomを設定」「見出しに囲いをつけるにはborderを設定」「見出しに背景色を設定するにはbackground-colorを設定」

見出しタグは、記事を上位表示させるために必ず使用する必要があります。

また、見出しタグを用いることでユーザーがコンテンツを見やすく、なりユーザビリティも向上します。

見出しタグを正しく使用すれば、SEO効果も向上するためご紹介した見出しタグの正しい使い方を実践してください。

また、ユーザーの目について読んでもらいやすい見出しを作成する際には、ご紹介したテクニックを実践してくださいね。

見出しタグを正しく使用して、SEOに強いコンテンツを作成してみてください。

また、本格的なSEO対策をしたい方はサイト分析・競合分析などを効率化できる無料ツールsmartASPを活用するのがおすすめです。

無料なので、今すぐ登録しましょう。

smartASPの公式サイトはこちら

\今なら完全無料!/

コメントを残す


CAPTCHA