WEBライターのお仕事では、自分のパソコンで書いた原稿をワード形式のファイルなどで納品する場合と、クライアント(お客様)サイトに直接ログインして入稿する場合とがあります。
直接入稿する場合、最近ではワードプレスが指定されることがほとんどではないでしょうか。
実は、ワードプレスのテーマによって、見出しを設定する「段落▼」のプルダウンメニューに出てくる「見出し1」「見出し2」…の定義が違うことがあります。
先方から指定される場合もありますが、特に何も言われない(お客様もあまり詳しくないことも多いです)場合、疑問を持たずになんとなく設置しているライターさんもいるかもしれませんね。
今回は「見出し1」「見出し2」…の正しい設定方法について解説します。
※なお、この記事では現在最もポピュラーな、ワードプレスのバージョン4までの操作方法を解説しています。2018年12月にリリースされた新タイプのブロックエディタ『Gutenberg』はこの記事には登場しませんのでご了承ください。
まずはWEB記事やワードプレスでの見出し(h1、h2)を正しく理解しよう
まずは「見出し」について確認しておきましょう。
「それはバッチリ分かってるよ!」という人は読み飛ばしてOKです(*^ー゚)b
- その項目の内容が一目でわかる短い説明。標題。
- 英語では大見出しは”Heading”、小見出しは”Sub-Heading”
- 頭のHを取ってh1→h2→h3と、大見出しから順に若い番号を使用する
仕事としてWEB記事を書く場合、多くはインターネット(というかほぼGoogle)で検索された時に上位に表示されることを求められているはず。
そしてGoogleは、「見出しが設定されている記事を上位に表示するよ」とアナウンスしています。
近年はAIが発達したとはいえ、まだまだコンピュータが「この記事は何について書かれているのか」を長い文章から瞬時に読みとるのは大変。
なので、適切に見出しがあって各章の内容がパッと分かるようになっていると、「ああ、これは〇〇の解説なんだね、じゃあ読みたい人に届けるね」と判断してもらえるわけです。
それは読者(ユーザーともいいます)にとっても同じ。
むしろ、Google対策は補助的なもので、見出しの一番の目的は、読む人に対して「この記事はこんなことが書かれていますよ」と伝えることです。
私たちが新聞や雑誌などを読む時も、まずはぱっと見出しを見てからじっくり読むか飛ばして読むか決めますよね?
ほとんどスマホでしか情報見ないわ
という人も多いかもしれませんが、その場合でも、記事の最初にある「もくじ」をざっと見て、そのページを読むかやめて戻るか決めているはずです。
見出しの設定は、ワードプレスのテーマによって異なる?!
というわけで、仕事としてお客様のサイトに直接記事を入稿するときも、基本的には見出しの設定は不可欠です。
(大規模サイトではすでに構成担当者が見出しだけ先に設定してくれていることもありますが、慣れていないライターさんが消してしまうリスクなどを考えると、そのパターンは少数派でしょう)
ワードプレスの入力画面(2種類)のうち、大部分の人は「ビジュアル」モードを使用しているかと思います。
※「テキスト」モードで入力してるよ!という方は、基本的にh1・h2などのタグを理解して使えていると思うので、この記事もほとんどいらないです(笑)。
ビジュアルモードでは、画面上部に「段落▼」というプルダウンメニューがあり、そこから見出しを選んで指定します。
ところがですね!!
ワードプレスのテーマにより、
見出し1=h1
という場合と、
見出し1=h2
という場合が、あるんですよ…?!
私は現在、直接ワードプレスに入稿しているクライアントサイトが5件ほどあるのですが、うち3件は「見出し1」を選ぶとh1、「見出し2」はh2になります。
いっぽう、このブログや2件のお客様サイトでは「見出し1」はh2に、「見出し2」はh3になるんですよね…!
(ちなみにこのブログのワードプレステーマは『JIN』です。お客様はワードプレスのデフォルトテーマだったり、デザイナーさんに作ってもらってたり色々。)
これが意外と盲点というか、慣れているほうに合わせて何気なく設定しがち。
自分のブログだけなら1回覚えればOKですが、新規のクライアントサイトでは毎回確認が必要です。
「見出し1」がh1・h2のどちらに該当するのか確認するには
プルダウンメニューから”見出し1”を選ぶことはできるけど、それがh1なのかh2なのか、どうやったら分かるの…?
と思われる方もいるかと思います。
これはとってもカンタン。
見出しがh1・h2…どれに対応するのか正しく知るには、「テキスト」モードで確認しましょう。
切り替えは入力画面右上のタブでできます。
テキストモードでは以下のように表示されますので、各見出しがh1なのかh2なのかが分かりますね。
見出し(h1、h2~)の使い方OK例とNG例
自分のブログならともかく、お客様のサイトとなると、もし見出し設定がおかしかったら…と心配になりますよね。
ただ、テーマによって「見出し1」に何が該当するのかが異なるとはいえ、実は順番さえ間違っていなければSEO上はそこまで大きな問題にはならないんです。
見出しの設定で大切なのは、大きい見出し→小さい見出しの順番どおり使われているかどうか。
以下はOK例です。
- h2が3つで構成されている
- h2の中にh3が2つ、h2、h2の中にh3が2つ で構成されている
- h2がなくて、h3が3つで構成されている
- h2の中にh4が2つの繰り返しで構成されている など
前半の2つは分かりますが、後半の2つはなんかダメな気がしますよね?
でも実は、h2を飛ばしてh3からはじめるのも、h2→h4と進むのもGoogle的にはOKらしいんです。
実は、今回、この件について調べてみたのは、クライアントさんとのやり取りがきっかけ。
最初にいただいた指示書に、「見出しはh2→h4で設定してください」とありました。
でも、私はSEO対策上、h1→h2→h3→h4と順序正しく設定するクセがあるので、久しぶりの入稿でうっかりh2→h3と設定して納品してしまったことがあるんですね。
するとお客様から、「小見出しはh4を使って下さい」と指摘があり、いったん「申し訳ありません!」と修正しようとしたのですが。
ん…?
この見出しの使い方って、SEO評価下がってしまうのでは?
と心配になり、お客様になぜh2→h4指定なのかお聞きしたんです。
すると「実は私も理由は分からないのですが、デザイナーさんの指示で…」とのこと。
デザイナーさんはさすがにSEO知識はあるはずですが、万が一、せっかく頑張って作っているサイトが見出しの設定ミスで上位表示できないなんて悲しいので、調べてみることにしたんです。
その結果分かったのは…
- 必ずしもh2→h3→h4の順に使用しなくても、視認性(見やすさ、デザインの良さ)を優先してよい
- そのために検索結果の表示順位が下がることもない
だそうです。
以下に、Googleのジョン・ミューラー氏が、過去にウェブ制作者からの質問に対し「Googleでは見出しの順番は厳密にはあまり問題にしていない」と答えた動画があります。(英語版)
ただ、Googleがあまり気にしていないとはいえ、読む人のためを考えるなら、できるだけ順序正しく使用するように心がけたいですよね。
また、「多少イレギュラーでも良い」といっても、次のような使い方はNGです。
- h3以下にh2が3つ並ぶ
- 記事タイトルにh2、記事内の見出しにh1を使っている など
まあ、2つ目はないと思いますが…見た目を重視した結果、見出しの順番(大小)が入れ替わってしまうことはあるかもしれません。
WEB記事の見出し構造は、大きい箱(h2)の中に、小さい箱(h3など)を入れて区切っていくイメージなので、外箱より大きな内箱を使うような構造は「ユーザビリティが悪い(=読む人が混乱する)」と判断されるんですね。
あくまでも、大きい見出し(h2)から小さい見出しへ使っていくのがルールで、逆転するのはビジュアル的にそうしたくても避けましょう。
もし、新規に引き受けたお仕事で指示書や既存記事を見たときに、見出しが飛んでいる(h2→h4など)だけならそれに従っても良いと思いますが、順番が間違っている時(h4→h3など)は、早めにお知らせした方がいいと思います。
ワードやドキュメントの見出し設定は?
ところで、ここまでワードプレスの直接入稿について書いてきましたが、WEBライターの納品方法としては「ワード(.docx)形式」や「Googleドキュメント共有」なども多いですよね。
ワードやドキュメントももちろん見出し設定ができます。
(上記はGoogleドキュメントの例です)
ちなみに、ドキュメントで作成した記事を私のワードプレスに貼りつけてみたところ、
- 「タイトル」はh1としては反映されず(h1はタイトル欄が別枠なので)
- 「見出し1」をh2として反映
- 「見出し2」をh3として反映
となりました。
特に指定がなければ、Googleドキュメントでは、記事タイトルは「タイトル」、大見出しを「見出し1」で書き始めるのがおすすめです。
※ワードについては、いま手元にMSオフィス環境がなく正確に分かりません。ごめんなさい!お手持ちの方は、ためしにワードプレスに貼ってテストしてみるとよいと思います。
そもそも「h1」ってタイトルだよね?問題
ここまで、記事タイトル=h1という認識で進めてきましたが、実は、本当の意味での記事タイトル(そのページのタイトルとして、検索結果やブラウザのタブ部分に表示される)を伝える役目を持つのは「title」タグというものが存在します。
h1は、常識的には記事の最初に置いて、この記事の大きな内容を示すもの。
なので、役割としてはやはり「記事タイトル」であり、titleタグとh1が同じ内容というのが自然です。
もちろん、若干文言が違うのは全然ありだと思いますし、titleタグの方には最後にサイト名をくっつけて「〇〇に読みたい絵本10選|STUDIOバブルス」とする…などの工夫をするのはおすすめです。
上で紹介したGoogleのミューラー氏は、ツイッターで「1つの記事にh1はいくつ使うのが適切?1つですか?」と質問されたときに”As you want/お好きなだけ”と答えていて、titleと同一視はしていないようですが…。(titleは必ず1つです)
WEBのルールとしてはh1を複数置くことや、titleと違う内容を記載することは可能ですが、例外的な場合をのぞいてはh1は1つ&タイトルを示す内容が適切ですね。
まとめ
今回は、お客様のサイトのワードプレス直接入稿する際の「見出し」設定について、意外と知らない人が多いポイントをまとめました。
「Googleの評価だけを気にするのではなく、ユーザーのためにならないことは改善するべき」という意見はネットでも散見されますし、そのうちGoogleも「順序正しい見出し設定」を上位表示の条件に入れてくるかもしれません。
プロのWEBライターとしては、クライアントさんの意向やデザイン面もふまえつつ、以下の見出し設定を基本として順序良く使う習慣をつけておきたいですね!
- h1を記事タイトルとする(テーマ、ドキュメントにより設定方法が違うので確認)
- 大見出しはh2→以下、小見出しをh3→h4→h5とする(テキストモードで確認)