classとidの名前の付け方

質問

classとidの名前の付け方についてお伺いします。

1. classとidの名前の付け方によってSEOに関係するのでしょうか？

2. むやみにclassやidを付けずにセレクターなどを使うほうがよいのでしょうか？

3. 例えばid="category1"とつけるのとid="cat1"というように省略するとgoogleは「cat1ってなんだよ？」と判断したりしてランクを下げたりしますか？

4. 同じid名を1つのhtml内に複数使っていたり、class名が1つしか使われていないWebサイトをよく見掛けます。これでもブラウザは解釈するようですが、html内で1つしか使わないのにclassで指定するのは良くないのでしょうか？

5. そもそもidとclassをgoogleはどのように判別しているのでしょうか？idは見出し、classはその下のカテゴリとか・・・そういう感じですか？

なかなかネットを検索してもわからなかったのでこちらで質問させて頂きました。
お手数ですがよろしくお願い致します。

回答No.2

ORUKA1951 · ベストアンサー

1. classとidの名前の付け方によってSEOに関係するのでしょうか？
　関係します。仕様書には
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より
　と書かれているように、idやclass名は、文書構造を補完するために使用するものです。CSSの仕様書にも
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
文書作成者が定めたクラス名では、意味を理解してもらえない場合もある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html )］より

　HTML4を改定してHTML5を作成するときにGoogleなどは、HTML4のこの仕様書の記述があいまいすぎると強く主張し、多くの「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」が追加されました。
　class名には、section、article、aside、、header、footer、nav、figureのような意味のあるものを割り当てるべきですね。

2. むやみにclassやidを付けずにセレクターなどを使うほうがよいのでしょうか？
　むやみ二と言う意味がわかりません。文書構造を示すために可能な限りHTMLの要素を使用し、それでは不十分なときにclass名やidをつけます。
<div class="section" id="Wha_is_HTML">
　　<h2><abbr title="Hyper Text Markup Language">HTMLとは?</h2>
　　<p>段落</p>
　　<p class="figure"><img***
というふうに・・

3. 例えばid="category1"とつけるのとid="cat1"というように省略するとgoogleは「cat1ってなんだよ？」と判断したりしてランクを下げたりしますか？
　それが関係することはないでしょう。ただ、先であなたが苦労することになります。もっと具体的に
　<div class="section product" id="vacuum-cleaner">
　のように、誰が見てもそのセクションが何について書かれているかわかるようにすべきです。何の省略なのかわからないのでは意味がありません。

4. 同じid名を1つのhtml内に複数使っていたり、class名が1つしか使われていないWebサイトをよく見掛けます。
　そのclassに該当するものが、その文書にひとつしかなければたとえclassであっても一箇所です。・・当然ですね。
　idについては、必ず１箇所です。
　★文法的に「正しいか否か」とブラウザがそれを処理できるかは分けてください。HTML4.01では、その点が曖昧・遠慮がちだったため多くの混乱を招きました。先のidやclass名もそうですが、「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」と明記されていたにも拘らず、いまだにtransitinalやframesetが使われ続けています。HTML5では「著者が使えるもの」「ブラウザがサポートしなければならないもの」が明確になりました。HTML4でも実は・・
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
推奨しない要素は、・・・【中略】・・・推奨しないことを明記する。
・・・【中略】・・・
ユーザエージェントは、過去との互換性のため、 推奨しない要素をもサポートすべきである。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より

と書かれていました。それがもっと厳しく「ユーザーは使用できない」「ブラウザが対処するもの」となります。
　たとえ、二箇所idがあっても表示されますが、誤りです。「酒を飲んでいても車は動きます。」

5. そもそもidとclassをgoogleはどのように判別しているのでしょうか？
　それが文書構造を補完する一般的なものなら理解しています。すくなくともHTML5で導入される要素名のようなclass名は判断基準にしているようです。
　しかし、それはSEOにとってそれほど重要ではありません。
【SEO】とは、本来は検索エンジンがその文書の内容を正確に理解できるようにすることです。
ランクアップのためではありません。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　検索エンジンが、そのページの内容を正確に理解できれば、アルキーワードに対して「このページが詳しいよ!」「このページが多くの人から参照されているよ」と検索結果に反映できる・・という結果として現れるのです。

【サンプル】
★円形の配置にするコーディングについて - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7649067.html#a1 )のHTMLは、strictであり、class名やidも本来の使い方がされています。一見して、どこに何が書かれているかわかるはずです。class名を要素にすれば、HTML5になります。<div class="header">→<header>，<div class="nav" id="siteMap">→<nav id="siteMap">。
　それでも、それに対するスタイルシートのように、自在にデザインできます。それどころか、プルダウンのようにまったく異なるデザインにすることもできます。なぜなら文書構造がきちんと書かれているから・・

