- ベストアンサー
ページのトップへ戻るためのidの仕込み方
ページのトップに戻るidを設定したいと思っています。 ただ、その中に要素を配置したくないので、以下のように考えています。 <body>すぐ下に <div id="pagetop" style="display: none;"></div> (1)空タグはまずい、と聞きますが、これではよくないのでしょうか？そして、なぜまずいのか、もよくわからない次第で…。お分かりでしたらお教えください。 (2)また、display: none;と書くのはSEO的にはどうですか？ どうぞ、よろしくお願いします。
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
単純にdivでメニューを囲むとか。 見苦しいソースにならなければですが。 <div id="pagetop" class="menu"> メニュー </div>
その他の回答 (8)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
ANo.6の > 試してないですが、スタイルシートでdisplay:noneにするとアンカー先として機能しなくなるんじゃないでしょうか？ これは > ページのトップに戻るidを設定したいと思っています。 > ただ、その中に要素を配置したくないので、以下のように考えています。 > > <body>すぐ下に > > <div id="pagetop" style="display: none;"></div> に対しての意見ですが、 もちろんエレメントは存在しますが、 あらためてMac Opera9で確認したところ、display:noneにするとアンカー先としては機能しません。 なので、質問者さんの希望する動作（トップに戻るためのIDを設定）は無理ではないでしょうか。 ということで、<div><a name="toppage"></a></div>を入れると言うことを提案させて頂いたわけですが、 これならスタイルシートで隠さなくても表示されません。 <div>の改行が気になるのであれば、 <div style="positon:absolute;"><a name="toppage"></a></div> としておけば他の要素への影響もないと思います。 display:noneを使わないので、display:noneに対する懸念も心配いりません。 アンカーを作る方法と、 SEOにおけるdisplay:noneの質問に関連性がないのであれば、無視してください。 > ・適応したいページが膨大で、メニュー部分を共有化しているので、そこに記述したい メニューの中に入れるなら、 <ul> <li><a name="toppage"></a><a href="page1.html">ページ１</a></li> <li><a href="page2.html"></a>ページ１</li> </ul> としたり、 既存のメニューがすでにdiv要素に入っているなら、 <div id="mypagecontainer"><a name="toppage"></a> <ul id="mypage1"> <li><a href="page1.html">ページ１</a></li> <li><a href="page2.html"></a>ページ１</li> </ul> </div> でも良いと思います。 >> <div id="pagetop">に対応していないブラウザの方が多いです。 >そうなんですか？ >よければ参考先などあれば教えてください。 参考先は私のサイト（自分でテストした結果を書いています）です。 もし私以外の方の意見がほしいというのであれば、ご自身でテストして下さい。 <p><a href="toppage">link</a></p> <div id="toppage">a</div> と書いてクリックするだけなのですぐ出来ると思います。 MacIE全バージョン、NN4.8以前が対応していません。IE5.0も対応していないかもしれません。 空要素のアンカー先に飛べないのはLynx2.6らしいですが、入手不可（？）なので確認出来ません。 空要素のアンカーの作成と > (1)空タグはまずい、と聞きますが、これではよくないのでしょうか？ この質問に関連性がないのであれば、無視して下さい。 ちなみに空タグ（空開始タグ、空終了タグ）と空要素と空要素タグはそれぞれ別物ですが、 空要素のことを仰っている物と勝手に判断させて頂きました。 空開始タグ、空終了タグはおそらく全てのブラウザが対応していませんので、使わない方がよいでしょう。 「アンカー」「アンカー先」でわかりにくければ、「リンク」「リンク先」と読み替えて下さい。
お礼
御礼が非常に遅くなってしまってすみませんでした。 報告ですが、今回は、メニューをdivで囲うという方法で対応しました。 ですが、ご回答をみて勉強になりました。 今後製作する際、display:noneでのid設定は避けようと思います。 今回の質問で、もっとW3Cの推奨を勉強しようと思いました。 どうもありがとうございました！
- goldfox
- ベストアンサー率49% (123/249)
> 試してないですが、スタイルシートでdisplay:noneにするとアンカー先として機能しなくなるんじゃないでしょうか？ 画面上に表示されていなくとも、「そこにidがある」ことに変わりはないので問題はありません。 > <div id="pagetop">に対応していないブラウザの方が多いです。 そうなんですか？ よければ参考先などあれば教えてください。
- goulan
- ベストアンサー率46% (23/50)
SEO について。 私の理解の範囲内です。間違っている部分があるかもしれません。というか、多分あるんじゃないかなと思うのですが・・・後は、御自分で勉強なさるしかないかと思います。 "idを埋め込むために中身のない要素を置き、さらに表示を避けるために display: none; を指定する" これがスパム行為に当てはまるかどうか？というご質問だと判断します。 私には、絶対に当てはまるとも当てはまらないとも言えません。なぜなら、ロボット検索を運営している「側」ではないからです。ですので、以下「らしい」とか「多分」としか言えない事をご承知おき下さい。 意図的、無意識、気付かない間違い、何であっても、欺く行為であるとクローラーのアルゴリズムが判断したならば、スパム行為と見做されるようです。クローラー自身が持っている判断分岐は、スパムに当てはまると判断したのちに、"これは間違って書いたのだろう"とか、"topに戻るidを表示なしで入れたかったんだろう"などという「推測」はしないでしょうね、多分・・・。 display: none; を使用する事そのものには問題ありませんが、使い方次第では、スパム行為と見做されることがあるかもしれないという意味です。ご自分で調べてらっしゃるようですから、スパム行為と見做される事例は出しません。 display: none; を使うならば、スパム行為と見做される事例を良く眺めて、それに当てはまらないように使う 。それしか言えません。多分、運営側（Google, goo, infoseek など）に質問しても、アルゴリズムは教えてくれないでしょうし。 SEOとスパム行為は表裏であり、異なるのは、その目的と内容です。ロボット検索がどのように働くのかを考えれば、SEOもスパム行為も似た者同士だとお判り頂けると思います。 ページトップに戻るための id をどこに、display: none; で書くか。サイトを訪れる人に対しては、どの様に書いても実際のページ内ジャンプは、若干の違いしかありません（除：音声読上げUA；音声読み上げは対応してない事がほとんどです）。 body, div,menuの要素。しかし、クローラーにとって、display: none; を読み取った時点で、何かしらの判断があるのではないか？と想像してます。 過去にそれを悪用してきたページが多い「らしい」からです。 私見ですが、使っちゃいけないものではなし、私も使うことあります。しかし、ペナルティを課せられたことはありません。目的的に正統な理由があるから使う、ではなく、私のスタイルとして使う、必要があるから使う。要素もスタイルもそうなのだと思っております。
お礼
ご回答を見て、もっと知識を増やして自信を持って自分のスタイルが確立できるように、勉強しようと思いました。 貴重なご意見、ありがとうございました！
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
試してないですが、スタイルシートでdisplay:noneにするとアンカー先として機能しなくなるんじゃないでしょうか？ アンカー先を目的とするなら、アンカー先を入れるのが良いんじゃないでしょうか。 <body> <div><a name="pagetop" id="pagetop"></a></div> <div>ヘッダ</div> もちろん、ヘッダに入れても良いと思います。 <body> <div><h1><a id="pagetop"></a>タイトル</h1></div> 空要素の<a>を避けるべきと言うのは、10年ほど前のブラウザで、空要素のアンカーに対応していないブラウザがあったからですが、 それに比べれば<div id="pagetop">に対応していないブラウザの方が多いです。 name属性が非推奨だからといって、<a id="pagetop">トップ</a>とするのであれば、空要素未対応ブラウザを考える必要はありません。 内容のない段落<p></p>というのは、文書として不適切だと思いますが、 （HTMLの文法としては正しい記述だが、ブラウザは無視すべきとあります。） テーブルの行の列数を合わせるために<td></td>としたり、 JavaScriptで使用するための<div></div>や、アンカーのための<a></a>はHTML（マークアップ）として適切だと思います。 実際にW3Cの例でも<a></a>が使われています。 http://w3g.jp/css/display_position/display > 無意味にむやみやたらと要素を CSS で消したり・非表示にする等の誤解を招くような使い方はできるかぎり避けた方が無難なようです。 > ANo.5 > 基本的に、人に見せるためのページ上で、"display : none ;" を使う機会はほとんどないと思いますが。 たしかにHTML/XHTMLとスタイルシートだけのページではdisplay:noneはほとんど使い道がありませんが、 解説文などをかくしておいて、JavaScriptのonmouseoverなどで表示するなど、実際に使われる場面は多いです。 （特定の状況下でa:hoverを使ってCSSでも実現出来ます） そういうページでは、意味のある隠し文章を大量に持っています。 もちろん、スパムサイトと見なされているページもあると思いますが、 これらが全てがスパムサイトと見なされているわけではないと思います。 むしろスパムではなく、被リンク数が少ないなどの理由で上位に表示されないだけではないでしょうか。
お礼
御礼が非常に遅くなってしまってすみませんでした。 報告ですが、今回は、メニューをdivで囲うという方法で対応しました。 ですが、ご回答をみて勉強になりました。 今後製作する際、display:noneでのid設定は避けようと思います。 今回の質問で、もっとW3Cの推奨を勉強しようと思いました。 どうもありがとうございました！
- goldfox
- ベストアンサー率49% (123/249)
> ただし、この "none" には制作者の動機的問題があって～ 読む限り、「隠しテキストを作る小細工」（色々な検索用キーワードを書いてページ上には表示させない）がスパム行為に当たるのであって、"display : none ;" 自体には問題はないように思われます。 気になるなら多用は避ける方向で作成していけばよいのではないでしょうか。 基本的に、人に見せるためのページ上で、"display : none ;" を使う機会はほとんどないと思いますが。
お礼
御礼が非常に遅くなってしまってすみませんでした。 ご報告ですが、今回は、メニューをdivで囲うという方法で対応しました。 できる限り、display:noneを使用しないような製作ができるようにしたいと思います。 どうもありがとうございました！
- goulan
- ベストアンサー率46% (23/50)
1. 空要素以外、要素の中身がない状態は良くない・・・というか、基本的には有り得ないと思っております。html は 何かをマークアップするためにあるのですから。それと、UAは中身がない場合、つまり、<p></p>などは無視します。 2.どうですか、というのは「何が、どうなのか」何を御質問なさっているのか良く判りませんが・・・ クローラーが拾ってくれるかどうかとか、具体的にお願いします。SEOあまり詳しくないですが、私は。判る範囲でしたら。 ページトップに戻る idについて。 その共有なさっているメニュー全体を div id="**" でという意見に賛成です。それがお嫌ならば、display: none;を指定し、マークアップされる文などを入れましょう。display: none; はレンダリングされません。ですから、何も表示されませんし、隙間も空かない（はず）です。
お礼
ご回答、どうもありがとうございます！ マークアップとしてよくない、ということですね。 皆さんの意見を聞いて、メニューをdivで囲む方向にしようかと思い始めました。検討しようと思います。
補足
（2）についてですが、display: noneについて検索していたところ、こんなページを見つけまして↓ http://w3g.jp/css/display_position/display ----略--- ただし、この "none" には制作者の動機的問題があって、一時期、"visibility : hidden ;" や "display : none ;" といった要素を消したり・非表示にする手法を利用して検索エンジンのロボットにだけ上位表示させたいキーワードを収集させ、検索エンジンを欺くような隠しテキストを作る小細工が横行したことがありました。現在では、このような行為は検索エンジンスパム行為として、スパム行為を行っている文書に対して、またはスパムの程度によってはドメイン単位でペナルティ（検索結果の表示順位の下落や検索結果からの削除）が課せられるとされています。 ----略--- それで、どうなんだろうか、と思いたった次第です。 聞きかじり程度の知識で、なんだか、ぼんやりとした質問になってしまってすみません。
- goldfox
- ベストアンサー率49% (123/249)
えーと、なら空要素を利用するとか。 （技術的というか専門的な意見でなくてすみません。） <hr id="pagetop" style="display: none;">
お礼
続けてのご回答、どうもありがとうございます！ 皆さんの意見を聞いて、メニューをdivで囲む方向にしようかと思い始めました。検討しようと思います。
- goldfox
- ベストアンサー率49% (123/249)
> 空タグはまずい、と聞きますが、これではよくないのでしょうか？ 「その中に要素を配置したくないので」 これの理由次第だと思いますけど。 <body id="pagetop"> で問題はないと思います。
お礼
早速のご回答ありがとうございます！
補足
要素を配置したくない理由を補足します。 ・ページの最初にメニューがあるため また、bodyタグに記述せずに、body以下に記述で実現したいのです。理由としましては ・適応したいページが膨大で、メニュー部分を共有化しているので、そこに記述したい メニューに使用しているid使用を考えましたが、メニューが複数パターンあり、id名が統一されていないため、叶いませんでした。。 いいお知恵、ありましたらよろしくお願いします。
お礼
思いつきませんでした、ありがとうございます！ メニューをdivで囲って、ひとまず検証してみたいと思います。