こんな悶々とした悩みを抱えてる人は多いはず↓
- wordpressで見出しはどのタグがいいの？
- サイト制作の時にhタグってどう使うべき？
- hタグってSEOに関係あるの？
この手の悩みは、一度ポイントをつかめば後は慣れで解決できます。
まずは、
- h1やh2をどのように使うか
- SEOを考えた時に見出しの立ち位置とは？
って観点を知ることが大事ですね。
複数メディアを運営している経験と実績を元に、適切なSEO内部対策を用いた際の肌感を発信中です！
この記事を読むことで、しっくり来てなかったh1やh2の使い方の基本が分かります。
理解することで、より確信犯的にSEOを意識した記事やページを作れるようになりますよ！
それでは見ていきましょう。
SEO上もh1やh2は見出しだという事を忘れずに
SEOの観点でも、h1やh2の重要度は無視できません。
hタグは記事の中で見出しを構成する、html上のマークアップタグになります。
Googleに対してもユーザーにとっても、記事の内容を理解しやすくするために用いるものだということを、しっかり認識しましょう。
hってなんの頭文字？
前から疑問だったんですが、そもそもh1などの頭文字h。
これは何を指しているのか、調べてみました。
「H」とは「Heading」の略で、見出しを意味するタグです。文章の章題や節題を記述し、その見出しの大きさに合わせてh1タグからh6タグまで設定できます。
引用元：https://html-coding.co.jp/annex/dictionary/html/hx/
なるほど。Headingのhだったんですね。
英語でHeadingは、まんま「見出し」を指します。
試しにGoogle翻訳につっこんでみると、そのまま「見出し」と出てきます。
納得です。
正しいh1、h2の使い方
最近のwordpressテーマだと、記事のタイトルがそのまま自動でh1になることが多いですよね。
titleタグとは別に、h1は記事のテーマを表記させるために使用します。
見出しの中でも「大見出し」という扱いですね。
SEOで検索上位を狙う時は、必ずh1の中に狙うべきキーワードを含めましょう。
例えば「ダイエット サプリ 安い」などのワードで記事を書く際には、h1の書き方として、
このような内容になるかと思います。
見出しタグはコンテンツの説明に用います
記事のテーマに沿って書くときに、色々な切り口が出てきます。
先の「ダイエット サプリ 安い」を例に挙げると、
- ダイエットの悩み
- サプリの良さやメリット・デメリット
- 価格の相場
このようなコンテンツが出てくるでしょう。
各コンテンツの説明を担うのが見出しです。
記事のメインテーマにh1を使うとして、各コンテンツの見出しにはh2を使うようにしてみましょう。
h2までしか使用しなくていいの？
SEOコンサルをしていると、
たまにこの質問を受けます。
SEOで大事なことは、ユーザー目線に立つことです。
結局ユーザーの求めている情報を分かりやすく書くことが、Googleの評価＝SEOにつながります。
文章を書く上で、文節や構成の中で細かい見出しが出てくる際は、h2以降の見出しも積極的に利用していきましょう。
h3までは重要度が高いと考えよう
僕の経験上、
- h1=記事のタイトル
- h2＝各コンテンツの見出し
- h3=そのコンテンツ内の小見出し
このような使い方をすると記事も読みやすくなり、SEO上も影響がある気がしています。
仮に「ダイエットにまつわる悩み3選」というコンテンツを書く際には、
- 食事制限がつらい
- 激しい運動はしたくない
- なかなか痩せない
このような内容が出てくるでしょう。
これに当てはめて考えると、
「ダイエットにまつわる悩み3選」＝h2となり、
- 「食事制限がつらい」＝h3
- 「激しい運動はしたくない」＝h3
- 「なかなか痩せない」＝h3
こんな感じになります。
各h3の間には、文章が入りコンテンツを構成しているわけですね。
このことから、h3も重要度が高いと考え、適宜キーワードに沿った文言を盛り込むようにしたほうがいいです。
wordpressの記事内見出しはh2
wordpressでのブログやサイトを見ていると、やはり多くの方が文中のコンテンツ毎の見出しに、h2をよく使われてますね。
先ほどh1が記事のメインの見出しになると書きましたが、それに対してコンテンツ毎の見出しはh2を使って、その後に文章を記載していく形で問題ないと思います。
適宜キーワードは見出しに含める様に意識してみてください。
SEO上h1は1ページに一回
特に駆け出しのコーダーさんや、デザインもしつつマークアップも担当することになったデザイナーさんにとっては、重要な内容がココです。
冒頭でも触れた通り、h1はページを構成するメインのテーマを端的に表す大見出しです。
何度もh1が出てくるということは、何をメインに推したい記事なのか不明瞭になってしまいますよね。
暗黙の了解でもありますが、基本的にh1は一度しか使わない様にしてください。
h2は何度も使用して大丈夫
僕がweb業界で働き始めた10年ほど前は、h2も1ページ内で一回しか使用してはいけないという鉄の掟がありました。
ところが、最近ではh2は何度使用しても、SEO的に大きな問題になることはなさそうです。
実際、有名なブロガーさんやアフィリエイターのソースを見ると、h2が何度も出てきます。
ただし、h2は各コンテンツの説明見出しと言う点を忘れてはいけません。
むやみに使うのではなく、見出しとしての使いどころを考え、適切にコンテンツ毎使うべきですね。
h3でより詳細な解説を
h3はより細分化した文章の説明に使用します。
試しに僕の記事を引きあいに出すと、h2で括るコンテンツは何十行にも渡りますが、h3はそれぞれ5,6行ほどの文章を説明する際に使ってます。
h1からh3までをまとめると、
- h1=大見出し
- h2=見出し
- h3=小見出し
こんなイメージでしょうか。
必然的にh3に近づくにつれて、見出しの文言も解説に寄って行く傾向にありますね。
html5ではsection毎にh1が使用できる？
現在サイト作成に用いるhtmlは、html5が主流となっています。
10年ほど前は確かhtml4.01だったと思うんですが、html5になった事でより簡潔にソースをまとめたり、記述する文字数も少なくなったりしました。
それに伴い、マークアップのガイドラインも変わり、divだけでなくsectionやarticleなども登場したんですよ。
一応のルールとして、sectionの見出しで用いるのなら、h1はページ内で何度も使ってオッケーとなってるんですよ。
これは昔からSEOの知識を磨いてきた人たちにとっては、結構革新的なものでした。
個人的な見解になりますが、それでもh1は1ページ内で一回だけの使用にとどめる方がいいと思います。
なんというか、使いこなすにはそれなりの知識が必要なので、無難に今まで通りの使い方をしている方がSEO上的にもそんなに影響がないんじゃないかと。
触らぬ神に祟りなしってことですね。
h1からh6までは順番に使おう
あまりマークアップに知見が無い方のコーディングしたソースを見ると、h2からh4ぐらいまでの見出しタグがぐちゃぐちゃになってるケースがあります。
サイトの構成上そうせざるを得ない場合ってそんなにないので、単純にその都度文字協調でhタグを使った結果なんじゃないかなと思うわけです。
一応、hタグは1から6まで順番に使用するようにしましょう。
分かりやすく画像で解説していきます。
↑こちらの悪い例では、h1からh3までの順番が適当になってしまっています。
これだと、コンテンツで言いたいことも伝わりづらく、Googleもユーザーも困ってしまいますよね。
↑対して、良い例のように順番に使う事で、コンテンツの内容は明確になります！
Googleの見解では問題ないとのことだが
下記のツイートを見てください。
要はGoogleの公式見解で「別にhタグの順番はseoに影響しないぜ」と言ってるわけです。
確かに上位表示されている記事でも、h2からh4ぐらいまでの順番がおかしいものは多々あります。
じゃあ特に意識しないでつらつらと書いて、その都度hタグを入れてけばいいかというと、僕はそうは思わないですね。
ユーザーのためを考えると自然と順番は整う
何も制約がなければ、きちんと順番通りに使用するのがスタンダードです。
まずは基本をしっかり理解して、その後崩すのはいいと思うんですが、基本をないがしろにするのはおすすめしません。
きちんと順番通りに使用することで、ユーザーにとっては分かりやすい記事になる可能性が高いってことです。
h5、h6はとんとお目にかからない
正直過去のサイト制作や、記事作成の際にh5とかh6って殆ど使った記憶がないですね。
これは多くの人が共感してくれるんじゃないでしょうか。
やはり、メインで使用するのはh2やh3で、h4は稀に使います。
けどh5とかh6って、出てくるまでにコンテンツが完了しちゃうことが多いんですよ。
無理やり盛り込む必要も無いですね。
h1やh2の装飾はフォントサイズに意識を
各hタグも、もちろんcssで装飾が可能です。
色を変えたり、太さを変えたり、サイズを変えたりと思い通りに装飾を施すことができます。
しかし、h1やh2などは見出しだという事をお忘れなく。
10px以下のサイズにしたりするのは、そもそもの使い方に反してる気がします。
普通のpタグでいいじゃない？って感じがするので、見出しとして強調したい内容の方に注力しましょう。
装飾で読みづらくならない様に
cssで各見出しの装飾の色を変更する際に、背景と同化してしまう様なデザインにするのは避けましょう。
見出しは一番目に留まるようにするべきです。
にもかかわらず、白背景なのに白に近い色に装飾するのは、読みづらくなりますよね。
ユーザーの利便性も下がると思いますし、記事の読了率（記事が下部まで読まれる率）が下がる気がします。
装飾しすぎて読みづらい、見づらいとなったら本末転倒なので、ユーザービリティは常に意識するようにしましょう。
<まとめ>SEOでも重要なh1とかh2について
今回はSEO内部対策の基礎でもある、h1やh2の使い方。
その他気を付ける点など解説してみました。
特に業界未経験の方や、これからコーダーとして頑張って行く方には、覚えておいてほしい内容でもあります。
hタグに関しては、口頭で説明されてもイマイチ理解しがたいものだと思います。
適切に使いこなすようになるには、慣れが必要になるので、こればっかりはサイトを幾つも作って身に着ける方が手っ取り早かったりします。
感覚的な部分に左右されるので、慣れてくると自然と「ここはh2にしたいな」とか、「ここはh3が入らないとおかしいな」。
となってくるんですよね。
しっかりマスターすることで、アフィリエイトサイトやブログ、クライアント案件にも活かせるようになりますよ！
今回は以上となります！
