インラインフレームでメニューを作成(外部ファイルの取込み)

私は以前には普通のフレームを使用したり、PHPやSSIを使用してホームページを作成していました。今回、どのサーバーでも使えるインラインフレームを使用してメニューを作ってみました。

PHPまたはSSIを使用して外部ファイル楽天を取り込んでメニューを作成するのはとても便利なのですが、PHPやSSIが使えないサーバーではどうしようもありません。そこで、どこのサーバーでも使えるようにインラインフレームを使用してメニューを作成してみました。

インラインフレームとは

インラインフレームは、HTMLタグのフレームの一種で、ページの中に別のページの内容を表示させる方法です。つまり、個々のページの中にメニューなどの各ページに共通な内容を別ページから取り込むことができます。

これに対して、普通のフレームのページはフレームを設定したページから、分割されたページを呼び出している為に、個々のページは分割された子ページとして表示されています。この為に、個々のページにはメニューやナビゲーションが無い場合が多く、ネット検索やSEOの観点からは不利とされていました。

このインラインフレームをうまく活用するとサイトの更新がとても楽になります。メニューの更新やバナー広告の更新など、その応用は広く便利に使えます。しかし、グーグル・アドセンスはインラインフレーム内で表示するのは禁止されています。

インラインフレームはHTML4やXHTMLでは非推奨でしたが、HTML5では復活しています。この為、今後も末永く使用できると考えられます。

インラインフレームはSEOに有効か

インラインフレームはSEOに有効でしょうか。インラインフレームで表示される部分は本体のHTMLとは別のページになります。つまり、そのインラインフレームの部分は本体のHTMLソースには入らなくなり、ソースが短くなります。

キーワードなどはページの本文に含まれているので、共通なメニュー部分を別ページにすると、不要な部分のHTMLソースが短縮されます。つまり、SEOに有効ということになります。

また、個々のページに簡単に共通メニューを作ることができますので、SEOにはとても有効です。理由は検索で個々のページに来た時、メニューがあれば他のページも見てもらえます。

メニューにインラインフレームを使うメリット

メニューにインラインフレームを使うと、ファイルの管理が非常に楽になります。各ページに挿入したメニューのファイルは基本的にひとつでよく、このメンテナンスが簡単になるからです。

インラインフレームを使用し外部ファイルを取り込んでメニューを作成

HTMLファイルの中でインラインフレームのメニュー(menu.htm)を呼び出すには次のようにします。ここでは、ページの下部にメニューを表示してみました。

<<iframe src="menu.htm" width="90%" height="100" frameborder="yes">
この部分はインラインフレームを使っています。
</iframe>

またメニューファイルの拡張子はHTMLファイルなのでhtmでもhtmlでもよいでしょう。表示させるインラインフレームの幅と高さはパーセント表示かピクセル数で指定しました。frameborderの指定は表示しない場合は"no"とします。

インラインフレームに対応していないブラウザの為に、「この部分はインラインフレームを使っています。」と表示させています。

共通メニュー部分の作成

共通メニュー部分の簡単な例は次の通りです。

<div align="center">
<a href="http://ドメイン/パス/ページ1.htm" target="_top">ページ1</a>
|<a href="パス/ページ2.htm" target="_parent">ページ2</a>
|<a href="パス/ページ3.htm" target="_parent">ページ3</a>
</div>

ページへのパスはhttpからの絶対パスで指定するか、相対パスで指定します。ターゲット属性はフレームを解除する「_top」や親フレームに表示する「_parent」などを使うと普通のフレームページでも便利に使えます。