ホームページのcssについて理解のある方教えて下さい。cssファイルを利用したページで、検索エンジンから検索されたページに飛ぶと、本来だったらメニューの枠内に表示されるべきページのみが単体で表示されてしまいます。


作ったホームページは

(表示させたいレイアウト)http://www.okazakichinese.com

岡崎中国語教室という京都の左京区、岡崎にある中国語教室です。


ところがこれをgoogleで検索すると、

(リンク先は表示させたくないレイアウト)http://www.google.co.jp/search?hl=ja&rlz=1T4GGIH_ja___JP205&q=%E5%B2%A1%E5%B4%8E%E4%B8%AD%E5%9B%BD%E8%AA%9E%E6%95%99%E5%AE%A4&lr=


の下から2番目のページのように、枠内に表示されるべきページが単体で表示されてしまいます。


これを解決するプログラムを示してください。ご助力をお願いします。

回答の条件
  • 1人3回まで
  • 登録:2007/06/04 13:56:45
  • 終了:2007/06/11 14:00:04

回答(5件)

id:inokuni No.1

いのくに回答回数1343ベストアンサー獲得回数212007/06/04 14:17:59

ポイント20pt

この事象は css とは関係があまりなく、iframe という HTML タグで別ファイル(page01.html や page02.html 等)を表示していることに原因があります。Google でそのように表示されるのはこのようなファイル構成にしている以上、そのようになる仕様です。


JavaScript を使った物で下記のようなものがありました。

http://user1.matsumoto.ne.jp/~goma/js/frame.html


IFrame の場合

これも基本的には Frame の場合と同じ。

まずフレームの中に入るページ全てのHEAD 内のなるべく上の方に以下を記述する

<script type="text/javascript" src="**.js"></script>

**.js の中身は

if(top == self){
  iPath = "http://www.okazakichinese.com/" ;
  location.href = iPath + "?" + location.href;
} 

IFrame があるページでは IFrame 要素のすぐ下辺りに JavaScript を記述しておく。 間違って IFrame 要素より前に書くとエラーとなり動かない。

<iframe src="page01.html" height="350" frameborder="0" class="area" scrolling="yes" name="in"></iframe>
<script type="text/javascript"><!--
fName = "in"; // iframe の name 属性でつけたユニークな名前
if(location.search &amp;&amp; window[fName])
    window[fName].location.href = location.search.substring(1);
// -->
</script> 

↑「if(location.search &amp;&amp; window[fName])」は

 「if(location.search && window[fName])」に書き換えてください。

id:ReoReo7

とても丁寧な回答ありがとうございます。

SEOとしては、フレームを使わないページ、使うページ、どちらがいいか知見をお持ちですか?

2007/06/04 14:30:47
id:onigirin No.2

onigirin回答回数327ベストアンサー獲得回数232007/06/04 14:30:38

ポイント20pt

検索エンジンは、リンクでつながっていると

全て保存していきます。

そこで、検索エンジンがきても「保存しないで」というアピールをすることで、

保存されることをある程度防げます。

http://www.google.co.jp/intl/ja/remove.html

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

と、表示されたくないページの「<head> </head>」内に記述すると、ロボットを弾く設定にできます。

ただ、これも完全ではありません。


問題のページへアクセスされた場合、

正しいページへ「自動的に移動」させることは可能です。

http://www.tagindex.com/html_tag/page/meta_05.html

<meta http-equiv="Refresh" content="0;URL=http://www.okazakichinese.com/">

と、表示されたくないページの「<head> </head>」内に記述すると、自動的にトップページへ移動するようになります。


このページだけ表示されて困る場合は、

・検索エンジンにひっかからないようにする

・自動的に別ページへ移動させるようにする

とします。

id:ReoReo7

ありがとうございました。

2通りのやり方が出てきました。

ロボットがスルーするのはSEO上やや不利のような思いますが、後者の

「問題のページへアクセスされた場合、正しいページへ「自動的に移動」させる」という対策は有効そうです。



どちらの対策をとるか/どちらも併用する(可能?)か、どの選択をするべきかどなたかアドバイスお願いしたく思います。

2007/06/04 14:33:18
id:inokuni No.3

いのくに回答回数1343ベストアンサー獲得回数212007/06/04 14:46:40

ポイント20pt

より簡便な方法が下記のページに記述されていました。

<body onLoad="if (parent.frames.length==0) top.location='http://www.okazakichinese.com/';">

というbodyタグを iframe 内に表示されているページすべてに記述するといいようです。


frame を使用した際の SEO に関係する問題点については

  • 第1に、frameset を定義する HTML ファイル自体には、どのファイルを画面上に読み込むかの記述はあってもコンテンツ自体はありません。従って検索エンジンのクローラーがこの frameset ファイルを読み込んでも与える情報がありません。従ってWebページの評価が下がります。
  • 第2に、コンテンツの増加に伴ってどれだけWebサイト内のページ数が増加しても、最適化できるファイルは frameset 定義されたファイルに限られてしまいます。なぜなら、フレーム内で読み込まれるWebページはそれ単独で表示させるわけにはいかないからです。
  • 第3点。仮にフレーム内で表示されるべきある特定のファイルが上位に表示されてトラフィックを誘導できたとしましょう。しかし上述した通りナビゲーション部分がそのページ自体に存在しなければ、訪問者は検索エンジン経由で訪れたそのページから他に移動する事はできません。
  • 第4点は SEO 以前の問題で、訪問者が好んだ特定のページをお気に入り(ブックマーク)できないという問題です。

と記述されていました。


結論として

