1. ホーム > 
  2. Webサイト集客 > 
  3. SEO(検索エンジン最適化) > 
  4. SEO内部対策 > 
  5. SEOに最適なHTMLソース、SEOを意識したh1の位置とは?

SEOに最適なHTMLソース、SEOを意識したh1の位置とは?

HTMLソースを最適化すれば検索順位が上がるわけではありませんが、ユーザーの利便性を高め検索エンジンにページの内容を伝えやすくするポイントはあります。SEOに最適なHTMLソースの要件をご紹介します。

  • 2015/9/20
  • 2015/9/21

SEOを少しでもご存知の方なら、「ページの大見出しであるh1タグはできるだけHTMLソースの上の方、つまりbodyタグにできるだけ近い方がいい」という話を聞いた事があるのではないかと思います。

左上に小さな文字が書かれているページはよく見かけますよね。この部分がh1タグになっているページが未だに多いのです。

では、この話は現在でも通用するのでしょうか?また、SEOを意識したHTMLソースはどんなものなのでしょうか?

h1タグはメインコンテンツの手前が最適

2015年6月30日の英語版オフィスアワーで、Googleのジョンミューラーがh1タグを設置する場所について、ヒントになる事を話しています。

動画の内容は海外SEOブログで詳しく紹介されていましたので引用させて頂きました。

  • 定型文のコンテンツではなく、そのページ固有のコンテンツに基づいて評価する
  • 定型文とメインコンテンツに同じ言葉があったからといって、その言葉の価値を低くしたりはしない
  • 定型文のあとに、h1タグからメインコンテンツを始めるのは、どこからメインコンテンツが始まるかをGoogleに伝える手助けになる
  • ページの上部にある定型文のテキストはスニペットに使われることがある

引用:全ページ共通のテンプレート定型文をGoogleはどのように評価するのか? | 海外SEO情報ブログ

ジョンミューラーの話では「定型文のコンテンツをGoogleはどう評価するのか?」という話で、Googleはそのページ固有のコンテンツと共通コンテンツを分けて、メインコンテンツに基づいて評価すると言っています。

そして、メインコンテンツの手前にh1タグを置く事で、どこからがメインコンテンツの始まりなのかをGoogleに伝えるのに役立つとも言っています。
つまり、h1タグは以前のように、HTMLソースの上の方でもbodyのすぐ後でもなく、メインコンテンツのすぐ手前に設置する事が最良だと言えます。

もはや、ページの左上に小さな文字でテキストを書き、h1タグにする意味はありません。

SEOに適したHTMLソースの要件とは?

この話から分かることは、SEOに適したHTMLとは「ページ中にメインコンテンツがどこにあるのかをGoogleに伝えやすいHTMLソース」という事です。

また、意味のない無駄なタグはできるだけ排除して、HTMLソースそのものを軽量化する事も忘れてはいけません。
HTMLソースが軽い方がレンダリング(画面に表示さされること)スピードも早くなるので、ユーザーにとっても検索エンジンにとってもいいことずくめです。

サイドメニューはメインコンテンツの後に記述

この話はUXの観点でもあるのですが、ページのナビゲーションなどが表示されるサイドメニューは、HTMLソース上ではメインコンテンツよりもあとに記述するのが好ましいと言えます。

ユーザーは常に高速なインターネット回線を使ってアクセスしているとは限りません。モバイル環境の場合など、低速な回線を使ってWebサイトにアクセスする場合も考えられます。

そういった低速回線を使ってページにアクセスする時に、メインコンテンツが先にレンダリング(表示)されるようにHTMLソースを記述しておけば、仮にページを読み込んでいる途中で回線に問題が発生したとしても、メインコンテンツは読むことができます。

さらに、サイドメニューにはバナー広告などのユーザーが興味を持たないかもしれない要素も多いので、そういったものがメインコンテンツよりも先に表示されると、ユーザーはストレスが溜まってしまいます。

最近ではサイドメニューを排した「ワンカラムのWebサイト」も増えてきましたが、思い切ってそういうレイアウトにするのも方法の一つと言えるのかもしれません。

SEOに適したHTMLソースの要件

SEOに適しているHTMLソースの要件ををまとめると以下のようになります。

  • h1タグはメインコンテンツの手前に
  • 無駄なHTMLタグを排除してできるだけ軽くする
  • ヘッダー→メインコンテンツ→サイドメニューの順でレンダリング(表示)されるように記述

SEOを意識したときのHTMLソース

ごく簡単なHTMLですが、SEOに適したHTMLソースの要件を実現する方法をご説明します。
左側にメインコンテンツがあるデザインが一般的だと思いますが、右側にメインコンテンツがあるタイプのHTMLソースも合わせてご説明します。

HTMLソース

共通のHTMLソースで、サイドメニューは左側にも右側にも表示させることができます。

<body>
	<div id="header">
	<!--ここはWebページのヘッダー部分です-->
	</div>
	
	<div id="main">
	
		<div id="main-contents">
			<h1>メインコンテンツの見出し</h1>
			<!--ここにメインコンテンツを記述します-->
		</div>
		
		<div id="side-menu">
			バナー画像など
			<!--ここにサイドメニューを記述します-->
		</div>
	</div>
	<div id="header">
	<!--ここはWebページのフッター部分です-->
	</div>
</body>

左側にメインコンテンツがあるデザインのCSS

#main{
	width:1000px;
}

#main-contents{
	float:left;
	width:700px;
}

#side-menu{
	float:right;
	width:300px;
}

右側にメインコンテンツがあるデザインのCSS

#main{
	width:1000px;
}

#main-contents{
	float:right;
	width:700px;
}

#side-menu{
	float:left;
	width:300px;
}

2種類のCSSの違いがお分かりでしょうか。floatで回り込みを右側にするか左側にするか、ただそれだけの違いで、サイドメニューの位置を左側にすることも右側にする事も容易に実現することができます。

Webサイトをリニューアルする際や、新しいページを制作する際に基本的な知識としてお役にたてば幸いです。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク(6か月のガッチリ型)

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします