SEOに関する実験やデータ分析などを公開します

SEOの疑問を実験で解明しブログ配信【SEOラボ】

ヘッダーとフッターのHTML固定方法とデザインまとめ

2016/09/12 2018/10/19

ヘッダーやフッターを固定し、ユーザービリティを高めながら、サイト構築する方法があります。

今回は、ヘッダー・フッターのHTML(HTML5)固定方法、ヘッダー・フッターのデザイン、ヘッダー・フッターとSEOについて中心に解説したいと思います。

ヘッダーとフッターのHTML固定方法とデザインまとめ

ヘッダー(header)とは

ヘッダー(<header>)とは、HTMLファイルのbody内に記述するタグの一つで、webページ上部のコンテンツを表示するために指定するタグ要素です。
ヘッダー(<header>)は、HTML5から追加されたタグ要素です。

ヘッダーの記述例

ヘッダー(<header>)は、HTMLファイルのbody外の<head>タグとは異なります。

フッター(footer)とは

フッター(<footer>)とは、HTMLファイルのbody内に記述するタグの一つで、webページの下部コンテンツを表示するために指定するタグ要素です。
フッター(<footer>)は、HTML5から追加されたタグ要素です。

フッターの記述例

ヘッダー・フッターのHTML(HTML5)固定方法

ヘッダーとフッターの位置をHTML(HTML5)で固定するには、「css(スタイルシート)ファイルで、position:fixed;を指定する」方法があります。

HTMLファイルのタグ要素や指定したidやclass属性に対し、以下のよう、cssでposition:fixed;を指定する

HTMLファイルの記述例

css(スタイルシート)の記述例

上記方法を活用し、スクロールしてもヘッダーが固定されてるサイト(itomakihitode.jp)実例が以下になります。

ヘッダー・フッターのHTML(HTML5)固定方法 イメージ

ヘッダー固定の際に、実際のHTMLファイルへの記述は以下になります。

ヘッダー固定の際に、実際のCSS(スタイルシート)ファイルへの記述は以下になります。

上記方法は、ヘッダーのみならずフッターやその他、固定したい箇所に応用できます。

ヘッダー・フッターのデザイン

ヘッダーとフッターのデザインは、以下のようなサイトが参考になりそうです。

ヘッダー・フッターとSEOについて

ヘッダーとフッターを最適化することで、以下のようなSEO効果が考えられます。

  • ヘッダーとフッターのリンクをテキストにし、SEO効果を高める
    ヘッダーとフッターメニューをアンカーテキストにし、リンク効果を高めながら、サイト評価されやすくする。
    また、ヘッダーとフッターにあるリンクが画像の場合、画像にalt属性を記述し、リンク効果を高め、サイト評価されやすくする。
  • ヘッダーとフッターのデザインを見やすくし、SEO効果を高める
    文字の大きさや色、位置などデザイン調整し、ヘッダー・フッターメニューのクリック率を高めながら、ページセッション、直帰率、平均セッション時間などを改善する。
    ページセッション、直帰率、平均セッション時間などを改善し、サイトパフォーマンスを向上させ、サイト評価されやすくする。
    ※ページセッションは、ユーザーがサイト訪問した際に閲覧するページ数のこと。

ヘッダー・フッターの共通化

ヘッダーとフッターを共通化し、サイト編集を効率化するには以下のような方法があります。

  • phpインクルードを活用する
    ヘッダーとフッターの表示コードが書かれたphpファイルをそれぞれ個別に作っておき、それらを表示させたい箇所にphpインクルードで読み込ませ、共通化する方法。
  • 専用ソフトのテンプレートやライブラリー機能を活用する
    HTML編集ソフト「Dreamweaver」のテンプレートやライブラリー機能を活用し、ヘッダーとフッターを共通化する方法

まとめ

ヘッダーとフッターを最適化し、ユーザービリティを高めましょう。

良質なコンテンツ(ユーザーが求めるコンテンツ)に誘導し、サイト回遊させることが大切です。
そのためには、良質なコンテンツへ向けたリンクを適切に増やしましょう。

SEO対策でサイトパフォーマンスを向上させ、サイト評価を高めながら、順位上昇を目指すことが重要です。

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

カテゴリから記事を探す

SEO対策無料ご提案はこちら