MENU
  • IT・ガジェット
    • レビュー
    • カメラ
  • WEB制作
    • WordPress
      • テーマ
      • プラグイン
    • ブログ
      • ライティング
  • エンタメ
    • ゲーム
      • Final Fantasy 8
    • 映画・ドラマ
    • 本・書籍
    • 音楽
  • ダンディズム
    • ファッション
      • アイテム・名品
    • アウトドア
    • スポーツ
    • 言語
      • 英語
    • 健康・筋トレ
    • 夢・目標
  • ビジネス
    • 仕事術
    • 副業
      • BUYMA
    • お金
      • クレジットカード
  • 旅
    • グルメ
    • ホテル・旅館
    • 観光名所・自然
  • 静岡創生
ダンディになりたい新設社長銀河のブログ
Dandyism Online
  • IT・ガジェット
    • レビュー
    • カメラ
  • WEB制作
    • WordPress
      • テーマ
      • プラグイン
    • ブログ
      • ライティング
  • エンタメ
    • ゲーム
      • Final Fantasy 8
    • 映画・ドラマ
    • 本・書籍
    • 音楽
  • ダンディズム
    • ファッション
      • アイテム・名品
    • アウトドア
    • スポーツ
    • 言語
      • 英語
    • 健康・筋トレ
    • 夢・目標
  • ビジネス
    • 仕事術
    • 副業
      • BUYMA
    • お金
      • クレジットカード
  • 旅
    • グルメ
    • ホテル・旅館
    • 観光名所・自然
  • 静岡創生
Dandyism Online
  • IT・ガジェット
    • レビュー
    • カメラ
  • WEB制作
    • WordPress
      • テーマ
      • プラグイン
    • ブログ
      • ライティング
  • エンタメ
    • ゲーム
      • Final Fantasy 8
    • 映画・ドラマ
    • 本・書籍
    • 音楽
  • ダンディズム
    • ファッション
      • アイテム・名品
    • アウトドア
    • スポーツ
    • 言語
      • 英語
    • 健康・筋トレ
    • 夢・目標
  • ビジネス
    • 仕事術
    • 副業
      • BUYMA
    • お金
      • クレジットカード
  • 旅
    • グルメ
    • ホテル・旅館
    • 観光名所・自然
  • 静岡創生
  1. ホーム
  2. WEB制作
  3. WordPress
  4. 見出しタグって何?WordPress初心者が絶対に知っておくべきh1〜h6の正しい使い方と注意点

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

2018 7/28
WEB制作 WordPress
SEO SEO対策 ブログの書き方 初心者
2018年7月22日 2018年7月28日
野口 銀河
URLをコピーする
URLをコピーしました!

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

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

具体的には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の初期状態では、こんな感じで装飾ボタンが少ない時がある。そんな時は画像のアイコンをクリックすると他のメニューも表示されるよ。

fa-exclamation-circle

ちなみに

それでも「自分のと違う!」と思う人がいるだろうけど、僕は『TinyMCE Advanced』というプラグインでエディタをカスタマイズしている。これについてはまた別記事で書くから今はこっちに集中しておけ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • テキストデコレーション
  • アンダーライン
  • フォントサイズ:18pt
  • ストロング

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

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

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

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

  1. h1を使えるのは1ページに1度だけ
  2. h1タグを使うべき場所を覚えておく
  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以降は何度使っても問題ない。じゃあ好きに使っていいのかというと当然そうじゃない。

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

  1. ブロガーなのにWEBサイトの構成知らないの?
  2. ブロガーなのにWEBサイトの構成知らないの?
  3. ブロガーなら絶対に知っておくべき重要な見出しタグ
  4. 出しタグのルールと正しい順番
    1. ルールその1 – h1を使えるのは1ページに1度だけ
    2. ルールその2 – h1タグを使うべき場所を覚えておく
    3. ルールその3 – デザインで決めずに正しい順番を守る

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

  1. 【h2】ブロガーなのにWEBサイトの構成知らないの?
  2. 【h2】ブロガーなのにWEBサイトの構成知らないの?
  3. 【h2】ブロガーなら絶対に知っておくべき重要な見出しタグ
  4. 【h2】出しタグのルールと正しい順番
    1. 【h3】ルールその1 – h1を使えるのは1ページに1度だけ
    2. 【h3】ルールその2 – h1タグを使うべき場所を覚えておく
    3. 【h3】ルールその3 – デザインで決めずに正しい順番を守る

です。

fa-warning

悪い例

<h1>記事タイトル</h1>
<p>冒頭文</p>
<h3>最初の見出し</h3>
<p>文章</p>
<p>文章</p>
<h2>次の見出し</h2>
<p>文章</p>
<p>文章</p>
<h4>まとめ</h4>
<p>文章</p>

意味わかるよね?

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

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

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

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

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

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

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

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

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

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

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

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

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

おい……、

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

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

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

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

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

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

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

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

それではまた。

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

fa-facebookFacebook
fa-twitterTwitter
fa-envelope-oお問い合わせ
WEB制作 WordPress
SEO SEO対策 ブログの書き方 初心者

この記事が気に入ったら
いいね または フォローしてね!

Follow @@ginga_noguchi
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • WordPressブログに目次が欲しい!その悩みはプラグイン『Table of Contents Plus』を入れれば解決する
  • まだブログの記事ネタ管理で消耗してるの?Trelloを使えば時短&効率化で幸せになれるよ

この記事を書いた人

野口 銀河のアバター 野口 銀河 代表取締役

PC11株式会社代表取締役。静岡県三島市在住。沼津市でステーキハウス&レストラン「鉄板焼葉山」を経営し、そのノウハウを活かして飲食店専門のWEB集客支援サービスを展開。さらにその傍らで地元ポータルサイト「伊豆駿東まっぷ」や音楽ポータルサイト「KICROSS」などのブログを運営。個人では「ダンディなライフスタイル」をテーマにブログやYouTubeでも情報を発信している。

この著者の記事一覧へ

関連記事

  • 【2018年ver.】SEO対策の鉄板プラグイン『All in One SEO Pack』の設定方法図解その2(SNS設定)
    2018年9月5日
  • 【2018年ver.】SEO対策の鉄板プラグイン『All in One SEO Pack』の設定方法図解(一般設定)
    2018年9月3日
  • エックスサーバーでサブドメイン・サブディレクトリ機能を使ってWordPressの複数サイトを運営する方法の図解
    2018年8月19日
  • あれってどうやるの?TCDテーマのブログに別記事のリンクをサムネイル付きでおしゃれに表示させたい
    2018年8月17日
  • 多すぎてわからない!WordPress初心者が入れれば間違いない無料の最強日本語テーマ厳選4種
    2018年8月17日
  • WordPressブログ開設おめでとう!俺とお前らの楽しすぎる人生がこれから始まる
    2018年8月12日
  • WordPressインストールできたから即記事投稿じゃダメ!初期設定とパーマリンク
    2018年8月12日
  • たったこれだけ?意外なほど簡単なエックスサーバーへのワードプレスのインストール方法
    2018年8月11日
PopukarPosts
  • 【全ブロガー必須】他のアドレスを持っていてもGmailアカウントは絶対に作れ!
    2018年8月1日
    WEB制作
  • 村上春樹の長編はわかりにくい?3つの読み方を意識すれば世界観にグッと近寄れる
    2018年4月19日
    エンタメ
  • FF8を全力で楽しむ最強のストーリー攻略チャート1:オープニング ~ 炎の洞窟
    2021年3月22日
    Final Fantasy 8
  • 【2019年最新版】BUYMAで出品者登録後初めて出品する流れと外注化のために覚えておきたい6つのポイント
    2017年8月15日
    BUYMA
  • ダブルモンクの原点!ジョンロブウィリアムの魅力を徹底解説
    2018年1月28日
    アイテム・名品
NewPosts
  • 生産性・仕事の作業効率化におすすめのスケジュール・タスク管理方法
    2022年2月25日
    ライフスタイル
  • FF8を全力で楽しむ最強のストーリー攻略チャート6:SeeD初任務の命令とG.F.ディアボロスの入手
    2021年8月16日
    Final Fantasy 8
  • FF8を全力で楽しむ最強のストーリー攻略チャート5:SeeD就任パーティでリノアとの出会いとキスティスとのイベント
    2021年8月1日
    Final Fantasy 8
  • AirPodsもApple WatchもiPhoneもiPadも同時充電できるPITAKAのAir Omni Liteがダンディ!
    2021年7月3日
    IT・ガジェット
  • 【散財記録】2021年Amazonプライムデーセールで買ったもの一覧
    2021年6月22日
    IT・ガジェット
カテゴリー
  • IT・ガジェット (13)
    • カメラ (2)
  • WEB制作 (20)
    • WordPress (19)
      • テーマ (2)
      • プラグイン (4)
  • エンタメ (13)
    • ゲーム (6)
      • Final Fantasy 8 (6)
    • 映画・ドラマ (3)
    • 本・書籍 (3)
    • 音楽 (3)
  • コンテンツ制作 (10)
    • レビュー (8)
  • ダンディズム (27)
    • ファッション (20)
      • アイテム・名品 (5)
  • ニュース (2)
  • ビジネス (10)
    • お金 (4)
      • クレジットカード (4)
    • 言語 (1)
      • 英語 (1)
  • ブログ (8)
  • ライティング (2)
  • ライフスタイル (14)
    • スポーツ (3)
    • 仕事術 (4)
    • 健康・筋トレ (4)
    • 夢・目標 (5)
  • 副業 (3)
    • BUYMA (3)
  • 旅 (18)
    • グルメ (1)
    • ホテル・旅館 (1)
    • 観光名所・自然 (14)
  • 静岡創生 (2)
タグ
A8.net (4) All in One SEO Pack (2) ANA (3) ASP (4) BUYMA (2) Gmail (4) JCB (3) pickup (5) Pop (2) SEO (6) SEO対策 (6) WEBサービス (3) WordPress初心者マニュアル (3) ただの日記 (2) アクセスアップ (3) アフィリエイト (5) イギリス (3) エックスサーバー (7) セルフバック (5) ダイエット (4) バイヤー (2) パリ (4) ビジネスハック (4) フランス (5) ブロガー (8) ブログ (10) ブログ初心者 (3) メール (3) ヨーロッパ (2) ライティング (3) ライフハック (4) レンタルサーバー (3) 九州 (2) 仕事術 (3) 作業効率化 (8) 初心者 (4) 小説 (3) 山梨県 (2) 旅日記 (2) 桜 (2) 海外旅行 (4) 生き方 (3) 筋トレ (4) 銀河式ダンディズム (3) 陸マイラー (4)
目次
タグ
A8.net All in One SEO Pack ANA ASP BUYMA Gmail JCB pickup Pop SEO SEO対策 WEBサービス WordPress初心者マニュアル ただの日記 アクセスアップ アフィリエイト イギリス エックスサーバー セルフバック ダイエット バイヤー パリ ビジネスハック フランス ブロガー ブログ ブログ初心者 メール ヨーロッパ ライティング ライフハック レンタルサーバー 九州 仕事術 作業効率化 初心者 小説 山梨県 旅日記 桜 海外旅行 生き方 筋トレ 銀河式ダンディズム 陸マイラー

© 2019 Dandyism Online produced by PC11 Inc.

目次
閉じる