ホームページ・各ページの<h1>タグについて

ホームページの<h1>タグについてお伺いします。

会社ホームページのトップページ・ヘッダに<h1>会社ロゴを配しています。
トップページはこれでいいと思うのですが、個人のプロフィールページは会社名より個人名を<h1>タグで囲んだ方がSEOとして意味があると思うのですがいかがでしょうか？

個人名を<h1>タグで囲むのが良いと仮定すると、プロフィールページでもヘッダにある会社ロゴは<h1>から<h2>などに変更すべきなのでしょうか？

ヘッダは各ページ共通にしてあるので、それぞれ変更したほうがいいのか教えて下さい。

No.4 ベストアンサー 回答者： ORUKA1951 回答日時： 2011/11/07 20:01

長文ですが、しっかり読んでください。

前提として、HTMLが、ちゃんとしているか否かは、文法的には
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
とかで、調べてください。
　ただし、これはあくまで文法上の問題で、内容とマークアップが適切か、そうでないかは著者でないとわかりません。

　文法的にあっている上で、マークアップと文書構造があっていることが重要です。
　　 ---検索エンジンに限れば、文法は間違っていてもほとんど影響はありません---

　以下は、とりあえず、主語を検索エンジンで説明しますが、検索エンジンだけの問題ではありません。
★ページのタイトルに、その内容を的確に示す簡潔なものが設定してあるか?
　トップページは社名であるにしても、サブページはそれじゃまずいです。ブックに入れても、検索結果にしてもまずい。
　あなたがこのページをブックマークに登録すると、このページのタイトルもあわせて登録されますね。

＞<h1>が隠しタグとなり
★<h1>に、検索対象になりそうな語句を入れて、それをスタイルシートで隠す・・なんて、悪質と判断しよう。
　ウェブマスター 公式ヘルプフォーラム ( http://www.google.com/support/forum/p/webmasters … )

＞リンクボタンも兼ねたロゴ画像（alt属性：会社名）を<h2>タグで囲うのは
★トップページへのリンクが<h2>でマークアップされている。なぜ副題でないのだろう?
　きちんと、文書構造にしたがってclass名でnavigationであることを示さないのか
[例]
　<div class="header">
　　<h1>・・・ならhoge.comへ</h1>
　　<p class="Logo"><a href="../index.html"><img alt="トップページへ"></a></p>
　　<div class="nav">
　　　<h2>ナビゲーション</h2>
　　　<ol>
　　　　<li><a href="/index.html"><span>トップページへ</span></a></li>
　　　　<li><a href="./product"><span>製品</span></a></li>
　　　　<li><a href="./contact"><span>問合せ</span></a></li>
　　　</ol>
　　</div>
　</div>
　　※HTML5の仕様書を参考にしました。
　　　http://www.w3.org/TR/html5/sections.html#the-nav …
以上

ロゴを左上にするなら
div.header p.Logo{
　　position:absolute;
　　top:5px;left:5px;
　　width:80px;height:80p;
}


Q)ページ上部に各ページへのリンクボタンが並んでいますが、このボタン画像(altでリンク先であるボタン名記述)は<h3>タグで囲んでいますが、問題ないでしょうか？

