電子書籍の厳選無料作品が豊富！

ＳＥＯ　検索エンジンについて

解決済

  • 質問者：sorakana
  • 質問日時：
  • 回答数：4件

検索エンジンについて質問です。
１、
<body>
<div>
<p>
文１<br>
文２<br>
文３<br>
</p>
</div>
</body>
２、
<body>
<div>
<p>文１</p>
<p>文２</p>
<p>文３</p>
</div>
</body>
３、
<body>
<div>
文１<br>
文２<br>
文３<br>
</div>
</body>

この３つにおいて、検索エンジンへの影響は変わりないでしょうか。
回答お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

先ほどの回答の書き方がまずくて、気分を害されたのでしたら申し訳ありません。


実は、SEOで最も大事なことは、(検索エンジンが最も気にするのは)マークアップなのです。それがいいたかったのです。
　検索エンジンは単なるプログラムですが、そのページの内容を理解するよりどころにマークアップを最大のよりどころにするのです。
　例にあげられた1.～3.はある意味すべて正しいのです。
１、
<div>
<p>
○○県○○市○○町○○丁目<br>
○○番地○○号<br>
○○アパート○○号<br>
</p>
</div>
は、検索エンジンはひとつの段落として認識してくれます。
本当は
<address>
○○県○○市○○町○○丁目<br>
○○番地○○号<br>
○○アパート○○号<br>
</address>
が望ましい。
２、
<div>
<p>HTMLとは・・・・</p>
<p>様々な端末で・・・</p>
</div>
なら、もちろんSEO的に正しいでしょう。出来ればclassを使って<div class="section">と本文であることを示せば検索エンジン対策としてはgoodです。
３、
<div>
文１<br>
文２<br>
文３<br>
</div>
</body>
　これは文法的には正しいですが、単に<p></p>のほうが良いです。もし文１、文２、文３が別々の段落でしたら、必ず<p>文１</p>としないと検索エンジンは理解してくれないのです。
　スタイルシートでp{margin:0;line-height:1.6em;text-indent:1em;}とすると日本語らしくなりますね。

　多くのウェブデザイナーは、そのHTML全体の中でその部分がどのような要素であるかで判断しています。それが一番の対策だからです。

＞この３つにおいて、検索エンジンへの影響は変わりないでしょうか。
　それぞれが、内容と整合していたら効果的ですし、違っていたらまずいです。

この回答への補足

２、関してですが、これはclassを使う事で本文であると示されるのでしょうか。sectionというクラス名が必要なのでしょうか。

全く、クラスを使うことまたはクラス名が、検索エンジンに関わるとは考えていませんでした。

補足日時：2013/02/27 20:49
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

私は答えて頂いてる身なので、気分を害すなどとんでもありません。

それに、今回は私の求めている以上の回答を頂けました。
それぞれ詳しく有難うございました。

１、は文は文でも要素によって分けるのが好ましいということですね。
３、はやはり<p>タグは必要なのですね。使われていないサイトも見受けられましたので、誤解が解けて良かったです。

＞多くのウェブデザイナーは、そのHTML全体の中でその部分がどのような要素であるかで判断しています。それが一番の対策だからです。
この要素を疑ってよかったです。
ご教授有難うございました。

通報する
お礼日時：2013/02/27 20:45

No.4

  • 回答者： ORUKA1951
  • 回答日時：

＞マークアップ面で通常より苦労するとしても私にとっては最善です。



　ここだけ、要は慣れです。現時点では意外だと思いますが、マークアップはとっても楽になります。スタイルシートもシンプルで分かりやすくなります。
　自己流のclass名を悩んでつけたのに、数年後--数日後--には何が何かわからなくなっていた--なんて事はなくなるでしょう。HTML4.01のタグなんて使うのはせいぜい数十個、HTML5で十個ばかり増えるでしょうが、それでも中学校で学ぶ英単語2,000語に比較したら微々たる物です。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

