SEO対策：見出しタグをつける

AmebaOwnd（アメーバオウンド）で開設したサイトで、SEO対策して、その結果検索順位がどうなるか試しています。

見出しタグは、文章に見出しをつけ、 文書構造をわかりやすく伝えるために使用するタグです。ユーザーにも、検索エンジンにもわかりやすくなるので、SEO対策として有効と言われています。

アメーバオウンドでの見出し

このページで説明します。このページはアメーバオウンドの記事投稿で作成しています。その場合、タイトルに入力した文章「SEO対策：見出しタグをつける」が見出し1、2行前の「アメーバオウンドでの見出し」が見出し2となっています。文章をずっと続けていくよりも、段落に分けて、段落ごとに見出し（タイトル）をつけた方がわかりやすくなります。

見出しタグのつけ方

見出しタグとは

見出しタグとは、HTMLで言うところの「hタグ」になります。「hタグ」って何？と最初意味がわからなかったのですが、HTMLの知識がないので仕方ありません。でも大丈夫！アメーバオウンドは知識がなくてもタグづけができます！

「hタグ」にはh1～h6までありますが、アメーバオウンドではh1～h4までのタグは簡単につけられます。

アメーバオウンドでのタグのつけ方

記事投稿では、タイトルに入れた文章には自動的に「h1タグ」がつきます。

そう、何もしなくても「h1タグ」はついているんです！

見出し2以降は文字の装飾を使用します。文字を入力して見出しにしたい文章をドラックすると、黒いバーが出てきます。一番左に「標準」と書いてあるバーです。

標準の右にある、ｖをクリックすると、標準、見出し1～4、引用と書かれた黒い四角が出て来ます。

その中から、見出しをクリックすると、見出しの何番かよって文字が大きくなったり、太くなったりします。見出し1を選ぶと自動的にｈ1タグが入ります。あとは見出し2→ｈ2、見出し3→ｈ3、見出し4→ｈ4　が入ります。

タグはどこで確認するか

タグは、通常見ている画面には表示されません。どこで確認するかというとページのソースを表示させて確認します。

パソコンのブラウザ、「Google Chrome」の場合だと、画面で右クリックして、「ページのソースを表示」を選ぶと、見ていたページのソースがずらっと並んだ画面が表示されます。

このページのソース画面（拡大した一部）です。ピンクの下線部分の「タグはどこで確認するか」の前に〈h2〉、後ろに〈/h2〉と入ってるのが「h2タグ」になります。見出し2は他にも使用しているので、「h2タグ」はいくつか存在しています。

因みに、段落を表す「pタグ」もちゃんとつけた方がいいと言われていますが、「pタグ」も自動的に入るようなので、オウンドではあまり意識していません。

文字の装飾を使う時の注意点

記事投稿では、タイトルに「h1タグ」がつきます。「h1タグ」は、1ページにひとつになりますので、見出し1は使いません。そして次に大きい見出しには、「h2タグ」を付けたいので、見出し2を選びます。見出し2の中で、更に小見出しを入れたい場合は「h3タグ」を付けたいので、見出し3を選ぶようになり、次の見出しがあれば、見出し4を使うようになります。

「h1タグ」が2つ以上あったり、タグの順番が違っていたりすると、SEO的には問題があるので、注意が必要になります。

尚、今回は記事投稿の場合で説明していますので、ページの編集画面などでは違う場合があります。実際の画面で確認していただくようお願いいたします。

見出しを使用するときの問題点

SEO対策としては、きちんと順番に気を付けて、見出しをつけることは有効だと思っています。

ただ、アメーバオウンドの場合、ちょっと問題があると個人的に感じています。見出しの文字の大きさが、ちょっとアンバランスになってしまうことです。

この記事で説明すると、見出し1の「SEO対策：見出しタグをつける」よりも見出し2の「アメーバオウンドでの見出し」（他４つ）の方が大きくなっています。見出し3「見出しタグとは」（他１つ）は小さくなりまあいいのですが、全体的にバランスがいいかというと、あまり良くない気がします。

見出し2を使った場合、結構大きな文字で、もう少し小さくしたいのですが、これが編集画面では変更できません。CSSの知識があれば、対応できるとは思うのですが、まだ勉強不足なので、今後の課題にしたいと思います。

（追記）後日CSSをカスタマイズしたので、現在は少し改善されています。「SEO対策：投稿記事のCSSカスタマイズ」の記事でレポートしました。

☆2020年5月に、にほんブログ村ランキングに参加しました！