複数の「スマホ決済(QRコード決済)」を一括導入できる店舗向けサービスまとめ

【SEO】内部対策するならHTMLタグの使い方を理解して、適切に使うべし!

【SEO】内部対策するならHTMLタグの使い方を理解して、適切に使うべし!

日本語にも「文法」というルールがあります。本でも作文でも論文でも書き方にルールがあります。WEBサイトにも当然、文章を書く時のルールがあります。

特に、WebサイトのSEOに取り組むときには、HTMLを正しく使うことが重要です。最近は、Googleの理解力が高くなり、HTMLタグが正しく書かれていなくても、上位表示をすることもあります。

だからといって、HTMLの意味を無視して、てきとうに書いていいとは、私は思いません。

海外の人が、日本語を話すときに、文法が多少間違っていても、日本語がネイティブな人なら、何を言いたいのか理解できますよね。とはいえ、文法が正しい方が、理解がしやすく、誤解も少ないでしょう。

コンテンツの完成度を高める

人の役に立つ内容であることは当然ですが、それだけでは十分とは言えません。

Webサイトを検索結果で上位に表示させて、多くの人にあなたのコンテンツを届けるためにはWebページやコンテンツの内容以外にも重要なポイントがあります

HTMLタグとは

HTMLは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。Webサイトは、HTMLやCSSなどの「言語(マークアップ言語)」を使って記述することで作られています。

例えば、この記事もHTMLによって記述されています。

HTMLの記述例

この記事のHTMLコード(一部)

Webサイトで表示するテキストや画像、リンクなどは、HTMLを使って記述されています。CSSはHTMLで記述されたものの見た目や体裁(文字の大きさや色など)を決めるときに使います。

HTMLで使用するタグ(ソースコード)には以下のようなタグがあります。

  • 見出しタグ(h1〜h6)
  • 段落タグ(p)
  • 改行タグ(br)
  • 強調タグ(strong,em)
  • 画像タグ(img)
  • リンクタグ(a)

HTMLで使用するタグには、それぞれに意味があります。

HTMLタグの意味にあった適切に使うべし!

決して視覚的な理由(見た目)だけで、WebページやWebサイトを作らないようにしましょう。

見た目だけで記述していまうと、HTMLタグの意味とそぐわない使い方をしてしまいます。

見出しタグ(hタグ)が適切に使われている

見出しタグはWebサイトにおいて最も重要なHTMLタグです。見出し1(h1)→見出し6(h6)まで順序を守って使いましょう。見出し2(h2)のあとに見出し4(h4)を使うなど、見出し3(h3)を、すっ飛ばすのは間違いです。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h1>見出し1</h1>

見出しを使う場合にはWebページ部分だけでなく、WebサイトのタイトルもWEBページであることを認識しましょう。

Webサイトのタイトルが見出し1なのか?Webページのタイトルが見出し1なのか?それによって記事で使う小見出しタグも変わってきますね。

段落タグ(pタグ)が適切に使われている

段落タグも見出しタグと合わせて重要です。文章として、各見出しには段落(pタグ)があるのがキレイな流れです。

<p>ここに文章を書きます</p>

見出し→段落(文章)→見出し→段落(文章)というように見出しと見出しの間には段落を入れましょう。

<h1>見出し1</h1>
<p>ここに文章を書きます</p>
<p>ここに文章を書きます</p>
<h2>見出し2</h2>
<p>ここに文章を書きます</p>
<h2>見出し2</h2>
<p>ここに文章を書きます</p>

強調すべきところで強調タグ(strongタグ、emタグ)を使う

視覚的に文字を太文字にしたい、色を変えたいという理由で強調タグを使うのはGoogleからすると適切な使い方ではありません。記事の中で重要な文言、強調したい文言で強調タグ(strongタグ、emタグ)を使いましょう。

<p>ここに文章を書きます。<em>強調したい言葉</em>に強調タグを使う</p>

太文字になるHTMLタグにはbタグやiタグなどもありますが、それらに強調の意味にはなりません。

画像には代替テキスト(altタグ)を書く

これは基礎中の基礎です。Webサイトで画像を表示するときは、代替えテキスト(altタグ)で画像の説明を入れましょう。

<img src="画像のURL" alt="画像の説明">

代替えテキストは何かしらの理由で画像が表示されなかった場合に画像の代わりに表示される文言です。目が見えない方が音読ソフトを使ってWebサイトを読む場合にも、このテキストが読み上げられます。Googleが画像の内容を認識するのにも使われており非常に重要です。

装飾の指定はCSSで行っている

HTMLで装飾をする時代は終わりました。文字の大きさや色を変えるなどの装飾はCSSで設定しましょう。

HTMLで色を指定することもできますが、この使い方(書き方)は非推奨となっています。

<p style="color:#ccc;">これは間違った使い方</p>

リストタグ(ulタグ)を使っている

リスト表示させるのにリストタグ(ulタグ)を使っているかどうかも大切です。「・」を使ってのリスト風リストを作らないようにしましょう。

<ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

インライン要素の中にブロック要素の位置を間違えない

HTMLにはブロック要素インライン要素という2種類があります。例えば、段落タグ(pタグ)やリストタグ(ulタグ)などが「ブロック要素」です。これに対して文言などがインライン要素となり、強調タグ(strongタグ)やリンクタグ(aタグ)が該当します。

位置を間違えないというのは、段落ダグを強調タグで囲わないということです。

<strong><p>これは間違った使い方</p></strong>
<p><strong>これは正しい方</strong></p>

参考記事:ブロックレベル要素とインライン要素

Googleにも正しく記事の内容を伝える

他にもHTMLタグ自体は沢山ありますが、WebサイトでWebページやコンテンツ(ブログ記事など)を書くだけであれば、ここまでのHTMLタグを理解しておけば最低限クリアです。

HTMLタグを意味なく使うのではなく、意味通りに正しく使う。そしてGoogleにもあなたのブログ記事の内容を理解してもらうことが重要です。