ページの先頭の文書はhタグが適当か

質問

ホームページのあるページは概要から始まっています。
今のところ120字程度の文章が<p>タグで始まっています。

hタグは各ページにあった方がいいような書かれ方をした
解説サイトがあったので、
これはhタグの方がいいような気がしてきました。

でもh1タグだと120字だと長すぎますよね？
h2タグ当たりが適当なんでしょうか。

回答No.6

神崎 渉瑠（@taloo） · ベストアンサー

長文失礼。

>No.4補足
>検索の順位を上げる方法ってことで合ってますか？
99%合っています。
検索結果に、キャッチコピーなどが適切に表示されるような方法や、検索サイトから訪問したときの表示を調整するのもSEOです。
（これをやっているSEO会社はないと思います。HTMLファイルの改変や、GoogleアカウントでGoogleサイトにログインしての処理などが必要ですから。）

SEOというのは一種の宣伝です。
すでに人がたくさん（十分）来てくれているなら、それ以上宣伝する必要はないと思います。
では、そのたくさん人が来る前の段階でどうすれば良いか、
その宣伝をGoogleなどの検索サイトに任せようというのが、SEOです。

>No.4補足
>順位はあまり拘らないんですけど、
>ユーザーが訪れてくれればいいのなら見た目重視？？
>つまりORUKAさんがよく言うマークアップの否定ですよね。
意味が分かりかねますが、、、
Googleなどの検索結果を利用する方法以外で宣伝できるなら、それで問題ないと思います。

ウェブサイトの善し悪しは二種類あります。
まずは、コンピューターが理解しやすいサイトである事。
もう一つは、人が見てきれいである事。

後者の方はHTMLがどうなっていようが、全く関係ありません。
人はHTMLコードを見ていないからです。
テーブルレイアウトでもFlashでも、見た目がきれい、誇張すればきれいな画像が使われていればそれで良サイトという事になります。

前者は、HTMLコードが重要で、見た目は関係ありません。
たとえば、ブラウザは『<h1>があれば、大きく表示し、前後に改行を行う』ということしか行っていませんが、
いわゆる文法違反があった場合、たとえば

<h1>私の弟がこんなにかっこいいわけがない
<p>主人公はごく普通の女子高生。ある日、、、</p>
</h1>

と書いてあったとき、「主人公は、、」の部分は<h1>の一部（大きく表示すべき）か、それとも<p>の前で<h1>を終了させておくのか、、、
という問題が発生します。
この問題は、違うブラウザで見たときに、違う表示になる事で確認できます。
この弊害があるため、文法は適切に、といわれます。

それ以上の事、つまり「どこに<h1>を使い、どこに<p>を使い、、、」というのは、99%はSEOだと思います。
残り1%については、
Operaなどでページの目次などがとれますが、はたしてこういう機能を使ってる人がどれほどいるのか、、、
（添付画像参照、http://portal.opera.com/の目次です。）
こういう機能を使わなければ、（テーブル以外の）多くのタグがほとんど同じ表示になりますし、
HTMLコードの善し悪しは、「きれいな日本語を使いましょう。具体的には『ら抜き表現』禁止。」のような哲学にも近いと思います。

>ちなみに今思いついたことは高さ0のclass="header"を作って
>そこに<h1>を置くという裏技です。
>SEO的にはズルは良くないと合ったのでアウトなんでしょうけど。
どういう目的で<h1>を書きたいのかがわかりませんが、
HTMLコードとして<h1>を書きたくて、でもブラウザでは表示させたくないなら、それでかまわないと思います。

No.5最初の例文を例にとると、
このとき、<h1>を表示させなければ、このページが何の作品なのかわからなくなります。
（ブラウザのタイトルバーやタブバーに<title>の物が書かれていますが、ページ内にタイトルが書かれている方がわかりやすいと思います。）
もし、何らかの理由で<h1>を消したいのであれば、display:noneやheight:0を指定して隠してやれば良いと思います。

お礼

ご回答有り難うございます。
ちょっと難しく考えていたみたいですね。
人が見ても人気があれば良いサイトになるのですね。

今作っているのはサークルの紹介（本文）です。
<h1>、<h2>の目次は他のページにあって
このページは説明と写真がメインです。

たくさんの人に見てもらう必要はないので
SEOとかは意識しなくても良さそうです。

hｘタグを置きたいと思ったのは質問にも書きましたが、
そういう様に解説しているサイトがあったからです。

<title>に書いてあるので要らないとも思ってました。
本文にあった方が良いとのことなので入れます。
display:noneは前にdisplay:blockを聞いて勉強しました。

回答No.5

神崎 渉瑠（@taloo）

一応、誤解されるとなんなので、補足というか、訂正しておきます。
具体例でも書いてみればわかりやすいかと、、、

No.4で「概要」と書いているのは