４、cssにdiv.section div.aside{}とありましたが、div.sectionをつけることで、div.section内のasideという指定をしていると思うのですが、これは完全に自分が見やすくなるためにするものでしょうか。

（私は.aside{}とそのクラス名のみしていしています）

　先に、この質問に回答したほうがよいようです。

　CSS2以降、セレクタ(識別子)は、基点となるセレクタにセレクタを追加して書くことになりました。合わせて全称セレクタ*が導入されました。
　これによって、
.aside{}
　という書き方は
*.aside{}
　とみなすことになりました。
div.section div.aside{}
　は半角スペースで繫がっていますが、この半角スペースは子孫セレクタと呼ばれます。div.sectionの子孫(子供だけじゃなく子々孫々まで)のdiv.asideという意味になります。これ以外にも
> 子供セレクタ
+ 隣接セレクタ
兄弟セレクタ
[] 属性セレクタ
　　a[href]{}は、href属性を持つa要素
　　a[href="/"]は、hrefで値に/を持つa要素
　　span[class~="memo"]は、半角スペースで区切られた値のリストのひとつがmemoであるspan要素
　　span[lang|="en"]は、-で区切られた、enで始まる属性値を持つ span要素
クラスセレクタ
　　span.memoこれは、属性セレクタのspan[class~="memo"]と同値です!!
　　.memoは*.memoと同値です。
一意セレクタ #

　ここで、とっても重要なことに詳細度(特異性)という考え方です。
全称セレクタ*は詳細度 0
　HTMLの属性による指定も詳細度 0　[例]color="red",border="2"・・
　ブラウザが持つデフォルトの詳細度も 0
タイプセレクタは詳細度 1
　HTMLの要素です。a{color:blue;}とか
要素セレクタ,クラスセレクタ,擬似クラスセレクタ 詳細度 10
一意セレクタ#　詳細度　100
style属性による指定　詳細度 1000 [例] <p style="color:red;">ここは赤字</p>

　これらは位上がりはしません!!! 詳細度 1のものがいくつあっても 10にはならない・・
　そのため詳細度は[ 0 0 1 12]と言う風に考えると良いです。

★一見、ややこしく感じられますが慣れればこれほど便利なものはありません。
div.section div.section{color:blue;}/* 詳細度[0 0 2 0]*/
body div.section{color:green;}/* 詳細度[0 0 1 2]*/
body{color:red;}/* 詳細度[0 0 0 1]*/
と書かれていれば、たとえこの順番であっても
<body>
　<div class="header">
　　ここは赤字
　</header>
　<div class="section">
　　ここは緑文字
　　<div class="section">
　　　ここは青文字
　　　<div class="section">
　　　　ここも青文字
　　　</div>
　　</div>
　</div>
・・・
になります。より詳しく指定すればそれが優先されるということ。
　山田君は、黄色い服を着なさい。--詳細度[0 1 0 0]
　一年、一組は、緑の服を着なさい--詳細度[0 0 2 0]
　一年生は、青の服を着なさい　--詳細度[00 0 1 0]
　
＞これは完全に自分が見やすくなるためにするものでしょうか。
　いいえ、それは副次的ですけど、文書構造に基づいてスタイルを指定しているのです。

＞大きい量の多いページになるほど、自分で作った要素名の使用を、種類わけや、自分がマークアップをしやすくするためにも、強いられると思いますが、
　この子孫セレクタなどを使うことによってclass名すら必要なくなるのです。
[例]
<body>
　<div>
　　<h1>ヘッダ部</h1>
　　<p>記事</p>
　</div>
　<div>
　　<h2>本文</h2>
　　<div>
　　　<h3>項目</h3>
　　　<p>項目記事</p>
　　</div>
　　<div>
　　　<h3>項目</h3>
　　　<p>項目記事</p>
　　</div>
　</div>
　<div>
　　<h2>フッタ</h2>
　　<p>記事</p>
　</div>
</body>
　の場合
div{background-color:black;color:white;}
div+div{background-color:blue;color:yellow;}
div+div{background-color:navy;color:aqua;}
div div{background-color:green;color:white;}
div div+div{background-color:red;color:yellow;}
div div+div p{background-color:white;color:black;}
とか・・

