見出しタグって何？WordPress初心者が絶対に知っておくべきh1〜h6の正しい使い方と注意点

みんながやってる見出しを見やすくオシャレな感じにするやつどうやるの？

その疑問は「見出しタグ」を使うことで解決される。見出しタグとはその名の通り「見出しをつくるため」のタグのこと。

具体的にはh1〜h6というHTMLタグを使って表示させることができるようになるよ。

「いきなりよくわからない……」

大丈夫。今から日本一わかりやすいように教えてやる。

ブロガーなのにWEBサイトの構成知らないの？

そもそも我々がプロとしてWEBサイトを使って情報発信している以上、自分の使っている媒体がどういったものなのかぐらいは知っておくべきだ。キミたちは自分のWEBサイト（ホームページやブログサイト）がどのようにしてできているか知っているかな？

ワードのような真っ白いキャンバスに、テキストを打ったり、画像や写真をドラッグ＆ドロップで左にしようか右にしようか、動かして作ってるイメージですかね？

答えはNoだ。ではどうやってできているのかというと、それが『HTML』というWEBサイト構築のための専用言語でできている。

「だからそのHTMLって何よ？」って？

▲これだ。この文字化けのような文字列はきちんと意味のある文法になっていて、これによってキミたちが今まさに読んでいるこのブログも表示されている。

僕の過去記事「ブラウザはクローム一択！おすすめする6つの理由と超絶便利な3つの拡張機能」にならってクロームを使っていることを前提に言うと、このサイトでも自分のブログでもいいから【右クリック】→【ページのソースを表示】とやってみて。それがサイトを構成しているHTMLだ。

まぁ、WEBサイトの制作者でもない限り全て理解できるように覚える必要はないけど、ブロガー、ライターとして知っておくべき部分もある。

それは、Googleのクローラーがこれを読み取っているということ。つまり人間が見ているこのページではなく、さっきのHTMLを読んでどんなサイトなのか判断している。

だから正しいHTMLタグの使い方をしないと、クローラーが「このサイト意味わかんね」ってなる。

＝「これじゃ読者にとってもわかりにくいサイトだな」＝「検索上位に表示させるのやめよ」

って判断にもなりうるわけ。だからブログ記事を書くキミらも知っておかなきゃダメなんだよね。

ブロガーなら絶対に知っておくべき重要な見出しタグ

WEBサイトはHTMLでできている。HTMLを正しく書くことは大事。

ということはご理解いただけたかな？

次は具体的に見出しタグについて話していこう。HTMLには「< >」で括られた「タグ」という概念があって、それぞれが意味を持った役割を果たしている。

今回の見出しタグで言うならば

1. <h1>
2. <h2>
3. <h3>
4. <h4>
5. <h5>
6. <h6>

の6つだ。ちなみに<h7>以降の数字で表すタグは存在せず6までで終わり。

さらに余談だけど、このhは「Heading」の頭文字、つまり「見出し」だ。だからクローラーはこのタグを見つけると「あ、ここに見出しがあるから、ここから新たな章になるんだな」と判断する。

[marker]だから正しい場所に使わないとクローラーに勘違いされるし、逆に見出しのつもりで文字を大きくしただけでは、人間は見出しだと思ってもクローラーには見出しということが伝わらない。[/marker]

これについては次の項目で説明するぞ。

ビジュアルエディタにおける見出しタグの入れ方

初心者ブロガーは9割の人がビジュアルエディタを使うと思う。だからこっちを基準にお話ししていくことにする。

▲投稿画面右上のタブから【ビジュアル】を選べばビジュアルエディタで記事が書ける。いつもの状態ね。

▲WordPressの初期状態では、こんな感じで装飾ボタンが少ない時がある。そんな時は画像のアイコンをクリックすると他のメニューも表示されるよ。

▲ビジュアルエディタでテキストを打ち込む。とりあえずこんな感じでブログを書いていくよね。

▲プレビューで実際の記事ページを確認してみる。当然なんの装飾もなく、このように表示されるだろう。

▲投稿ページに戻り、見出しにしたい文章の段落をクリックしてキャレット（カーソルのことね）を置く。別に文章全体を選択しなくてもOKだよ。

▲メニューの【段落】をクリックすると、プルダウンでメニューが展開されるから【見出し2】をクリック。

▲文字が大きく目立つようになったね。せっかくなので、ここで【テキスト】をクリックして排出されるHTMLを見てみようか。

▲<h2>〜</h2>できちんと括られているのがわかるでしょ？　これが正解。

▲プレビューでも見出しの文章がきちんと表示されている。ちなみに見出しが無機質なのは、キミたちがわかりやすいよう、あえて見出しの装飾を無くしたの。

それについては次を読み進めてね。

▲さきほどの例文と全く同じテキストを下に配置した。【段落】の横に【11pt】と書いてある項目が見えるよね？

これは「文字サイズを11ポイントで表示」という意味。つまりワードやエクセルにもある「フォントサイズ」のことね。

▲試しに見出しにしたい文章を18ptにしてみた。当然テキストが大きくなったから見出しっぽくなったよね。

▲さらに【B】のボタンをクリックしてみる。これは「Bold」の意味で「太字」だ。

▲おー、それっぽくなってきたな。ついでに【U】もクリックしてみる。こっちは「Under」、つまり下線だ。

▲プレビューで記事ページを表示してみる。人間の見た目なら、これはどっちも「見出し」と判断するだろう。

▲ところがHTMLを見てみるとまるっきり違うのがわかるよね？　HTMLがわからなくても単語を見れば意味がなんとなくわかるんじゃないかな？

