web-dev-qa-db-ja.com

<h1>と<h2>に同じテキスト

記事のH1タグとH2タグに同じコンテンツを含めることについてどう思いますか？キーワードの詰め込みのようですね。例：

<h1>Bananas <span>Musa × paradisiaca</span></h1>

<h2>Bananas <span>Musa × paradisiaca</span></h2>

<h2>Description</h2>  
<p>Bananas are long and yellow. Bananas are long and yellow.</p>

<h2>Taste</h2>  
<p>Bananas are delicious. Bananas are delicious. Bananas are delicious.</p>

これは悪い習慣だと思いますか？これがページのグラフィックレイアウトの作成方法であるため、タイトルが繰り返されます（それらの間に背の高い画像があります）。このようなマークアップ（この場合は<p>）、ただしスタイルはh2のようになっています。

<p>の代わりに、2〜3語で構成されるタイトルに適したものを提案しますか？これは純粋にデザインに基づいたアイデアであり、検索エンジンにこの行のインデックスを作成しないように言ってもかまいません。

<h1>Bananas <span>Musa × paradisiaca</span></h1>

<p class="h2">Bananas <span>Musa × paradisiaca</span></p>

<h2>Description</h2>  
<p>Bananas are long and yellow. Bananas are long and yellow.</p>

<h2>Taste</h2>  
<p>Bananas are delicious. Bananas are delicious. Bananas are delicious.</p>

（Spanにはdisplay: blockが設定されているため、次の行に移動します）

seohtmlheading
3
Boris Kozarac

複製されたコンテンツに別の見出し要素を使用しないでください。見出し（h1-h6）はさまざまな目的に使用されます（ドキュメントの概要、スクリーンリーダーユーザー向けのナビゲーションなど）。重複した見出しは役に立たず、面倒な場合や混乱を招く場合があります。

別の要素を使用し、意図したデザインに合わせてスタイルを設定するのが正しい方法です。これにpを使用するのが適切だと思われます。それ以外の場合、意味のないdiv。

このテキストがセクションのメインコンテンツの一部ではないことを明確にするために、 header element を使用して、見出し、複製された見出しテキスト、および画像をグループ化できます（画像がヘッダーの一部でもあります）。

複製されたテキストが関連性がなく、美的目的のみに役立つことを明確にするために、 WAI-ARIA presentation role を使用できます。

したがって、セクションには次のものが含まれます。

<header>
  <h1>Bananas <span>Musa × paradisiaca</span></h1>
  <img src="tall-image.png" alt="" />
  <p role="presentation">Bananas <span>Musa × paradisiaca</span></p>
</header>
3
unor