　これは極端な例ですが、きちんとセレクタを書くとむやみやたらにclass名を書く必要はなくなるはずです。そんなもの覚えてられませんし後々管理できなくなります。
　HTML5では、基本構造は
<body>
　<header>
　</header>
　<section>
　　<section>
　　　<section>
　　　</section>
　　</section>
　</section>
　<footer>
　</footer>
</body>
と書くことが求められます。これはHTML4.01だと
<body>
　<div class="header">
　</div>
　<div class="section">
　　<div class="section">
　　　<div class="section">
　　　</div>
　　</div>
　</div>
　<div class="footer">
　</div>
</body>
と書かれているはずでした。実際にはW3Cの期待に反してほとんど見かけません。
しかし、この様に書かれていると検索エンジンは無論、著者も分かりやすかったはずです。

＞２、sectionを文構造を囲うdivに使っていないサイトが多いですよね。実際ここも囲うdivのclassは、回答文はa_desc質問文はq_descとなっています。
これは適切な？class名の使い方ができていないのでしょうか。
＞１、決められた要素以外の自分で作ったid、class名とにどのような細かい違いがあるのか。

　HTML5の草案後は、この様なclass名は徐々に減ってきていると思います。私がsectionなどを使う一番の理由は、
・誰にもわかりやすいから--メンテナンスはいずれクライアントに渡すつもり
・HTML5に書き直すのも楽
　です。
・googleは、少なくともこれらclass名は理解している風だから
　　HTML5の構造化要素の一番の推進者ですから「さもありなん」

　HTMLが、W3Cなどの期待とは異なる方向に進むのはやむをえない部分があります。W3Cも可能なものはそれを受け入れてきています。しかし、誰のためでもなく、自身とそのデータを探している多くのユーザーのために、何が最善かを常に考えていくのがよいかと・・

　　
    • good
    • 0
    • 件
通報する
この回答へのお礼

グーグルは仕様推奨派であるため、仕様にのっとっておいて損はない（エンジン面で得かもしれない）という考え方でよろしいでしょうか。

＞何が最善かを常に考えていくのがよいかと・・
何が最善で、何が自分にとってマークアップしやすいのかは人それぞれだと思います。
決められた要素以外を、使う方が増えているのは、それが多くの人にとって最善たりえるからといえるでしょう。

ですが、詳細度を上げて決められた要素を使うことで、検索エンジン面で有利になるというのなら、マークアップ面で通常より苦労するとしても私にとっては最善です。

詳細度、セレクタの解説有難うございました。

通報する
お礼日時：2013/02/28 21:44

No.2

  • 回答者： ORUKA1951
  • 回答日時：

＞２、関してですが、これはclassを使う事で本文であると示されるのでしょうか。

sectionというクラス名が必要なのでしょうか。