の文字が確認できるよね。クローラーも当然「あー、なんか字デカくして下線ひいて太字にしてるし、なんか大事なこと言ってるのかな」とは思うけど「見出し」だとは認識しないわけ。

[marker]だから正しい場所に使わないとクローラーに勘違いされるし、逆に見出しのつもりで文字を大きくしただけでは、人間は見出しだと思ってもクローラーには見出しということが伝わらない。（2回目）[/marker]

見出しタグの3つのルールに注意

見出しタグにはh1〜h6までがあるけど、好きに使っていいわけじゃなく、当然いくつかのルールがある。細かすぎる話は割愛して重要な以下の3つの部分だけお話ししよう。

ではいくぞ。

ルールその1 – h1を使えるのは1ページに1度だけ

h1タグはページの最重要部分を表す。HTML5になったことで一応はセクションごとの仕様も認められているけど、プラスに作用することはない。

だから「h1タグは1ページに1ヵ所」と覚えておけばOK。

「わかった。じゃあh2は？」

まぁ、待て。h1についてもう少しだけ話しておくことがある。

ルールその2 – h1タグを使うべき場所を覚えておく

h1タグは1ページ1ヵ所、そして最重要部分。つまりそれはどこのことだと思う？

答えは

だ。当然わかっていたよね？

ってことは……なんて言いたいかわかる？

[marker]サイトのトップページはサイト名がh1、ブログ記事は記事タイトルがh1。つまりキミらが記事を書く時に使うべきタグはh2からってこと。[/marker]

わかるよね？　わかったら次いくぞ。

ルールその3 – デザインで決めずに正しい順番を守る

繰り返すけど見出しタグは1から6まである。1は使わないから使うのは2から6だよね。

1は1ページ1つだったけど、2以降は何度使っても問題ない。じゃあ好きに使っていいのかというと当然そうじゃない。

覚えておくのは入れ子として階層を持たせて使うこと。この記事のここまでの見出しを見てみようか。

こんな感じになってるよね。使ってるタグは

です。

意味わかるよね？

見出しの効果的な使い方？よく聞く情報を鵜呑みにしすぎない

見出しタグの使い方はわかったかな？

最後はタグではなく、実際に入力する文字の話だ。これについてSEO的に有効だとよく言われるのが「見出しにキーワードを含める」ということ。

ただし、これについては考えることを放棄した連中が、こぞって無理矢理かつ不自然にキーワードを入れまくったことでグーグルが対策をしてきているように思う。

もちろんこれは僕の推測で確実ではない。

だが、過去に「有効」と言われたSEOは、やりすぎたキーワードの羅列（なんか記事の下に関係ないキーワードめっちゃ羅列するやつわかる？メルカリとかであるよね）や、外部からの被リンクを得るために適当なサイト作って、上位にさせたいサイトのURL貼りまくるということを、考えることを放棄した連中がやりまくったおかげで今は完全にブラックとなっている。

そもそも僕からすれば手段に対して「これはブラック」、「これはホワイト」と考えること自体が不毛なのだ。読むのは読者、読者にとって有益（わかりやすい・面白い・共感するなど）かどうかが全てだ。

もちろんキーワードを入れることが意味ない、もしくはダメだと言ってるわけじゃないから極端に考えないでほしい。見出しにキーワードを入れることはクローラーが「この記事は何について書かれた記事なのか」を判断するために重要な要素だ。

だからキーワードは入れるべき。だが、あくまでも自然にだ。

SEO対策（検索上位にヒットさせる）のためだけにキーワードを見出しに無理矢理突っ込むなんてバカげてる。例えば有名なまとめサイト「NAVERまとめ」、SEOに強く検索で上位ヒットしまくるよね？

NAVERまとめの記事には見出しっぽいテキストはあるけど見出しタグは使われていない。さっきのように「ぽく」字を大きくデザインしてるだけだ。

それでも上位ヒットする。つまりそういうことだ。

ぶっちゃけHTMLの文法は間違っててもSEOにはほとんど影響しない

おい……、

と思った？　「ここまできてそれかよ！」的な。

それでもなぜ正しいタグの使い方を教えるのかというと、「キミらも僕もプロだから、またはプロを目指すんだから」ってこと。「ブログでのマーケティング教えます。でも正しいブログの書き方は知りません」じゃ説得力ないでしょ？

それにSEOには影響なくても、読者にとっては読みやすさが違かったり、過去記事「WordPressブログに目次が欲しい！その悩みはプラグイン『Table of Contents Plus』を入れれば解決する」で紹介した目次生成プラグインで目次を記事内に作るときも、見出しタグで括られたテキストがそのまま目次になるから、見出しタグを使ってなければ目次は表示されない。

繰り返すけど「SEO的に有効かどうか」だけで判断すること自体がおかしい。その記事書いた目的は「検索上位ヒットさせること」なの？

読者の悩みを解決する。読者を救うことが目的だよね。読者のためだけ考えてればおのずと検索上位ヒットするから。

それがSEOの本質。ビジネスも一緒だよ。

これ読んで「なぁーんだ、SEO関係ないんだったら別に無理して覚えなくても適当でいいやー」って思うなら、起業してダンディなビジネスマン目指すなんて辞めちまえって感じ。

逆に少しでもためになったのなら、読者に、お客さんに、寄り添ったブログを書いて是非とも僕に教えておくれ。

それではまた。

銀河へのお問い合わせや質問はこちらからどうぞ