＞なかなかネットを検索してもわからなかったので
　そんなことはないはずです。たくさんの仕様書が邦訳されて公開されています。そこにすべて正確に書かれているはずです。ネットであなたが得たものは、自己流に解釈したものや、そもそも仕様書を理解していない、あるいは読んですらいないものばかりなのでしょう。
　だって、知っていれば、仕様書へのリンクを示せばよいだけです。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　あなたが質問されたすべての内容を正確に知りたければ
★HTML 4.01仕様書 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
★REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )
★HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff )
などをお読みなさい。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
1.2 仕様の記述法
　本仕様書は、著者及び実装者という2種類の読者を想定している。著者である読者に対しては、本仕様書が、HTMLの実装詳細に必要以上に触れずに使える、効率的・魅力的でアクセス性のよい文書を著述する際に必要な道具となることを望む。
　・・・【中略】・・・
　本仕様書は様々な方法で利用できるだろう。
　● 最初から最後まで通読する。
　　　本仕様書は、HTMLに関する一般表現から始まり、末尾に向けて徐々に技術的で
　　特殊な内容になっていく。
　● 必要な情報に直接アクセスする。
　　　できるだけ素早くシンタクスやセマンティクスに関する情報を得るために、
　　オンライン版の仕様書には次の特徴を持たせた。
　　1.要素や属性についての参照は何れも、本仕様書内の当該要素・属性の定義箇所に
　　　リンクしている。各要素及び属性は、その一箇所で定義している。
　　2.各ページに索引へのリンクがあるので、 要素または属性の定義を読むために、
　　　2回より多くリンク移動する必要はない。
　　3.言語リファレンスマニュアルの各ページ冒頭には、全体の目次より更に詳細に
　　　当該ページ内容を記したページ目次を掲げてある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書 1.2 仕様の記述法( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/about.html#h-1.2 )］より

お礼

非常に詳しくご解説頂きましてありがとうございます。

class名の付け方はHTML5が参考になるのですね。
私が使っているサイトはショップカートでheaderはいじれないのでXHTML 1.0 Transitionalとなっていますが・・・。

もう1つお教え頂きたいのですが、
<div class="section product" id="vacuum-cleaner">
のようにclassとidを両方記述するのはどういった意味があるのでしょうか？
私はjavascriptで要素を探すのにあえてclassとは別にidを付けることはあるのですが、
それ以外はちょっとどう使うのかがわかりません。

仕様書・・・なかなか膨大な情報量ですね＾＾；
なるべく構造が簡潔になることと、id名・class名をわかりやすい名前にすることから修正していきたいと思います。

回答No.3

ORUKA1951

＞classとidを両方記述するのはどういった意味があるのでしょうか？
　目的が異なるからです。

7.5.2 要素識別子: id属性とclass属性 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#adef-id )

　たとえば
class名にnavと付いていれば、ナビゲーションと決めておく。たとえそれが本文(section)中にあろうとフッター(footer)内にあってもよいです。
　スタイルシートでサイト内のナビゲーションが統一されていたほうがよいので、
a:link{color:blue;}/* 詳細度[0,0,1,1]*/
div.nav li{background-color:blue;}/* 詳細度[0,0,1,2]*/
div.nav a:link{bolor:yellow;}/* 詳細度[0,0,2,2]*/
で普通は青だけど、ナビゲーションリストでは黄色（背景は青）と指定できて、
#siteMap a:link{font-weight:bold;}/* 詳細度[0,1,1,1]*/
としたり・・。
　スタイルシートに関わることだけについてみると、idでは詳細度が高く一箇所しか指定できませんが、classだと複数個所指定できます。classだと詳細度が低いため、詳細度を増やすことで簡単に上書きできますしね。

＞なかなか膨大な情報量ですね＾＾；
　情報の量に比較したら、多くはありませんよ。ネット上の藁の山を探すより効率的です。
　印刷したら薄っぺらの本にしかなりません。HTML5は膨大ですが・・

お礼

ありがとうございました。
そのような使い方になるのですね。非常に参考になりました。

回答No.1

too_bad

IDとCLASSはそのままの意味です。
学校を例にとりますと、IDは学年と組と出席番号、CLASSは組そのものです。
別の言い方をすれば、IDは個体識別番号、CLASSはグループとなります。
つまり、CSSが同じものを使っている状況で、
本来IDは2つ存在しえないのです。
例えば、3年A組出席番号1番の安達さんと言う方がいたとします。
でもその方は何人も全く同じ人がいるわけではないですよね？
だからその人は、同時に1つしか作業がこなせないのです。
一方のCLASSは、その3年A組そのものを示すのです。
この作業とこの作業は3年A組にやってもらって、
この作業は3年B組にやってもらうなどと、複数のことが割り当てられても
対応できるのが、CLASSなのです。
ここまでを基礎知識としまして・・・

問1に対する解ですが、上記の件で察したとは思いますが、不当な割り当ては
SEO対策として減点対象となります。

問2に対する解ですが、セレクタとは、
p { color:white;}
と言うCSSを例に挙げれば、Pタグすべてに対しと言う意味になるのです。
ですが個別に変更したい場合は、それでは対応できないのです。
この場合のセレクタはPタグすべてと設定されていますので、
Pタグすべてに無条件でCLASSを割り当てているのと同じ感じになるのです。
p#tex1 { color:white;}とすれば、Pタグの中でID名tex1が割り当てられている
ものに限り、このCSSを適用させるとなります。同じく
p.tex2 {color:white;}である場合は、Pタグの中でCLASS名tex2が割り当てられている
ものに限り、このCSSを適用させるとなります。
こうすることでIDとCLASSをきれいに使い分けることもできます。
つまり、セレクタのみでの割り当ては無粋なのです。

問3の解につきまして、略称とかそのようなものは関係ないのです。
子供の名前をつけるとき、略称を使うケースだってあるのです。
人名辞典を参考に、2011年度の命名ランキングを見ると、
「大翔くん」と言う名前が男の子の中で5年連続1位だそうです。
このお名前、略されていると思いませんか？
略さずに書けば、「大空へと飛翔できるような寛大な子に育ちますように君」と言う名前に
なるわけですが、あなたはあなたの子供にこんな名前をつけますか？
CLASSとかIDにつける名前は、あなたが考えた任意の名前なのです。
その名前が何であれ、呼び名がそうである以上、それはゆるぎない事実なのです。
よって、そこに略称を使ったからと言ってSEO対策上不利になることは絶対にありません。

問4の解といたしまして、そもそもなぜCSSで記述しているのでしょうか？
その答えは、CSSで記述するとHTML内部がすっきりします。
SEO対策として、すっきり完結に書かれているHTMLのほうが、
評価は高くなるのです。
ですので、仮にCLASSでの割り当てが1つだったとしても、それはHTMLを簡略化させるのには
有効な手段ではあるのです。

問5につきまして、基礎知識編をご覧ください。

最後に
SEO対策を本気で考えられるのであれば、以下を参考にしてください。
<meta name="description" content="" lang="ja" />
のコメントを必ず入れること。(気休めですがないよりマシ。20文字以下推奨)
<meta name="keywords" content="" lang="ja" />
に入れるキーワードは極力少なくすること。
これは例えば、東京,スカイ,ツリー,周辺,穴場,料理,和食,飲食店と8つのキーワードを入れたとします。
すると、全体を100として、ひとつあたりのキーワードは、
100÷8=12.5％となります。
この12.5％と言うのが、キーワード1種類につき割り当てられる重要度なのです。
2つキーワードが一致すれば、25％の重要性があるサイトとして、
検索結果に反映されます。
4つキーワードが一致すれば、50％の重要性があるサイトとして、
検索結果に反映されます。
つまり、キーワードが少ないほうが、キーワードあたりの重要度が高くなるため、
上位に表示されやすくなります。
ちなみに、東京スカイツリーと言う1単語と、コンピュータが理解する東京,スカイ,ツリーと言う
3つの単語は、同一としてみなされます。
ですので、最小単位の単語で区切って考えたほうが良いのです。
なお余談ですが、一般的に検索される方は、多くても3つまでのキーワードで検索されます。
標準で2つのキーワードで検索されます。
ちなみに、キーワードの項目とtitleは重複することができます。
重要な語句に関しては、titleとキーワード両方に入れると良いでしょう。

参考になりましたでしょうか。

お礼

非常にわかりやすくご解説頂きましてありがとうございます。
今まで曖昧だったことが多かったので助かりました。

今までは基本的にidは文章構造の階層の上のほうで使う傾向が多く、classはデザイン指定のために
いたるところで使っていました。もちろんidは一箇所でしか使っていません。

「2.むやみにclassやidを付けずにセレクターなどを使うほうがよいのでしょうか？」
とお聞きしたのは、classの子になるタグでセレクターを使える場合はあえてそのタグにclassを使わない
でセレクターで指定したほうがhtmlがスッキリするのでそのほうがgoogleとしては評価が高くなるのかな？
と思ったのです。
自分はあまりセレクターを使わずclassで指定することが多かったので・・・。

あと最後のkeywordとdescriptionについての追記は参考になります。

>ちなみに、東京スカイツリーと言う1単語と、コンピュータが理解する東京,スカイ,ツリーと言う
>3つの単語は、同一としてみなされます。
>ですので、最小単位の単語で区切って考えたほうが良いのです。

こちらですが、英語の場合はどうなのでしょうか？
例えば「toyota, honda, nissan」というのを「toyotahondanissan」としてしまうとなんかまずいように思えるのですが・・・。