URUOSHI

毎日の生活を潤す、ちょっとお得な役立ち情報発信サイト

SEO

SEOの内部対策は大丈夫?HTML構造化を現役エンジニアが解説します。

HTML構造化

URUOSHI管理人の、SUMMY(@URUOSHI)です。

悩む人
SEO対策の内部対策に、HTML構造化があると聞くけどどういう意味?プログラミング初心者だから、実際どうコード書いて良いかわからない…。

 

本記事ではそんな悩みを解決します。

この記事はこんな方におすすめ

  • HTML4とHTML5の違い
  • HTML5でのソースの基本的な書き方
  • HTML5のタグの意味と使い方
それでは詳しく解説していきます。是非最後までお付き合い下さい♪

HTML4とHTML5の違いとは

最近HTMLのプログラムを始めた方でしたら、もしかしたらHTMLにバージョンなんてあったの?

そう思う方多いのではないでしょうか?

HTML5自体それほど新しいものではなくて、HTML4で作成された大企業のホームページもまだあったります。

HTML5では出来る事の範囲が、動的に作らなくてもタグで実現できるようになった。

これが大きな違いだと思います。

具体例をざっとみてみます

動画や音声の埋め込みが簡単

HTML4までは、ホームページで動画を再生させる方法としてFlashという技術を使って作成していました。
FlashはHTMLと違うプログラムが必要な為、作成するのにもう一つプログラムを勉強する必要があったのです。

HTML5では後述しますが、<video>タグですぐさま動画呼び出すことが出来たりするんです。

Flashもやっていた僕からすると、なんて良い時代なんだ…と思います。

HTMLの文章構造がシンプル

HTML4で書かれたソースコード見て頂くのが一番早いと思いますが、HTML5と比べるとソースコードが長く煩雑なものが多いです。

HTML5では「ここはこういう場所だよ!」とわかりやすく構造化できます。

例えば、「ヘッダーだよ」、「ナビゲーション」だよとタグで定義出来るので、余計なidやclassの表記が不要になってるんですね。

HTML構造化とは

では構造化とは何かですが、「ホームページの構造を検索エンジンにより分かりやすく伝えるために、HTMLにマークアップする専用のコードのこと」を指します。

なんですかそれ…?ってなりますよね。

HTML5で構造化を意識してコーディングすれば、クローラーがコンテンツ内容を認識しやすくなるます、その結果ホームページのインデックスが促進されたりします。
すると、SEOの神様であるGoogleに評価されやすくなるので、SEO効果が見込めるというわけです。

HTML構造化ではこうして、クローラーが来てもこのソースは分かりやすいね!とアピールして、検索エンジンに認識されやすいホームページになると、SEO対策で上位表示に繋がります

これが俗にいうSEO内部対策の一つでもあります♪

HTML構造化のソース例

それではざっくり、HTML5のテンプレートはどんなものなのか見ていきます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>サイト内タイトル</h1>
</header>
<nav>
  <ul>
    <li><a href="#">ナビ1</a></li>
    <li><a href="#">ナビ2</a></li>
    <li><a href="#">ナビ3</a></li>
    <li><a href="#">ナビ4</a></li>
  </ul>
</nav>
<article>
<section>
 <header>
  <h1>ここにタイトル</h1>
 </header>
  <p>ここにテキスト</p>
</section>
</article>
<footer>
<address>Copyright(C)なたのサイト名Allright Reserved.</address>
</footer>
</body>
</html>

本当にノーマルなHTML5のテンプレートです。

 

HTML4のソースと頭だけ比べてみます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

頭の長さだけで、こんだけ違うんです…。

各HTMLタグについて

それではhtml5の主要タグを解説していきます。

1.<!doctype html>

このテキストはHTMLだとブラウザに説明するための宣言です。

2.<html lang="ja">

このHTMLは日本語を扱うとブラウザに説明するための宣言です。

3.<meta charset="UTF-8">

このHTMLの文字コードはUTF-8だとブラウザに説明するための宣言です。

4.<head></head>

この中にmetaタグやtitleタグ、スタイルシート(CSS)の読み込み、スクリプト(JavaScript)の読み込みを記入したりします。

5.<body></body>

ざっくり言うと、見える部分をここに記入します。(厳密には必ずしも見えるとは限りません。)

6.<header></header>

ヘッダーと呼ばれる部分です。Webサイトの頭の部分なので、サイトのタイトル(titleタグとは異なります。h1タグを使うことがほとんどです。)などを記入しましょう。

7.<nav></nav>

ナビゲーションと呼ばれる部分です。よく見るこのような部分です。

8.<article></article>

その名の通り、記事などで使います。

9.<section></section>

導入部分、新着情報、お知らせなどひとつのまとまりとして使います。

10.<footer></footer>

著作者情報などを書きます。

主なタグはこのような感じです。

どのように使われているかは、実際みなさんの目でhtml5構造のサイトを見て、分解していく方が勉強になると思います。

HTML構造化でSEO内部対策に注力しよう!

HTML構造化は「タイトル」「キーワード選定」「コンテンツの書き方」というSEOを大きく上げる要素と比べると、そこまでの力は持っていません。

しかしプログラミングとしてHTML構造化を覚えておくと、SEO対策の一環にもなりますし無駄なコードを書かなくてもよくなります。

「HTML構造化はSEO対策の一部である」というのを知って頂ければ良いと思います。

それでは最後までお読み頂きありがとうございました♪

  • この記事を書いた人
SUMMY

SUMMY

地方の商社でITソリューション担当。 主にWebマーケティング・コンサルティングしてます。BtoB向けのSEOコンサルも任されて、結局全部やっちゃってくれ状態。 ここでは主に趣味の筋トレや健康サポート、Wordpressを始めとしたホームページに関する事を記事にしています♪

-SEO

Copyright© URUOSHI , 2021 All Rights Reserved.