　上記のHTMLが良いでしょう。詳しくは上記リンクをお読みください。(邦訳-- http://www.html5.jp/tag/elements/nav.html )

　その上で
div.header div.nav h2{display:none;}
div.header div.nav ol,div.header div.nav ol li{
　　display:block;list-style:none;margin:0;padding:0;
　　line-height:30px;
}
div.header div.nav ol{
　　position:absolute;
　　top:0;left:100px;
}
div.header div.nav ol li{
　　width:20%;
　　float:left;
　　border:solid 1px black;
}
div.header div.nav ol li a{
　　display:block;width:100%;height:100%;
　　text-align:center;
　　text-decoration:none;
　　background-image[url();
}
div.header div.nav ol li a span{
　　visibilty:hidden;
}
div.header div.nav ol li a[href="./product]{
　　background:url();
}
とかがベストでしょう。
★HTMLは、デザインではなく、文書構造をマークアップするものです。この絶対的な基本を忘れては失敗します。

　オーサリングツールは、このように利用者がHTMLをよく知らないと、よいものは出来ず「divスープ」と揶揄されるものを作ってしまう危険性が高くなります。特にデザインを売り物にしているオーサリングツールが、いずれも抱えている問題です。

　HTMLがきちんとしていれば、サンプルで示したHTMLのようにシンプルなもので、様々にデザインできます。たとえば、同じHTMLに
div.header div.nav{
　　position:fixed;
　　top:100px;left:10px;
　　padding:1ex 1em;
}
div.header div.nav ol,div.header div.nav ol li{
　　display:block;list-style:none;margin:0;padding:0;
　　line-height:30px;
}
div.header div.nav ol li{
　　width:100%;
　　border:solid 1px black;
　　margin:5px;
}
div.header div.nav ol li a{
　　display:block;width:100%;height:100%;
　　text-align:center;
　　text-decoration:none;
　　background-image[url();
}
div.header div.nav ol li a span{
　　visibilty:hidden;
}
div.header div.nav ol li a[href="./product]{
　　background:url();
}
で、左側にfloatできます。

　デザインにとらわれずに、きちんとHTMLが作られていることの必要性がわかると思います。そのマークアップは、オーサリングツールでは不可能なのも理解できると思います。なぜなら、オーサリングツールに記事の内容を読み解き理解することは出来ないからです。それは著者しか知らない。そうして書かれたHTMLやそれに対するスタイルシートは、後日でも、他人でも、検索エンジンでも理解できるでしょう。
[例]
HTMLを読むと
<div class="header">　ヘッダ
|-<h1>見出し
|-<p class="Logo">ロゴ
|-<div class="nav"> ナビゲーションブロツク
|　　|--<h2>見出し
|　　|--<ol> ナビゲーションリスト
|　　|　　|--<li>
　多分誰でもわかる。

　CSSだって
div.header div.nav ol li a{
　とは、ヘッダ内のナビゲーションブロックのリスト内のリンクの宣言ブロックだな


　私が書いたHTMLもCSSも、他人であるあなたでも、そこに何が書かれているか理解できると思います。それは、すなわち、検索エンジンもわかるということです。それがＳＥＯなのですよ。

この回答への補足

丁寧は解説ありがとうございました。
大方理解しましたが、以下のところは別の意見がありましたが、いかがでしょうか。

＞<h1>が隠しタグとなり
★<h1>に、検索対象になりそうな語句を入れて、それをスタイルシートで隠す・・なんて、悪質と判断しよう。
　ウェブマスター 公式ヘルプフォーラム ( http://www.google.com/support/forum/p/webmasters … )


＜参考情報＞
『display:noneの利用 = 検索エンジンスパム』 ではない- Google Wysz
http://www.sem-r.com/0702/20071012073357.html

補足日時：2011/11/09 19:06

No.5 回答者： ORUKA1951 回答日時： 2011/11/09 20:23

きちんと読みましょう。

＞<h1>に、検索対象になりそうな語句を入れて、それをスタイルシートで隠す
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
と書いてます。

　今の検索エンジンは賢くて、だまそうとしたものと、そうでないかの区別は出来ます。

　googleが言っているように、一度Lynxなどでチェックしてみることを勧めます。
技術に関するガイドライン ( http://www.google.com/support/webmasters/bin/ans … )

No.3 回答者： ORUKA1951 回答日時： 2011/11/06 11:30

＞トップページのヘッダにロゴ<titleで囲ってあろ画像ファイル>があり、

　ありえません。ヘッダとは
<html>
　<head><!--　ヘッダとはここ -->
　　<title></title>
　</head>
　<body>
　　<h1></h1><!-- ここは見出し(headline) -->
　</body>
</html>
　また<title>には
「タイトルには、アクセントつきの文字や特殊文字等を表す文字実体が含まれてよいが、コメントも含めて他のマーク付けが現れてはならない。次に文書のタイトルを例示する。 」(仕様書)
です。
　また、<title>は<head>以外の場所に置けません。

★<head></head>内のtitleには、ページの内容を示すもの個々につけること

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
・重要な名前、コンテンツ、リンクを表示するときは、画像の代わりにテキストを使用します。Google のクローラでは、画像に含まれるテキストは認識されません。テキスト コンテンツの代わりに画像を使用する必要がある場合は、ALT 属性を使用して簡単な説明テキストを組み込みます。
・<title> タグの要素と alt 属性の説明をわかりやすく正確なものにします。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ( http://www.google.com/support/webmasters/bin/ans … )］より

「各ページ共用になっています。」
　最悪のパターンです。先の回答も読んでますか？

「それで個人プロフィールページにてヘッダ共用部分のロゴ画像が<title>タグのままがいいのか、」
　間違いです。ロゴ画像だけは、まったく意味を成しませんから、alt属性できちんと説明を入れる。もしくは、ロゴは背景にする。

★個人名を<title>タグに変えて、
　titleは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
著者は、当該文書の内容を識別するためにTITLE 要素を用いる必要がある。 ユーザは文脈抜きで文書を参照することがあるため、著者は文脈を踏まえたタイトルを提供する必要がある。 つまり、著者は、「概説」などの文脈不明なタイトルではなく、「中世の養蜂についての概説」のようなタイトルを提供しなければならない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.4.2 TITLE要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　疑問があれば、まず仕様書を読みましょう。それでわからなければ質問しましょう。でないと、間違った知識を得ることになります。

★ロゴをほかのタグにした方がいいのか
ロゴは、決して<title>で囲まれることはありませんから質問として成り立ちません。

この回答への補足

丁寧な解説ありがとうございます。
ソフトの使い方で勘違いがありましたが、だいぶ理解してきました。
私はBIND5というソフトを使っているのですが、このソフトにはタイトル、大見出し、小見出しの設定があり、タイトルというのをそのまま解釈し、<title>タグになるのだと理解していましたがこれが間違いでした。
正しくはタイトルが<h2>タグで大見出しが<h3>というようにhtml上は記述され、このソフトでの呼称がタイトルとなっていただけでした。

そこで、自分のサイトをhtmlで確認しました。
<title>はページタイトルとして設定してあった会社名が<head>内に記述されていましたので、問題ないかと思います。

次に<body>内の<h1>タグですが、これが以下のようになっていました。
<h1 id="page-title">エックスワイウェブサイト- xy,Inc.</h1>
これはページタイトルとして設定した語句で、いわゆるマウスをポイントしたときに表示される語句でした。
BINDでは<h1>が隠しタグとなりページタイトルがそのまま反省されるようになっています。

この記述で問題ないでしょうか？


次に、会社ロゴ画像の囲みが<h2>タグでした。
画像はalt属性で会社名を記述しています。

これで問題ないでしょうか？


次に、表示ページ上部に会社ロゴ、各ページへのリンクボタンとスタンダードな形式なのですが、
会社ロゴはトップページヘのリンクボタンも兼ねています。（Yahooなどのように）

リンクボタンも兼ねたロゴ画像（alt属性：会社名）を<h2>タグで囲うのは問題ないでしょうか？
問題ある場合どう改善すべきでしょうか？


次に、ページ上部に各ページへのリンクボタンが並んでいますが、このボタン画像(altでリンク先であるボタン名記述)は<h3>タグで囲んでいますが、問題ないでしょうか？

タグで囲まないほうがいいのでしょうか？


以上今の知識をから疑問点を記しました。

補足日時：2011/11/07 14:12

No.2 回答者： taloo 回答日時： 2011/11/05 20:21

SEOを意識するのなら、ロゴマークよりも文字である会社名を<h1>にする方が良いと思います。

ただ、会社名で検索してもらうなら、（同名の会社が多数ない限り）<h1>だろうが何だろうが、インデックスページの<title>に入っているだけで十分だと思います。

この回答への補足

解答ありがとうございます。<h1>タグではなくて<title>タグでした。トップページのヘッダにロゴ<titleで囲ってあろ画像ファイル>があり、各ページ共用になっています。それで個人プロフィールページにてヘッダ共用部分のロゴ画像が<title>タグのままがいいのか、個人名を<title>タグに変えて、ロゴをほかのタグにした方がいいのかという質問です。ご存知でしたら教えて下さい。

補足日時：2011/11/06 10:36

No.1 回答者： ORUKA1951 回答日時： 2011/11/05 11:07

　それぞれのページに、そのページの内容を端的に正確に示すものを見出し、およびタイトルに指定するのが良いでしょう。

　<h1>会社ロゴ</h1>
が<h1><img width heigh ></h1>じゃダメです。altの内容まできちんと書きます。最近は、<h1>作業工具の●●●</h1>
としておいて、ロゴはSEO的には無意味なので、ＣＳＳで、背景やh1:before{content:url();}で指定することなどが行われています。

　言うまでもないですが、ヘッダ内のタイトルも各ページで変更すべきです。あなたが実際にどこかのサイトをブックマークに入れれば、そこのタイトルはなんになりますか。

この回答への補足

解答ありがとうございます。<h1>タグではなくて<title>タグでした。トップページのヘッダにロゴ<titleで囲ってあろ画像ファイル>があり、各ページ共用になっています。それで個人プロフィールページにてヘッダ共用部分のロゴ画像が<title>タグのままがいいのか、個人名を<title>タグに変えて、ロゴをほかのタグにした方がいいのかという質問です。ご存知でしたら教えて下さい。

補足日時：2011/11/06 10:36