Q&A
「何を見せたいか」は要件や観点によって違います。
いわゆる「SEO」の観点でしたら、質問タグを追加されたほうが良いと思います。
https://teratail.com/tags/SEO
はてなブログを使用しています。
デザインのテンプレートによって異なるのかもしれませんが、子ページにおいてはブログ名と記事タイトルの２つにh1がつきます。
理想的なヘッダーの構造というのは、記事タイトルにh1、ブログ名はdivだと考えていました。
子ページにおいて最重要なのはブログ名ではなく記事タイトルなので、ブログ名にもh1というのはどうなのでしょう。
この辺の答えがあれば教えていただけますか？
目的
h1が重複することを気にしているのはSEOが目的だからです。
子ページの補足画像
回答ありがとうございます。
SEOの目的になります。
どんなタグで囲われていても、ブログへの訪問者からは分からないですからね。
> どんなタグで囲われていても、ブログへの訪問者からは分からない
そうでもないと思います。
音声ブラウザは、見出し単位のジャンプができますし、逆にCSSの視覚効果はまったくわからないので、適切に見出しタグが使われていないと気づくはずです。
http://nvdajp.osdn.jp/howto/manual/nvda_commands.html
https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#semantic_structure
音声ブラウザですか。そこまでは考えていなかったですね。
記事ページでの、ブログタイトルへのh1は適切な見出しといえるでしょうか？
意味論的には、「ホームページ」のブログタイトルにh1を使い、「サブページ」には記事タイトルにh1を使うべき
↑とよく言われますよね。
私見ですが、アクセシビリティについて、検索サイトから直接サブページ飛ぶケースを考えると、サイト名にh1を付さないということが適切かどうかということについて、いささか疑問があります。
ただ、以前、音声ブラウザで試してみましたが、そこまで気になるようなものではなかったです。（常用している視覚障碍者が同じ意見とは限りません）
アクセシビリティ達成基準( https://waic.jp/docs/WCAG-TECHS/H42 )を見ると、見出しレベルが前後することは問題ないようなので、ブログタイトルをh2に、記事タイトルをh1に、セクション見出しをh3に、などはアリなのかなと思いました。
子ページにおいてもサイト名にh1を付けたほうがいいという考えも確かにあると思います。
たしかに音声ブラウザの場合、「1:何のサイトの、2:どんな記事であるか」という順番にしたほうが分かりやすいですよね。
はてなブログの構造が記事名もブログ名もh1になっているので、これに従おうと思います。
回答3件
0
ベストアンサー
h1の重複に関して
まず、この主題に関しての回答です。
端的に言うと、基本的には大丈夫なのですが、
HTML5と、HTML5.1以降で変わります。
HTML5の段
同アウトライン上で一個であれば、
一つのWebページにh1は複数出現してもよい。
となっています。
ここで注意したいのは、あくまで同アウトライン上で一つですので、
sectionなどのアウトラインが生成される要素をうまく使う必要が出てきます。
HTML5.1以降
これに関して、上記と少し基準が変わり、
同アウトライン上に一つということは同じですが、
従来の基準と同じになり、
一つのWebページに対して、h1の出現は、一つであることが望ましい、
となりました。
参考記事
【HTML5.1勧告】セクション要素内見出しレベル仕様の変更について | とあるコーダーの備忘録
結論、「ダメではないけど、現代では、一つの方がいいよ」となります。
しかし、上記は、
2019年以前までのようです。
最新の仕様は、
下記の文章の通りです。
ようは、同アウトライン上で一つの出現であれば、
一つのWebページ上に複数h1は複数出現しても問題ないという、
HTML5の仕様に戻ったということですね。
Lhankor_Mhyさん、K_3578さん、ご指摘大変にありがとうございました。
ただし、仕様書を見る限り、h1を複数を使う場合は、Webページ全体でその仕様に統一する、
アウトラインに合わせて見出しランクを変えるならその仕様に統一することが、
強く推奨されているように思います。
ようは、仕様が統一されていれば、問題ない、ということでしょう。
ただし、h1の仕様と意味などを考えた時は、一つの出現が望ましいのは変わりないかと。
本で例えたとき、各ページの主題という役割です。
主題と呼ばれるものは、基本一つですよね？
なので、Webの世界でも同じように、一つが望ましい、となるのでしょう。
アウトラインに関しては、ここでは語るのは長くなってしまうので、割愛します。
ご自身で調査してください。
なので、そこら辺を加味して組み直されるといいかと。
子ページのタイトルはh1で囲うべきか
ここに関しては、過去の質問と、私の回答が参考になるかと思いますので、
ご参照いただければと思います。
HTML - ヘッダーロゴはどのタグで囲えばよいのか？<h1>?<p>?<div>?｜teratail
投稿2021/05/12 05:07
編集2021/05/12 06:34
総合スコア9555
よこからすみません。
「一つのWebページに対して、h1の出現は、一つであることが望ましい」のソースをご提示いただけませんか。
お手すきの際で結構です。
はてなブログがhtml5なのか5.1なのかはよくわかりませんでした。
記事タイトルのh1はarticleタグに囲われているので、問題ないということでしょうか。
Lhankor_Mhyさん >
こちらですね。
https://www.w3.org/TR/2016/REC-html51-20161101/sections.html#headings-and-sections
http://roka404.main.jp/blog/archives/247
回答にも記載しておきます。
質問者さん >
問題ないかは、ソースコードを見てみないとなんとも言えません。
<!DOCTYPE html>
の文章型が宣言されている限り、HTML5以降になりますが、
細かいバージョンに関しては、
あくまで、W3Cからの勧告となりますので、
最新の仕様になるかは、各ブラウザや検索エンジンがそれに準拠しているかにもよります。
ただし、HTML5.1の勧告が、
2016年と、久しいため、
ほとんどのものは準拠しているでしょう。
>miyabi_takatsukさん
すいません、横槍失礼します。
確か2019年から技術仕様の策定はWHATWGが担うことになり、W3Cの勧告は正確な情報ではなかった
と思います。
K_3578さん >
なんと…
調査し直します。
2019年以降だと変わってる可能性ありますね。
> Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.
https://html.spec.whatwg.org/multipage/sections.html#headings-and-sections
現状はこれかな……？
「h1要素(s)だけを用いるか、セクションレベルに適合する見出しランクを使うことを強く推奨します」
でいいですかね……？
> Sections may contain headings of a rank equal to their section nesting level. Authors should use headings of the appropriate rank for the section’s nesting level.
miyabi_takatsukさんがコメントで挙げているソースだとこうなってますね。
結構意味合いが変わってくると思います。
前々からW3C側が独自に内容を変更しているとかで問題になってたんだっけな･･･。
Lhankor_Mhyさん >
ありがとうございます。
ぽいですねー…
しょっちゅう仕様が変わったりするからWebはめんどい。
K_3578さん >
ご指摘ありがとうございました。
最新の仕様書見つけて、
回答に反映させていただきました。
K_3578さん >
そうですね…
サンプルコードでも、
二つの書き方は、同じ構造である、
とも書かれているので、
HTML5時の仕様になった、
と考えてよさそうです。
質問者さん、
> 記事タイトルのh1はarticleタグに囲われているので、問題ない
これで大丈夫そうかと。
ただし、h1複数出現タイプなら、
アウトラインの一番上のh要素は、h1とするのが推奨されるようです。
（どちらかに統一すべきということ）
miyabi_takatsukさん
自分も記憶曖昧だったので調べ直せる良い機会でした、感謝します。
これも何もかも一々内容を勝手に変えたりするW3Cが悪いのだ･･･。
回答の編集ありがとうございました。
HTML5のアウトラインはセクションに「non normative」と書いてあったので、仕様というよりも参考事例だと認識していました。
今回の件で見直してみたところ、「non normative」が取れているようでしたので、仕様として気にするようにしたいと思います。
お手数をおかけしました。
> 内容を勝手に変えたりするW3Cが悪いのだ･･･。
まったくですw
今後もなんか油断できなさそう 汗
Lhankor_Mhyさん >
non normativeというもの自体があまりわかってなかった…
いつになっても勉強してしすぎってことはないですね…
勉強不足痛感しました 汗
miyabi_takatsukサン返答ありがとうございます。
本文にはてなブログの構造の画像を張りました。
1ページ内にh1が2つあるんですが、一応セクションはheaderとarticleで分かれていますね。
blendeggさん >
その画像ではわかりません。
HTMLのソースコード自体を提示いただかないと、成否は判別できません。
見た目はほぼほぼ関係ない話です。
headerは、アウトラインを整形する要素ではないので、
争点は、articleの親要素が、
sectionないしbodyであるか否かです。
<body>
<header>
<h1></h1>
</header>
<article>
<h1></h1>
</article>
</body>
もしくは、
<section>
<header>
<h1></h1>
</header>
<article>
<h1></h1>
</article>
</section>
であれば問題ありません。
<article>
<header>
<h1></h1>
</header>
<h1></h1>
</article>
だと、同アウトライン上に二つ以上のh1が存在してしまう状態のため、
ダメ、となります。
アウトラインに係るのは「区分コンテンツ」の要素ですね。
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories#sectioning_content
スコープって言い方するのか・・・。
やはりなんだかんだ言って、プログラミング的な概念なんですね。
そう考えると、イメージしやすいですね。
miyabi_takatsukさん
返答ありがとうございます。
３つ目のような構造にはなっていないので大丈夫なようです。
blendeggさん >
よかったです。
Lhankor_Mhyさんが提示いただいたページ、サイトは、
公式とほぼほぼ相違ない内容なので、
（プロもよく参照する、MDNってサイトです。）
参照して、よくよく勉強されるとよいかと。
0
一応、h1は何個でも使って良いとのGoogle公式からの返答があるそうですが、実際のところは謎です。
Googleのbotがどのように判定しているかはGoogleのbot担当者しか知りえません。
Googleのbotはバージョンアップを重ねており、その都度判定の内容が変わっている可能性があります。
そして、h1の数の影響はあったとしても微妙なものでそこまで影響はないと思われます。
ですので、h1の数云々で悩むのではなく、多くの人に見て貰え、被リンクを受けるような良質なコンテンツの
作成を重視することがSEOの観点から見ると最重要だと考えます。
投稿2021/05/12 00:34
総合スコア1373
もちろん、良質な記事を提供するということは大事だとは思います。
その上で、構造も出来るだけわかりやすくしたいものです。
bloggerの構造もみてみましたが、記事タイトルにはh3がついていました。
0
どこにどのコードが使われているか。
それは普通、私たちや貴方様のようなエンジニアしか見ません。
h1タグはWEBページの内容をGoogleや読者に適切に伝える役割があります。
SEOの観点から言うと、h1はいくつ使っても構いません。
また、それによってスパム判定を受けることもありません。
ですが、そうするとgoogleなど検索エンジンがそのページの階層構造を掴みにくくはなりますが。
そのようなことも考え、出来るだけ1つのページにh1は一つが好ましいと考えます。
ご参考までに…
投稿2021/05/11 22:27
総合スコア24
あなたの回答
tips
プレビュー