<div class="header">
<h1>私の弟がこんなにかっこいいわけがない</h1>
<p>主人公はごく普通の女子高生。ある日、不仲だった弟の秘密を知ってしまった事が事件の発端であった。</p>
</div>
<div class="article">
<h2><i>第一話</i>私が弟と恋するわけがない</h2>
<p>私がリビングでテレビを見ていると、、、</p>
</div>

というような概要文であって、
「概要」という言葉を書いているわけではないです。

もし、「概要」という見出しをつけるのであれば（ついでにメニューなども付けるのであれば）、
こんな感じになるのではないかと思います。

<div class="header">
<h1>私の弟がこんなにかっこいいわけがない</h1>
<div class="abstract">
<h2>概要</h2>
<p>主人公はごく普通の女子高生。ある日、不仲だった弟の秘密を知ってしまった事が事件の発端であった。</p>
</div>
<div class="menu">
<h2>各話リンク</h2>
<ul>
<li><a>第一話</a></li>
<li><a>第二話</a></li>
<li><a>第三話</a></li>
</ul>
</div>
<div class="article">
<h2><i>第一話</i>私が弟と恋するわけがない</h2>
<p>私がリビングでテレビを見ていると、、、</p>
</div>

または、概要を上に書いて、メニューを下にする。

<div class="header">
<p class="abstract">主人公はごく普通の女子高生。ある日、不仲だった弟の秘密を知ってしまった事が事件の発端であった。</p>
<h1>私の弟がこんなにかっこいいわけがない</h1>
<div class="article">
<h2><i>第一話</i>私が弟と恋するわけがない</h2>
<p>私がリビングでテレビを見ていると、、、</p>
</div>
<div class="menu">
<h2>各話リンク</h2>
<ul>
<li><a>第一話</a></li>
<li><a>第二話</a></li>
<li><a>第三話</a></li>
</ul>
</div>

この場合は「概要」という見出しをつけていません。これは、大見出し、小見出しの中では、大見出しを先にすべきだと思うからです。
『概要』という言葉は、この文書（作品）の中では、大見出し（≒作品タイトル）になる事はないと思いますから、<h1>概要</h1>とはならないと思います。

----------

最初に<h1>を使いたいからといって、以下のような物は不正となると思います。（No.1、No.2に書かれている通りです。）

＊不正な書き方
<div class="header">
<h1>主人公はごく普通の女子高生。ある日、不仲だった弟の秘密を知ってしまった事が事件の発端であった。</h1>
<p>私の弟がこんなにかっこいいわけがない</p>
</div>
<div class="article">
<h2><i>第一話</i>私が弟と恋するわけがない</h2>
<p>私がリビングでテレビを見ていると、、、</p>
</div>

----------
商品紹介などなら、class="abstract"の部分をclass="catchcopy"などに置き換えても良いと思います。
この場合でも、タグの種類や順番が大きく変わる事はないと思います。

回答No.4

神崎 渉瑠（@taloo）

各ページに<h1-6>があることと、<p>タグで始まる事は同じ意味ではありません。

SEOで言えばh1が最初にある方が望ましいと思います。

<div class="header">
<h1>タイトル</h1>
<p>概要</p>
</div>
<div class="article">
<h2>第一章</h2>
<p>本文</p>
</div>

ですが、SEOを気にしないのであれば、<p>が最初にあってもかまわないとおもいます。

<div class="header">
<p>概要</p>
<h1>タイトル</h1>
</div>
<div class="article">
<h2>第一章</h2>
<p>本文</p>
</div>

文法上は<h1>を最初にしなければならないという規定はありません。
（私が見逃しているだけかもしれませんが。
今後、そういう規定が出てくるかもしれませんが、
音声ブラウザの場合、ページ概要を最初に説明し、間違ったページならすぐに戻れる（戻るためのメニュー（アンカー）も<h1>より前にある）ほうが、わかりやすいことがあります（アクセシビリティーがあがる）。
HTML5の仕様は音声ブラウザを意識してなさそうですから。）

ウェブ（HTML）ではない業界では、
まれに、タイトルよりも先にイントロダクション（導入部）を書くような小説や、ドキュメントなどがありますし、
映画やテレビ番組（ビデオ番組）などでは、タイトル（アニメの場合はオープニングアニメーション）よりも前に、本編の一部や導入部を放送することがあります。
そういう演出が、HTMLにあっても（私は）かまわないと思います。

もちろん、グラフィカルブラウザで見たときの「見た目」だけを調整したいのであれば、
前者のように書いておいて、スタイルシート（CSS）で、概要を上の方に、タイトルを下の方に表示する事も可能です。

お礼

どうもご回答有り難うございます。
SEOって言葉よく聞くんですけど、
よく分からないので調べてみました。
検索の順位を上げる方法ってことで合ってますか？

なんかその手のサイトを２時間くらい眺めてみたんですが、
ユーザーがどのくらい訪れてくれるかが重要みたいです。

