検索順位をあげるための施策(SEO対策)の一つとして、
ブログを書く時に、
【見出しをつける】
というのがあります。
なぜ、見出しをつけるのかというと、Googleの検索エンジンに
「わかりやすい文章」
ということを認識してもらうためです。
今日は、「わかりやすい文章」にするための
見出しの付け方をご紹介しましょう。
全体の流れを確認してみてください♪
※アニメーションなので、再生ストップは自由にできません。ごめんなさい。
※画像の上をクリックすると拡大表示されます。
【テキストエディター】【見出し】を交互に挿入
まず、普通に内容を書く部分には【テキストエディター】を入れ、
見出し部分には【見出し】を
ブロック(点線の枠で囲まれている箇所)にドラッグ&ドロップします。
基本的には、
「見出しに対して内容を書く」
ということで書いていきます。
見出しを設定すると
自動的に公開ページには【目次】が表示されます
※目次用のプラグインをinstallする必要があります。
【見出し】にはレベルがあります
見出しにはレベルがあります。
赤枠部分が見出しのレベルを設定するところですが、
【HTMLタグ】を見ると、H1~H6までありますね。
WEBページは、すべて「HTML」というコードを使って
書くことによって、WEBページとして完成されるので
プロは、HTMLコードを書いてページを作っていきます。
でも、素人の方だって、自分でWEBページ作りたい!
でも、さすがにHTMLコードを使ってページを作るのは
難しいよね~
ってことで、Elementorのような、素敵なプラグインが
登場するのです(笑)
こういうプラグインを使っていても、
裏側では全部自動的に「HTML」に書き換えてくれています。
で、見出しは、この「見出しタグ」というもので囲む必要があるのです。
ちなみに見出しタグで囲むと、以下のような表示になります。
※私は見出し2をよく使うので、
ちょっと色をつけたり、下線をつけたりしています(^-^


実際に、裏で入力されている内容はこんな感じです。
↓↓↓↓↓
<h1>h1は1番大きい見出し</h1>
<h2>h2は2番目に大きい見出し</h2>
<h3>h3は3番目に大きい見出し</h3>
<h4>h4は4番目に大きい見出し</h4>
<h5>h5は5番目に大きい見出し</h5>
<h6>h6は1番小さい見出し</h6>
<>は、本当は半角で入力しますが、
ここで半角に入力しちゃうと、上記のような
目次の書式に変わっちゃうのでw
ここでは、あえて全角で入力しています。
このようにレベル分けをすることで、
文章の構成がわかりやすくなり、
Googleの検索エンジンロボットさんも、
「わかりやすい文章だな。上位に表示させてあげよう!」
ということになるのです。
Elementor の【見出し】レベル
ちなみにElementorでは、【見出し】を挿入すると、
自動的に「H2」のレベルで設定されます。
なぜかというと、ブログでいえば、題名が「H1」なので
すでに「H1」が使われれていることが多いだろう
ということで、「H2」が入るようになっています。
ちなみに「H1」はそのページで入れられるのは
1つだけ
です。
とはいっても、別に入れることはできるのですが(笑)
H1は、WEBページの主題に使われるものなので
主題をいくつも入れてしまうと、
検索エンジンが混乱してしまいます(^-^;
なので、1ページに「H1」は一回だけ使うようにしましょう。
何度も言いますが、ブログの時は題名が「H1」となっているので
使うならば「H2」以降になります。
ちなみに、H2~H6は何度でも使ってOKですが、
順番を入れ替えて使うようなことも避けましょう。
たとえば
——————–——————–
H3見出し
H2見出し
~文章~
—————————————-
といった感じです。
これでは、検索エンジンが混乱してしまいますよね(^-^;
その他のHTMLタグ
見出しレベルを設定するところで
見出しタグ(H1~H6)以外に
【div】【span】【p】というタグがあるので、
それぞれのタグの説明をしておきますね。
Elementorを使っている限り、あまり覚える必要も
ないかもしれませんが(笑)
div タグとは
(↑ちなみに、これH3レベルの見出しですw)
divタグとは
ここは見出しですよ~
とか
ここは画像ですよ~
とか、
ここはフォームですよ~
とか、
ここは表ですよ~
とか、ブロックごとに意味があったりしますが、
divタグは、それ単体では特に意味のあるブロックにはなりません。
どういう時に使うかというと
divタグで囲った箇所だけ
真ん中にもっていきたいとか
上の余白をあけたいとか
そういった自分流に設定する時に使うものになります。
span タグとは
Elementorを使っていて、この【HTMLタグ】の【span】を指定することって
ほとんどないと思いますが…
spanタグは、こんな感じです
↓↓↓
Elementorで、見出しを入れると、
見出し全体の色を変えることができますが、
部分的に色を変えたい!
という時には、
このようにテキストを入れる箇所にspanタグを使うことがあります。


※#ff0000というのは、色の指定です。
このように、文章のある一部分だけに書式を変更したい場合にspanタグを使ったりします。
p タグとは
pタグは、”paragraph”の略で、「段落」を意味します。
1段落が、どこからどこまでなのか、ということを指定する時に使います。
まとめ
いかがでしょうか?
ブログのような記事を書く時には、
見出しタグを使って、
文章構成をわかりやすくすることが重要です。
今まで、H1タグを1ページの中で、ガンガン使っていた方、
見出しレベルを適当につけていた方、
全部変更してみてください(笑)
それだけでも、
検索エンジンの上位表示に効果はかなりあると思いますので♪