　これについては、歴史的経緯やウェブの実情を説明しないとなりません。
　HTML4.01は、それ以前のHTML(3など)の反省の上につくられてきました。HTML3の時代、第一次ブラウザ戦争の真っ最中---ベンダーは独自のタグを実装することで派手な見栄えを武器にユーザーの取り込みに励んでいました。そのため「Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、・・・略・・・( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」状況におちいってしまいました。
　その反省から、HTML4.01では、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」「広汎なWebアクセス性の考慮( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」などが目標となりました。このときに、「メーカー独自拡張のHTMLを使う。」「テキストを画像に置き換えて表現する。」「余白制御のために画像を用いる。」「ページレイアウトの目的で表を用いる。」「HTMLでページを作らずにプログラムに頼る。」( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )も問題の例とされました。

　DIV要素については、「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」目的とされました。
★ところが現実には、<div id="wrapper">、<div class="Left">、<div class="content">のようにプレゼンテーション目的としか考えられないものや、単なるブロックとして使われてきました。

　その反省から、HTML5では、「文書をよりよく構造化するために、次の要素(section,article,aside,header,footer,nav,figureなど)が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」これらは、本来HTML4.01で、「文書に構造を付加するためのclass(ID)名」として期待されていたはずでしたが、それを理解できない作者が多かったのでしょう。
　これらの要素は、googleなどが強く主張していたことも考えると、HTML4.01(およびXHTML1.0,1.1,2を含む)DIVのclass名として望ましいといえると思います。
★そして、さらにHTML5では、DIVに対して次のNOTE(注意書き)がわざわざ明記されています。
『Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.( http://www.w3.org/TR/html5/grouping-content.html … )』
「著者は、他に適切な要素がないときのための最後の手段の一要素としてdiv要素を使用することが強く奨励される。div要素のかわりにより適切な要素を使用することは読者によいアクセシビリティを、著者にとっては保守を容易にすることに繫がる」


　最後に具体的な例をスタイルシートの記述をつかって挙げておきます。
div.section p strong{color:red;font-size:1.05em;}
div.section div.aside{font-size:0.9em;border:solid gray 1px;padding:0.5em 1em;}
・一行目は、本文中の段落中の強調したい語句は一回り大きな文字で赤く表示する。
・二行目は、本文中の余談(本文と関係ない記事)は灰色の線で囲み文字を一回り小さく
　と読み取れると思いますし、本文のHTMLを見なくてもHTMLの構造が推測できますね。

　そのHTMLを検索エンジンが読み取るときも、本文に何が主題で書かれているか、どれが本文と関係ない記事か理解されるでしょう。

(補足)HTML5だと
section p strong{color:red;font-size:1.05em;}
section aside{font-size:0.9em;border:solid gray 1px;padding:0.5em 1em;}
　これこそ「div要素のかわりにより適切な要素を使用することは読者によいアクセシビリティを、著者にとっては保守を容易にすることに繫がる」・・読者のひとりに検索エンジンがいることを合わせると、何がSEOかが分かるでしょう。



　

この回答への補足

回答有難うございます。

難しいですね・・・
というのも、
１、決められた要素以外の自分で作ったid、class名とにどのような細かい違いがあるのか。

２、sectionを文構造を囲うdivに使っていないサイトが多いですよね。実際ここも囲うdivのclassは、回答文はa_desc質問文はq_descとなっています。
これは適切な？class名の使い方ができていないのでしょうか。

３、大きい量の多いページになるほど、自分で作った要素名の使用を、種類わけや、自分がマークアップをしやすくするためにも、強いられると思いますが、極力そのページ内の文にはsectionを使い、
解釈としては、文を囲うdivはsection
<div class"section">あ</div>
<div class"section">い</div>
の二つを囲うdivのid、class名は自由に決めたものを使うということでしょうか。

４、cssにdiv.section div.aside{}とありましたが、div.sectionをつけることで、div.section内のasideという指定をしていると思うのですが、これは完全に自分が見やすくなるためにするものでしょうか。（私は.aside{}とそのクラス名のみしていしています）やはりこれも検索エンジンに関わってくるのでしょうか。もし検索エンジンに関わる場合、その文を囲うためにつかった全てのdivを左につけていくことが好ましいのでしょうか。

どう疑問を文にしてよいのか分からないため乱文になってるかもしれません。

補足日時：2013/02/28 15:17
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

歴史も踏まえて分かりやすい回答有難うございました。

こちらで追加の質問になりますが、補足の２について、「ＳＥＯ　検索エンジンについて」という質問のタイトルもtitleではなくhgroupというid,class名を使う事が好ましい？適切？ということでしょうか。

通報する
お礼日時：2013/02/28 15:35

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報