• ベストアンサー

h1要素のマークアップについて。

W3C・ISO-HTMLで、各見出しレベルは、何度出現しても(0回でも)良い 参考:http://codezine.jp/article/detail/3481?p=2 とありますが、みなさんはどのようにしていますか。 私はどうしてもページにh1は1回のみ、と思っているのですが、もし有効ならh1を複数と切り替えてもいいのではと思いはじめました。 見た目はCSSでなんどもできますし。 例えば普通なこんな見出しでも <h1>おしえて!goo</h1> <h2>質問集</h2> <h3>プログラミング</h3> <h4>HTML</h4> ↓ <h1>おしえて!goo</h1> <h2>質問集</h2> <h1>プログラミング</h1> <h2>HTML</h2> など…気分的には気持ち悪いのですが、結果的にSEOがよければいいのではと。 そのへんどのようにお考えで、どのようにマークアップしていますか? なにかメリットとデメリットはあるでしょうか?

  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.2

参考先のコンテンツについてはスルーさせて頂きますが、単純に疑問です。 > <h1>おしえて!goo</h1> > <h2>質問集</h2> > <h3>プログラミング</h3> > <h4>HTML</h4> これを、 > <h1>おしえて!goo</h1> > <h2>質問集</h2> > <h1>プログラミング</h1> > <h2>HTML</h2> これには、(内容自体が全く変更ないのであれば)そのまま構造だけをスライドできるものではないと思いますが? 下記だと”おしえて!goo”と”プログラミング”が同格、”質問集”と”HTML”が同格という事になり、実際の内容に則してません。 > など…気分的には気持ち悪いのですが、結果的にSEOがよければいいのではと。 > そのへんどのようにお考えで、どのようにマークアップしていますか? SEOの事を第一義に考えてマークアップする事はありません。常に、その内容に最適と思われる構造になる様にマークアップしています。

chikotto
質問者

お礼

>”質問集”と”HTML”が同格という事になり、実際の内容に則してません。 そうですよね。やはり「内容に最適と思われる構造になる様にマークアップ」となると、自然とh1はやはり1つがベストのような気がします。 2つでもいいのでは、という例ってあるんでしょうか? ありがとうございました。

その他の回答 (2)

  • Kirishima
  • ベストアンサー率32% (155/480)
回答No.3

ページの構成として、 結局H1単位でページを切り替えた方が、 利用しやすいページ構成になると思います。 SEOを意識してH1タグを多用するのは逆効果です。 HTMLの意図に沿った、自然な使い方が大事です。

chikotto
質問者

お礼

「何度出現しても(0回でも)良い」と見てしまうと、数多いほうが有利になったり?とつい思ってしまって、ほかの方の意見をちょっと参考にしたかったのでした。 やはり自然なかたちが良いですよね。 ありがとうございました。

  • salonpath
  • ベストアンサー率48% (194/399)
回答No.1

うちもh1が何度も出てくるのは気持ち悪いですね 小説に例えたら本のタイトル的な扱いだと思ってます ので違うh1を使うなら別のhtmlを用意して分割すべき内容だと思うんですけどねぇ

chikotto
質問者

お礼

私も同意見です。本のタイトルのようなもので、複数あるとやはり不自然ですよね。