このようにフレームサイトはユーザビリティ及びSEOの観点どちらからもよくありません。

とまで記述されています。


どうしても frame を使用したいということであれば、解決策としては

  • 1つ目。frameset 定義をするファイルの、タイトルタグ、及び META タグをきちんと記述しましょう。これは基本です。トップページの内容に沿った適切なタイトルタグと META タグを設定して下さい。たくさんのキーワードで最適化をしようとしないで下さい。1つのページで最適化可能なキーワードの数は多くても3つ程度です。
  • 2つ目。frameset 定義するファイルに <noframe> ~ </noframe> を入れて下さい。<noframe> はフレーム表示非対応のブラウザでアクセスしてきた訪問者に対して表示するためのものですが、これはクローラーも内容を読み取ります。

フレームで表示するトップページの、非フレーム版のWebサイトを制作すると考えてこの <noframe> ~ </noframe> 内に記述して下さい。テキスト中心で作成すればよいので、検索エンジンに好まれるような作り方を心がけて下さい。でもクローラーしか見ないからといってスパムぎりぎりの行為は慎むことです。

  • 3つ目。クローラーは本来フレーム内で表示されるべきファイルをデータベースに登録してしまっており、訪問者は検索エンジン経由でそのファイルにアクセスするかもしれません。その時は自動的に frameset タグを読み込んでもらうようにしましょう。

ということだそうです。

id:Yota No.4

Yota回答回数453ベストアンサー獲得回数282007/06/04 15:00:22

ポイント20pt

index.htmlの方が勝つようにSEO対策をすればよいのではないでしょうか。

もっと根本的に言うと、今大流行のAjaxやDHTMLの視点からすると、こういったframeを使う必然性というものはないと思います。

JavaScriptでdivの内容を差し替えれば済むからです。

それとこのframeというタグの最大の欠点は、ネットワーク上の資源を一意に特定できないということです。たとえば、御社のページのメニューから開催中のイベントを選んで講師の写真が出ているページに注目した人がこのリンク(http://www.okazakichinese.com/index.html)を友達にメールで送ったとします。これを受け取った友達がリンクをクリックしてもNEWSが見えて話が合わないかもしれません。そういう欠点が検索エンジンにおいても出ているのかなと思います。

以上のような理由でframeというものは、やむにやまれない以上は使わないほうがいいと思います。

わたしの予想では、今世紀の終わりまでにはframeタグは絶滅すると思います(^^)。

id:blanccasse No.5

blanccasse回答回数142ベストアンサー獲得回数152007/06/04 20:01:32

ポイント20pt

(未読の回答があるため、回答が被っていた場合は申し訳ありません。)


2番までの回答と返信、コメントを拝見させて頂きましたが、

まず、CSSの解釈が異なるのではないでしょうか。

CSSはデザインの一括管理をするためのものであり、

例え100ページあってもCSSさえ弄れば、

一度に全部デザイン変更、訂正が可能となるためのものです。

ページを分けたからと言って、デザインが共通ならCSSは一枚のままで大丈夫です。


iframeタグはW3C非推奨となっていますし、

JavaScriptは拒否しているユーザーも存在します。

なので、この程度の情報量でしたら、ページを分け、

各ページに同じCSSファイルを読み込ませるのが最良だと思います。


最後に、蛇足ですが。

せっかくCSSを使用するのですから、

メニュー部分はマウスオーバーで背景画像が入れ替わるようにしては如何でしょうか?


例えば、HTMLには下記のように記載。

<div class="left">
 <ul id="menu">
        <li><a href="page01.html" target="in">ホーム</a></li>
        <li><a href="page02.html" target="in">☆教室の紹介☆</a></li>
        <li><a href="page03.html" target="in">講師と授業風景</a><li>
        <li class="point"><a href="page04.html" target="in">*開催中のイベント*</a></li>
        <li><a href="page05.html" target="in">掲示板</a></div>
        <li><a href="page06.html" target="in">リンク</a></div>
        <li><a href="page07.html" target="in">お問い合わせ</a><li>
        <li class="point"><a href="page08.html">体験レッスン申し込み</a></li>
 </ul>
</div>

現在のグレーのメニュー背景とマウスオーバー時の色違い背景を一枚にした画像を用意します。

対応する部分のCSSとしては、

#menu {
	margin-bottom: 4px;
	text-align: center;
	}
#menu li a {
	display: block;
	width: 130px; /* 画像1枚分の横幅 */
	height: 27px; /* 画像1枚分の高さ */
	padding:5px;
	color:#000000;
	text-decoration: none;
	background-image: url(menu.gif);
	}
#menu li a:hover {
	color:#ee0000;
	background-image: url(menu.gif);
	background-position: top right;
	}
#menu li a:visited {
	color: #000000;
	background-image: url(menu.gif);
	} 
#menu li a.point {
	color: #ff0000;
	}

こんな感じで大丈夫だと思いますが、間違っていたらごめんなさい。


分かりやすいURLを上げておきますので、色々試してみてください。

http://www.nishishi.com/css/link-image-hoverchange.html

ご参考まで。

  • id:ReoReo7
    "プログラムを示せ"というのはもちろん、”この部分をこうしろ”というアドバイスでお願いします。

    それから、SEO的視点で見ると、CSSを利用せずに、メニューを固定して、同じ記述が重なってもページを何枚も作ったほうがいいのでしょうか?
  • id:ReoReo7
    お返事が遅くなり申し訳ありません。

    アドバイスをいただけた皆様ありがとうございました。


    頂いた意見について一つ一つ検討し最良のものを実行していきたいと思います。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません