人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ホームページの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番目のページのように、枠内に表示されるべきページが単体で表示されてしまいます。


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

●質問者: ReoReo7
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS Google ファイル プログラム ホームページ
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● いのくに
●20ポイント

この事象は 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])」に書き換えてください。

◎質問者からの返答

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

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


2 ● onigirin
●20ポイント

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

全て保存していきます。

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

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

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>」内に記述すると、自動的にトップページへ移動するようになります。


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

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

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

とします。

◎質問者からの返答

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

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

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

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



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


3 ● いのくに
●20ポイント

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

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

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


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

と記述されていました。


結論として

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

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


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

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

ということだそうです。


4 ● Yota
●20ポイント

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

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

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

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

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

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


5 ● blanccasse
●20ポイント

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


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

ご参考まで。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