検索順位をあげるための施策（SEO対策）の一つとして、
ブログを書く時に、
【見出しをつける】
というのがあります。
なぜ、見出しをつけるのかというと、Googleの検索エンジンに
「わかりやすい文章」
ということを認識してもらうためです。
今日は、「わかりやすい文章」にするための
見出しの付け方をご紹介しましょう。
全体の流れを確認してみてください♪
※アニメーションなので、再生ストップは自由にできません。ごめんなさい。
※画像の上をクリックすると拡大表示されます。
【テキストエディター】【見出し】を交互に挿入
まず、普通に内容を書く部分には【テキストエディター】を入れ、
見出し部分には【見出し】を
ブロック（点線の枠で囲まれている箇所）にドラッグ&ドロップします。
基本的には、
「見出しに対して内容を書く」
ということで書いていきます。
見出しを設定すると
自動的に公開ページには【目次】が表示されます
※目次用のプラグインをinstallする必要があります。
【見出し】にはレベルがあります
見出しにはレベルがあります。
赤枠部分が見出しのレベルを設定するところですが、
【HTMLタグ】を見ると、H1~H6までありますね。
WEBページは、すべて「HTML」というコードを使って
書くことによって、WEBページとして完成されるので
プロは、HTMLコードを書いてページを作っていきます。
でも、素人の方だって、自分でWEBページ作りたい！
でも、さすがにHTMLコードを使ってページを作るのは
難しいよね～
ってことで、Elementorのような、素敵なプラグインが
登場するのです（笑）
こういうプラグインを使っていても、
裏側では全部自動的に「HTML」に書き換えてくれています。
で、見出しは、この「見出しタグ」というもので囲む必要があるのです。
ちなみに見出しタグで囲むと、以下のような表示になります。
※私は見出し２をよく使うので、
ちょっと色をつけたり、下線をつけたりしています(^-^
実際に、裏で入力されている内容はこんな感じです。
↓↓↓↓↓
＜h1＞ｈ１は１番大きい見出し＜/h1＞
＜h2＞ｈ２は２番目に大きい見出し＜/h2＞
＜h3＞ｈ３は３番目に大きい見出し＜/h3＞
＜h4＞ｈ４は４番目に大きい見出し＜/h4＞
＜h5＞ｈ５は５番目に大きい見出し＜/h5＞
＜h6＞ｈ６は１番小さい見出し＜/h6＞
＜＞は、本当は半角で入力しますが、
ここで半角に入力しちゃうと、上記のような
目次の書式に変わっちゃうのでｗ
ここでは、あえて全角で入力しています。
このようにレベル分けをすることで、
文章の構成がわかりやすくなり、
Googleの検索エンジンロボットさんも、
「わかりやすい文章だな。上位に表示させてあげよう！」
ということになるのです。
Elementor の【見出し】レベル
ちなみにElementorでは、【見出し】を挿入すると、
自動的に「H2」のレベルで設定されます。
なぜかというと、ブログでいえば、題名が「H1」なので
すでに「H1」が使われれていることが多いだろう
ということで、「H2」が入るようになっています。
ちなみに「H1」はそのページで入れられるのは
１つだけ
です。
とはいっても、別に入れることはできるのですが（笑）
H1は、WEBページの主題に使われるものなので
主題をいくつも入れてしまうと、
検索エンジンが混乱してしまいます(^-^;
なので、１ページに「H1」は一回だけ使うようにしましょう。
何度も言いますが、ブログの時は題名が「H1」となっているので
使うならば「H2」以降になります。
ちなみに、H2～H６は何度でも使ってOKですが、
順番を入れ替えて使うようなことも避けましょう。
たとえば
——————–——————–
H３見出し
H２見出し
～文章～
—————————————-
といった感じです。
これでは、検索エンジンが混乱してしまいますよね(^-^;
この図のように、
わかりやすい文章校正にすると
検索エンジンにとっても
読む人にとっても
読みやすい記事になるのです。
その他のHTMLタグ
見出しレベルを設定するところで
見出しタグ（H1～H6）以外に
【div】【span】【p】というタグがあるので、
それぞれのタグの説明をしておきますね。
Elementorを使っている限り、あまり覚える必要も
ないかもしれませんが（笑）
div タグとは
（↑ちなみに、これH3レベルの見出しですｗ）
divタグとは
ここは見出しですよ～
とか
ここは画像ですよ～
とか、
ここはフォームですよ～
とか、
ここは表ですよ～
とか、ブロックごとに意味があったりしますが、
divタグは、それ単体では特に意味のあるブロックにはなりません。
どういう時に使うかというと
divタグで囲った箇所だけ
真ん中にもっていきたいとか
上の余白をあけたいとか
そういった自分流に設定する時に使うものになります。
span タグとは
Elementorを使っていて、この【HTMLタグ】の【span】を指定することって
ほとんどないと思いますが…
spanタグは、こんな感じです
↓↓↓
Elementorで、見出しを入れると、
見出し全体の色を変えることができますが、
部分的に色を変えたい！
という時には、
このようにテキストを入れる箇所にspanタグを使うことがあります。
※#ff0000というのは、色の指定です。
このように、文章のある一部分だけに書式を変更したい場合にspanタグを使ったりします。
p タグとは
ｐタグは、”paragraph”の略で、「段落」を意味します。
１段落が、どこからどこまでなのか、ということを指定する時に使います。
まとめ
いかがでしょうか？
ブログのような記事を書く時には、
見出しタグを使って、
文章構成をわかりやすくすることが重要です。
今まで、H１タグを１ページの中で、ガンガン使っていた方、
見出しレベルを適当につけていた方、
全部変更してみてください（笑）
それだけでも、
検索エンジンの上位表示に効果はかなりあると思いますので♪