順位はあまり拘らないんですけど、
ユーザーが訪れてくれればいいのなら見た目重視？？
つまりORUKAさんがよく言うマークアップの否定ですよね。

僕の知っているサイトでテーブル組ですが
検索の常にトップ～３番をキープしているサイトを知ってます。
確かに毎日のように多くの人が来てます。

ちなみに今思いついたことは高さ0のclass="header"を作って
そこに<h1>を置くという裏技です。
SEO的にはズルは良くないと合ったのでアウトなんでしょうけど。

回答No.3

ORUKA1951

＞紙ならばそんなにややこしく考えなくても済みますが、画面上だと表示領域が限られてくるので。

　というより、視覚的な表現でその部分が要約だと見せることは可能ですが、機械にはそれが要約とはわからないということです。ある一塊の文章があるとき、それをdivで括って適当な文書構成要素であることを示します。そして、それがひとつの構成要素である場合見出しをつけておくと良いと言うことです。
　もちろん視覚的には、見せなくても要約とわかるので<h2>要約</h2>は表示上は消してしまって構いません。

＞<h1>概要</h1>を入れようかどうかすら迷ってます。
　<h1></h1>はトップレベルの見出しですから、h1には、その文書全体の内容を端的に示すものであるほうが良いです。もちろん、<h1></h1>も消しても構いませんが、本文と関係ない見出しを書いて消すのはダメです。

　本来、要約(abstract)は、ページの概要を示すものですから、文書全体から言うとヘッダー(header)内に収まるべきものでしょう。他にヘッダに入るべきものとしてそのページの目次とかもあるでしょうね。
<body>
　<div class="header">
　　<h1>文書全体の内容を示す見出し</h1>
　　<div class="abstract">
　　　<h2>要約</h2>
　　　<p>段落</p>
　　　<p>段落</p>
　　</div>
　　<div class="nav" id="tableContent">
　　　<h2>目次</h2><!-- 表示しなくても良い -->
　　　<ol>
　　　</ol>
　　</div>
　</div>
　<div class="section">
　　<h2>この章の見出し</h2>
・・・・・・

　HTMLをまったくスタイルシートも画像もなしで印刷なり、視覚障害者に読み聞かせて、あるいは機械(検索エンジン)に意味が通じるようにすると考えることにしています。

　すくなくとも、要約全体を<h>で囲むのはまずいでしょう。

お礼

いつも丁寧ですね。
ご回答有り難うございます。

書き忘れましたがページ全体の概要は
<title>に入れてあります。

それとは別に見えない<h1>タグを作って
<title>と同じ言葉を入れた方がいいのでしょうか？

何か迷ってきてしまいました。
考え出すと本当にキリがありませんね。

回答No.2

ORUKA1951

本来ならそうです。
HTMLは、文書をそれを構成する要素に分割してマークアップするものです。そうしておけば、その文書をどのようなプラットホームでも利用できるというコンセプトです。
　文書には、その文書全体、あるいは章ごとに、その内容を示す見出しがあることが期待されます。
HTML4.01仕様書-7.5.5 見出し: H1、H2、H3、H4、H5、H6要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.5 )
　と
HTML5のHTML4からの変更--3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#language )
　などをお読みください。

　そのh1を表示するしないは、プレゼンテーションの問題で、HTMLとは別問題です。

　私はHTML自体は
<body>
　<div class="header">
　　<h1>文書全体の内容を示す見出し</h1>
　　<div class="abstract">
　　　<h2>要約</h2>
　　　<p>段落</p>
　　　<p>段落</p>
　　</div>
　</div>
　<div class="section">
　　<h2>この章の見出し</h2>
・・・・・・
　という風にマークアップしています。
　私は、ほとんどしませんが
スタイルシートで
　div.header h1,
　div.header div.abstract h2{display:none;}
で、消すことも出来ます。

＞ホームページのあるページは概要から始まっています。今のところ120字程度の文章が

なら、それが概要であるとマークアップすべきであり、その120文字は『見出しではありません』
　それがどこに現れるとか、どのように見せるかではなく、あくまでそれが文書にとってどのような構成要素であるかを印を付けるのがマークアップです。

お礼

またまたご丁寧に済みません。
この間教えて頂いた本という考えに注意してます。

そうやって考えた場合、これは題目かなと考えました。
紙ならばそんなにややこしく考えなくても済みますが、
画面上だと表示領域が限られてくるので。

<h1>概要</h1>を入れようかどうかすら迷ってます。
プレゼンテーションの問題ということは、これを入れて
非表示にすればいいということでしょうか？

回答No.1

notnot

hタグは見出しなので、概要ならpタグで良いのでは。「概要」という文字自体は見出し。

お礼

ご回答有り難うございます。
どうも文章ではpタグが適当みたいですね。