Smile Everyday 〜日々の悩みを笑顔に変えて。

人間関係、自己啓発、恋愛、ファッション、雑記のジャンルで更新しています。

簡単なhtmlタグでGoogleに効かせSEOに強くなろう








〜簡単なhtmlから使っていく〜

f:id:yuuki0528:20190205210052p:plain

SEOや、Googleに影響を与える
htmlのタグの使用。
中々手間のかかる作業なのですが、この一手間がとても大切。

htmlなしでも、
ユーザーに言葉を響かせることはできるが、
Googleに伝える事は出来ないのです。
Googleに伝えるには『html』
と呼ばれる言葉を使うのです。
htmlは飾りではなくとても重要なものなのです。

まずは、簡単なhtmlタグを
紹介していきます。




見出しを示すh1〜h6要素

<h1>ここに見出し文</h1>

このh1タグを記述すると↓

ここに見出し文

こんな形で見出しが表示されます。


h1〜h6のランク

ランクと使い方

これらのhtmlタグは
見出しを記述する際に使います。
1から6までの数字は見出しのランクを示すもので、
h1が最上位になり、h2、h3と
数字か大きくなるにつれて
見出しのランクが下がります。
最下位のランクはh6になり、デザインの使用によっては形も大きさも変わってきます。

Googleロボットの観点から
webサイトのページを上から順番に読み込んで、
情報を取得していき、webサイトのマイナス要因によって
解析途中に帰ってしまうこともあるので、
タグの中でh1はページ内最上部に使用をおすすめします。

ポイントとして、h2はh1の話しを掘り下げた内容であること。
h1から順番にランクが上のキーワードを
h2、h3と話しを掘り下げて
文章の階層を作っていくこと。
ユーザーにとっても階層がしっかりしていることで、
知りたい情報を早く知ることができるのです。




p要素

<p>ここにテキスト</p>

pタグを記述すると文章内の段落を示してくれます。↓

ここにテキスト

つぎのテキスト

↑『つぎのテキスト』もpタグで囲ってありますが、段落を開けて見やすくしてくれます。

pタグとは?


段落を示す

pは文章内の段落を示します。
段落とは文章において見やすくまとめられた
文のかたまりのことで、通常は
複数の文によって構成されます。

h1などの見出しのあとに、
pタグで文章をまとめることで、
ユーザーにもGoogleにも伝えやすくておすすめです。
h1などのhタグとpはセットで使う。




ol、li要素


<ol>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>

ol、で順序のあるリストを示して、
liでリスト項目を表示します。↓

  1. リスト項目
  2. リスト項目
  3. リスト項目
  4. リスト項目
↑がolとli要素で、順番のある、順序を示したリストを作ることができます。



ちなみに、olのとなりにreversed(議論属性)
を含めると降順で表示されます。


<ol reversed>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>

  1. リスト項目
  2. リスト項目
  3. リスト項目
  4. リスト項目



ol、liタグについて

記述ポイント

ol、liで番号で振り付けてあり、
順序のあるリストになっていますが、
これを順序のないリスト、数字ではなく
⚫︎でリスト
を作りたい場合は、
『ol』を『ul』に置き換えるだけです。

この箇条書きのメリットですが、
何が書いてあるか直接的にイメージがしやすく、
重要項目を選定して短くまとめているので
早く読むことができるのです。

また、検索エンジンロボットも、箇条書きは
重要な項目において使用されることを理解しており、通常の段落タグよりも重要な言葉が
書かれていると判断しています。




strong要素

<strong>ここにテキスト</strong>

strongタグは重要性を示します。記述すると↓
ここにテキスト
少し太い文字になって強調します。



strongに似たbタグ

違いとは?

strongタグは、囲んだテキストの重要性を示す事ができます。
似たような要素でbタグがあるのですが
これは、文章内で他と区別したいテキストを
示す際に使用します。
bで囲まれたテキストは太字になりますが、
そのテキストが重要であるという意味はありません。


<b>ここにテキスト</b>

このbタグを記述すると↓
ここにテキスト
strongと似ていて太字になるのですが、
重要であるという意味はないのです。

重要なテキスト、もしくは、
伝えたいテキストであればstrong
を積極的に使っていく事が、
ユーザーとともにGoogleにも効いていくでしょう。




ユーザーもGoogleも両方視野に入れる

偏らない事が大切

ユーザー視点でデザインやアニメーション、
読みやすさを重視していても
Googleから記事を評価してもらえなければ、
ユーザーに見てもらう機会がなくなります。

逆に、ユーザー視点なしのGoogleSEO
向けた記事だけの作成も、
ユーザーが読まない記事となり、
評価ももちろん下がります。

両方を踏まえた上で、今日の簡単なhtmlタグをとりいれてみてください。
  1. h1〜h6の見出し、階層を作る。
  2. p要素の文章の段落を示すこと。
  3. ol、liの箇条書き、順序を示す。
  4. strongを使って重要性を示す。

他にもbody.main.section.head.などなど
たくさんのhtmlタグがありますが、
この4つだけはとりあえず押さえておきましょう!


どうも!ゆうきでしたっ!
次回はhtmlについてもう少し深く
切り込んでいきたいと思います!
また見てください。



関連記事
www.smileeveryday.work
続いて
www.smileeveryday.work
www.smileeveryday.work
www.smileeveryday.work
www.smileeveryday.work









/* バブル */