関連するQ&A

  • ライブドアブログの「h1」タグについて。

    ライブドアでブログに作り、CSSをカスタマイズ中です。 カスタマイズ中疑問に思うことがあったので質問させて頂きます。 記事タイトルのタグは標準で「h1」になっていますが、 CSSでカスタム可能な「見出し」にも「h1」が存在します。 HTML4ではh1は一つの記事に1コ?という決まりが 合ったそうですが、HTML5から何個使っても問題ない という仕様になった、という記事を読ませて頂きました。 機能的には問題のないことだと思いますが、SEO的に 記事のタイトルと見出しのタグがかぶることは 何か問題があるのでしょうか? 恐れ入りますが、どなたかご教授の程 宜しく御願い板wします。

    • ベストアンサー
    • SEO
  • HTML5 | 見出しよりも先にメタ要素

    こんばんは、 現在ブログをHTML5へと作り変えています。お伺いしたいのですが、以下のように見出しよりも先にそのメタ要素を記述する構造は良くないのでしょうか? <article>  <header>   <ul><li>日付</li><li>カテゴリ</li></ul>   <h1>タイトル</h1>  </header>  … </article> 見出しを先に記述した後に、CSSで入れ替えることはもちろんできるのですが。よろしくお願いします。

  • h1~h6要素の背景色が範囲外までなってしまう

    見出しの要素の背景色を「#ddffdd」にしたところ、<h3>~</h3>の部分だけでなく<p>~</p>の部分まで背景色が適用されてしまいました。 背景色は、見出し要素(h1~h6)にしか指定していないのですがなぜでしょうか? 回答よろしくお願いします。 ソースは一部省略していますが、次の通りです。 ■HTML <div class="kukaku4"> <h3>■説明</h3> <p>文章1<br />文章2<em>重要</em>。</p> </div> ■CSS h2, h3 { color: blue; background-color: #ddffdd; }

    • ベストアンサー
    • HTML
  • 画像(alt要素)のマークアップとSEO

    質問です。 最近、検索エンジンのクローラーはaltを認識していないと、このページを読んで知りました。 http://www.hyperposition.com/ranking/heading.html ということは、画像のalt要素に<h1><h2>や<strong>タグをつけるのは無意味なんでしょうか? 私のサイトは、タイトルにロゴを使用しているので、どうしても画像に<h1>タグがくる構成になっています。 認識しない要素に見出しタグをつけると、スパム扱いになったりするんでしょうか? 上のアドレスのページにも、最後のほうに「画像はマークアップしない」とありますし・・・SEO的にはどうなんでしょう?

    • ベストアンサー
    • HTML
  • article、section、hgroup?

    HTML5にある<article>、<section>、<hgroup>の3つのタグの使い分けに困っています。 普通に書いたら下記のように3つのタグが並ぶと思います。 <section><article><hgroup> <h1>本文</h1> <h2>タイトル</h2> <h3>日時</h3> </hgroup></article></section> CSSでどのタグを指定しても同じ装飾になります。 この3つのタグが無意味にしか感じられません。 h1~h6はhgroupで囲む。1つの括りで扱える情報なのでarticleが付く。 そして1つのセクションとしてのまとまりなのでsectionが付く。 けれどCSSでどのタグに装飾しても同じ。 こんな3つもタグを並べる意味はあるのでしょうか? 前回の質問: SEO的に最も良いh1~h3指定順位とは? http://okwave.jp/qa/q7730062.html  前日の質問: Webサイトにスライディングサイドバーを設置したい http://okwave.jp/qa/q7728373.html

    • ベストアンサー
    • CSS
  • marginを指定した見出し要素の後に段落要素をつけるとmarginが変なことになります。

    CSSとHTMLでホームページを作っています。 ですがなぜかIEの表示のみ、妙な表示になります。 <h3>などの見出しタグで見出しを作り、そのあとに段落でいろいろ指定していると、なぜか見出しのマージンが後の段落に影響します(IEのみ)。 この対策法を教えていただけないでしょうか? ソース(一部を抜粋、少し書き換え)は HTMLは4.01 Traditional(DTDあり)で、 <h3 class="st">ABOUT</h3> <p> ここは×××の管理する、・・・・サイトです。<br> ●●はメインからどうぞ。 </p> <h3 class="st">Update Log</h3> <p> 2009/03/24 ああああああああ<br> 2009/03/23 あああああああああ<br> ああ<br> </p> CSSは h3.st{color:#727171;background-color:#ffffff;font-size:95%;text-align:center;margin:0px 25px;padding:3px 0px;border-bottom:#87ccd4 1px dotted} p{text-align:left;margin:0px;padding:3px 32px;line-height:200%;font-size:90%;} です。 CSS内で、CLASS要素を指定した他のpタグにfloatを指定しましたが、それが影響しているかと思って消してみても変わりません。 どうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • H1タグの色を変えたい。

    H1タグの色をCSSで変更したいのですが、上手くいきません。 どこの設定を間違えているのでしょうか? 大変申し訳ございません。ご教授よろしくお願いいたします。 以下にソースを記述します。 /*--- HTMLソース ---*/ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="index.css" type="text/css"> <title>H1タグ色変更</title> </head> <body> <h1>大見出し</h1> </body> </html> /*--- CSSソース(外部ファイル:index.cssとする) ---*/ @charset "utf-8" h1 {color: #0000ff;}

    • ベストアンサー
    • CSS
  • h1、h2タグの付け方について教えて下さい

    h1、h2タグの使い方について質問させて下さい。 h1、h2タグがseo対策に有効であり、かつ見出しの大きい順にh1、h2と使っていくものだという事はわかりました。 フォルダ内に CSS書類を作ってこれを添付したいのですが、以下のような場合、h1、h2タグの設定はどうしたらよいでしょうか。ソフトはDreamweveMX2004使用。タグ打ちだけでは作れないので、Dreamweverで書き込んだソースを必要に応じて書き直し等しています。 【ホームページの構成】 ・index.htmlページはFlashで作った、swfファイル一つと(C)表示の一文のみ。swfファイル中のENTERボタンで2ページ目にリンク。 ・2ページ以降は同じパターンのページが、上部メニューバーで5ページ各リンク。(2挨拶、3商品説明、4アクセス~など) ・2ページ以降は各ページのタイトルバーの形が同じなのでこれに見出し設定をしたい。タイトルバーは文字色、余白などは全て同じだが、背景色のみ各ページごとに変えている。(教えて!gooの紺色地に白抜き文字のような形です。各ページごとに紺色地が別色になります) 【質問】 ・h1はindex.htmlに設定すると思うのですが、テキストは(C)の一行しかありません。他のページでは最下部に(C)表示を置きます。h1はどこに設定したら良いですか?画像にh1を設定する事があると聞きますが、swfにh1を設定することになるのでしょうか? ・タイトルバーはDreamwever/新規CSS/セレクタタイプ/タグ/h2で共通の文字色、文字サイズ、ボックスなどを設定して背景色のみ、各ページ設定する。この場合、2ページ以降はh1タグが無くなってしまいますーこの形は正しいでしょうか? ・hタグの使い方を考えるとサイトの構成に問題があったと思いますが、この構成で作ることになってしまいました。CSS添付ではなく各ページ毎に設定するべきなのでしょうか。もしそうならその時のh1,h2はどう設定したらよいでしょうか? どうか方法を教えてください。よろしくお願いいたします。

  • SEO対策について-<h1>タグ-その2

    以前、<h1>タグについてSEO対策について質問をしました。 今回はCSS+HTMLを利用した際に下記のような場合 どのような判断がされるのでしょうか? ○CSS h1 { background-image: url(img/aaa.gif); background-repeat: no-repeat; width: 100px; height: 20px; } h1 span { display: none; } ○HTML <h1><span>タイトル</span></h1> text-indent:-9999px;を使えば回避はできる問題なのですが、 <span>が間に入ることで<h1>を検索エンジンのロボットはどのように判断されるのでしょうか? どなたかご教授願います。

    • ベストアンサー
    • HTML
  • 見出し<h3>にリンクを追加すると背景画像が表示されない

    h3の見出しに<a>を追加するとh3に設定していた見出し画像がIEで表示されなくなってしまいました。 FireFoxではきちんと表示されているので IEのバグかと思っているのですが、 もし解決方法がありましたら、アドバイスいただければ幸いです。 [HTML] <div class="contents"> <h3><a>見出し</a></h3> </div> [CSS] .contents h3 { background: url(../images/marker_blue_square.jpg) no-repeat 0 0.1em; padding:0 0 0 25px; margin-left:2.2em; margin-top:1em; font-size:medium;} 色々と試してみたんですが、 たとえば、以下のように見出しの文章の一部にリンクを張ると 見出しの背景画像がきちんと表示されました。 [HTML] <div class="contents"> <h3>見<a>出し</a></h3> </div> また、CSSに以下を追加してみたんですが 背景画像が二重になって表示されてしまいました。 [CSS] .contents h3 a { background: url(../images/marker_blue_square.jpg) no-repeat 0 0.1em; padding:0 0 0 25px; margin-left:2.2em; margin-top:1em; font-size:medium;} よろしくお願いします。

専門家に質問してみよう