web-dev-qa-db-ja.com

サイトのすべてのページに完全に一意のH1が必要ですか?

サイトのすべてのページに一意のTITLEが必要であり、すべてのページにH1要素が1つだけ必要であることに同意しますが、各H1のテキストも完全に一意である必要がありますか?

本能的にそう思われるかもしれませんが、(IMHO)これが意味をなさないことに気づき、そうしようとすると、ページのユーザーエクスペリエンスと表示が損なわれる可能性があります(たとえば、ページが密接に関連している場合)クラスター、例えばマルチステッププロセス/ツール/ウィザード。

確かに、プロセス名はH1(たとえば、「妊娠プランナー」)に入力する必要があり、現在実行しているステップは、両方にシューホーンするのではなく、H2(たとえば、「ステップ1-赤ちゃんを試す」)としてマークアップする必要があります。単一のH1を一緒に(例:「妊娠プランナー-ステップ1-赤ちゃんのためにしよう」)?

これにより、H1がかなり長くなり、ページの表示に影響を与える可能性があるだけでなく、両方を1つに組み合わせると、ページが親(プロセス)と子(ステップ)別個のネストされた見出しとして?

さらに、私が読んだ現在の提案では、最初のページではH1がプロセスの名前であり、最初のステップはH2である必要がありますが、後続のページでは同じテキストがH1であってはなりません(単にテキストのスタイルがH1)と同じで、現在のステップがH1になるはずです。私にとって、これはページのオーサリング/制作プロセスに不必要な複雑さをもたらし、段階的なプロセス内のページのセマンティック構造に矛盾をもたらします。

したがって、すべてのH1は完全に一意である必要があるという基本的な主張に戻ります。これはそうあるべきであり、これを実装することのコスト/複雑さ(特に上記のような状況で)はそれだけの価値があると私に納得させることができますか?

あなたの考えをどうぞ...

22
MarcusTucker

<h1>は1つしか使用できないというルール/推奨事項/ガイドラインはありません。 A Googleエンジニアは、ページに複数の<h1>を含めることができるとしています 理由がある場合。

しかし、より良いアクセシビリティのために、私は常に1つを使用します<h1>

JAWSは、「ページには5つの見出しと30のリンクがあります」など、見つかった見出しとリンクの数を発表します。

ユーザーは見出しに直接ジャンプすることができ(Hキーを押す)、<h1>にジャンプすることは非常に一般的です。

ソース

また、スクリーンリーダーが見出しレベルをどのように読み取っているかを確認するには、このビデオ "アクセシビリティのためのHTML見出しの重要性" を見る必要があります。

10
Jitendra Vyas

これはそうあるべきであり、これを実装することのコスト/複雑さ(特に上記のような状況で)はそれだけの価値があると私に納得させることができますか?

検索の最適化(およびユーザーが到着時に自分の興味に関連するページをユーザーがすばやく識別できるようにする)のために、一意のH1コンテンツ(理想的にはTITLEを反映する)についてのみ主張します。

サイトのインタラクティブな部分内のステップはおそらくランディングページになる可能性はありません。ユーザーが提示されたコンテンツの目的に向いており、顕著なH1が回避されていると想定しても安全だと思います。

4
danlefree

これについては多くの意見の相違があります。そして、H1が同じである可能性があると主張するいくつかのケースを考え出すことができます。

それが巨大なサイトを持つ大企業で、すべてが同じL&Fを持つ複数のアプリケーションを含む場合(たとえば、ポータル以外)。次に、H1はアプリケーション名/ Companyであり、H2は一意のタイトルであり、H3は小見出しなどです。

この場合、H1は一意ではありませんが、各h2は一意です。これは、ページタイトルが一意であるためです。そして私はサイト全体で一貫しているので、支援技術を使用している人のために物事を変更していません。

私は(あなたが述べたように)画面にH1を1つだけ持ち、H2がある場合は常にH1を持ち、H3がある場合は常にH2を持っている、などと強く信じています。

3
Susan R

HTML仕様のヘッダーの実装には、いくつかの根本的な欠陥があります。これらは、HTMLがあらゆる種類のサイト構造ではなく、ドキュメント構造と見なされたときに作成されました。したがって、それに基づいて、常にいくつかの議論があるでしょう。

あなたの例に基づいて、これらのオプションのいずれかが有効になると思います。私が付け加える唯一のことは、長いH1があなたのプレゼンテーションにまったく影響を与えるべきではないということです。 H1の異なるテキストを互いに異なるスタイルにすることができない理由はありません。私はこのようなものを使用することが知られています:

<h1>Main Title <span class="secondLine">More Text</span></h1>
2
DA01

SEO、HTML5、Schema.org、そしてそれほど重要ではないH1タグ。

通常、私が最近サイトを再設計している方法は、_<H2>_タグをサブヘッドとして使用することです(コピーで_<h1>_の上にある場合でも)。ただし、CSSで配置するため、コードビューでは_<h1>_タグが最初に表示されます。このようにして、検索エンジンはランキング内の個別の_<h1>_を優先できます。

さらに、私のクライアントの多くはPush to mobileを作成しているため、最先端のエッジを使用して多くのインターフェースを再設計しています HTML5 と組み込み schema.org metatag microdata =。 _<H1>_タグは古いサイトには便利ですが、心配しているような多くの問題がありました。 microdataを使用すると、各_<H1>_または_<header>_および_<footer>_の用途を明確に指定できます。複数のヘッダーとフッターを指定する場合は、関係を呼び出すことができ、_<section>_を指定します_HTML5_およびセクションが互いに独立していること。

次に、すべてのタグが連携してレイアウトとSEOを支援する必要があります。言うまでもなく、複数のスタイリングタグがあることによる視覚的な混乱を解消するのに役立ちます。私たちの使用法ではかなり多くのコードが作成されますが、SEOに関する結果は天文学的なものでした。

1
AbsoluteƵERØ

WCAGルール または任意の その他のアクセシビリティガイドライン を確認してください。

使用できる見出しの数に制限はありませんが、見出しは次の規則に従う必要があります。R-pd.3.3マークアップの見出しの階層のどのレベルもスキップしないでください。

見出しを識別するためのh1-h6の使用 も参照してください。

したがって、アイデアは、スタイルの観点からではなく、意図した方法で使用される意味的で説明的な見出しを付けることであり、それらはどのリーダーでもそれに応じて機能することです。

1

「本には何冊のタイトルがありますか?–ボビーテーブル」

私の本には6つのタイトルがあり、H1ヘッダーでなければなりません。 3つはオランダ語、フランス語、ドイツ語の3つの言語ページにありますが、タイトルは家の名前であるため同じタイトルです。他の3つはモバイルで、同じタイトルの同じ3つの異なる言語です。

SEOランキングに悪影響を与えずにH1ヘッダーを6ページに配置できるかどうかはわかりません。

0
V. Bobeldijk