- アメブロ コピペで使える見出しデザインセット 24選を追加しました
- 知っておきたいアメブロのカスタマイズ方法 CSS編集を追加しました
- アメブロ スマホのデザインをCSSでカスタマイズする方法を追加しました
- アメブロ 画像に代替テキストつけてますか？画像に追加して、SEO対策しようを更新しました
この記事を読むのに必要な時間は約 7 分です。
[アイキャッチモデル: 茜さやさん]
- 見出しを付けることでブログが読みやすくなる
- 見出しはSEO対策になる
- 本文中にh1タグは使わない
- 見出しタグ順番に使い入れ子になるようにする
- 文字を大きくしたり色を変えたとしても見出しにはなっていない.
このブログは基本的に、メンタルセラピストやスピリチュアル系を仕事にしたい方で、ブログを書いている方でITが苦手な方を対象にしています。
あなたは見出しを付けてブログを書いていますか？
まだ駆け出しだったころの僕のブログは見出しはつけていませんでした。
ブログで集客をしていく中で、見出しをつけたほうがいいということがわかり、見出しを付けるようにしたところ僕のブログのアクセスは増え始めました。
ただ見出しを付ければいいわけではなく、ルールに沿って見出しを付ける必要があります。
今回は見出しのつけ方について解説します。
見出しとは？
そもそもの話になりますが見出しとは？という話です。
見出しは下図の通りになります。
WordPressで記事を書く場合はクラッシックエディターだと下図のようになります。
ブロックエディタの場合は下図のように設定します。
アメブロの場合は下図のように設定できます。
見出しを付ける目的は主に２つです。
- 読みやすくするため
- SEO対策
読みやすさについては説明は不要だとおもいます。
SEO対策の意味合いについては、Googleやyahoo!などの検索エンジンがあなたの記事を検索結果に載せる、つまりインデックスする時の判断材料の第一はもちろん記事のタイトルです。
そして次に重要視していると言われているのが見出しだと言われています。
なので見出しにもキーワードを入れている方が得策です。
数字の小さな見出しほど重要度は高くなる
見出しを付ける時に使用するHTMLタグとしてhxタグがあります。(xには数字がはいります）
この数字が小さいタグほど検索エンジンは重要度が高いと判断しているようです。
WordPressでは次のようになります。
- 見出し2=h2タグ
- 見出し3=h3タグ
- 見出し4=h4タグ
アメブロだと次のようになります。
- 大見出し=h2タグ
- 中見出し=h3タグ
- 小見出し=h4タグ
本文中にh1タグは使用しない
アメブロではそれほど意識する必要はありませんが、Wordpressの場合はエディターを見ると見出し1(=h1)から始まっています。
ただh1タグはほとんどのテーマでh1タグは記事タイトルに使われます。
なので使用しないでください。
一番重要度の高いh1タグが2つ存在した場合、Googleやyahoo!などの検索エンジンがあなたの記事のどこが重要なのかを判断できなくなり、サイトの評価を下げてしまう可能性もあり得ます。
見出しの順序を正しく使う
基本的に見出しは数字の小さいほうから使っていきます。
大きな話題（テーマ）の中に、それに関連する説明を入れていくというようにします。
h2→h3→h4と順番に使うもので、h3のデザインがかわいいとかカッコいいからh2を使わずh3だけを使うというような、馬鹿な真似はやめましょう。
好きなデザインの見出しを使いたいというのであれば、CSSを変更できるように知識をつけましょう。
見出しは見た目をよくするだけのもではない
冒頭でも書きましたが見出しを使う目的は以下の2つです。
- 読みやすくするため
- SEO対策
読みやすくするとはあなたの記事を読んでもらったときに伝えたいことをわかってもらうため。
SEO対策とは、読んでもらうために Googleやyahoo!などの検索エンジンの結果に表示されやすくするため
つまり読みやすく、読んでもらいやすくするということは読者のためにもなります。
見た目だけ変えても見出しにはなっていない
アメブロを利用されている方に多いのですが、見出しの話を勘違いし見た目のデザインだけを変更している方がいます。
見た目の文字だけを大きくしたり、色を変えたり、罫線をつけたりなど。
またそうしたCSSを紹介する場合、ユーザーのことなど考えず見た目だけのデザインをのせて見出し用のタグすら使っていないというふざけた記事もあります。
|
1 |
<div style="border-left: 10px solid #ff0000; border-bottom: 2px solid #ff0000; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;">タイトル</div> |
僕が見つけたのはこのようなデザインを紹介していたブログ
しかもタイトルに見出し枠と書いてあります。
デザインの結果自体に見出しタグが使えないので百歩譲ってそれがdivタグということは致し方ないにしても
コピペ用のコードがdivを使ってコピペでOKというのは初心者に対してあまりに失礼というか適当だなと感じました。
ちなみ上のデザインを見出しとしてコピペで使う場合は下記のコードをコピペしていただくと見出しとして見た目だけでなくSEO対策としても役割を果たしながら使うことができます。
|
1 |
<h2 style="border-left: 10px solid #ff0000; border-bottom: 2px solid #ff0000; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;">タイトル</h2> |
まとめ
再度書きますが見出しを付ける目的は下記のとおりです。
- 読みやすくするため
- SEO対策
使用するときのポイントは以下の通りになります。
- 数字が小さいほど重要度が高い
- 本文中にh1タグは使用しない
- 見出しの順序を守る
- 見た目をよくするだけのものではない
ブログを書くときに参考にして下さい
最後までお読みいただきありがとうございます。
今回の記事があなたの役に立ったなら幸いです。
質問疑問ございましたらコメント欄へお願いします。