HTMLのセマンティクス：見出しにリンク（アンカー要素）を入れるのは良い考えですか？

Question

は間違ったことはニュースのリストをこのように構築することです：

<h1><a href="article-1.html">That happened!</a></h1> 
    <div class="short">Just like planned</div> 

私はこれを好むでしょうか？

<h1>That happened!</h1> 
    <div class="short">Just like planned</div> 
    <div><a href="article-1.html">Read it now</a></div> 

またはヘッダー要素を削除しますか？

<div class="news-header"><a href="article-1.html">That happened!</a></div> 
    <div class="short">Just like planned</div> 

Answer 1

見出し内のアンカーを置くために構文的に有効です。

最初の例：H1には、「ニュース」などのページ見出しが含まれている必要があります。ニュース項目の「リスト」には、サブ見出し（H2）を使用する必要があります。 [詳細]ページでニュースタイトルをH1に置くことができます。

あなたの2番目の例：それは有効ですが、SEOに関してはそれほど良くありません。 「もっと読む」「ここをクリック」などのテキストを含むリンクは、リンクが何であるかを検索エンジンに知らせません。

3番目の例：SEOにとって有効で合理的です。しかし、見出しや太字のタグ内で使用される単語の重さは、検索エンジンによって高く評価されます。

Answer 2

見出しの中にリンクを挿入することは完全に有効です。実際には、スタックオーバーフローはすべての質問ページでもそれを行います。ページの意味を最もよく理解してください。 HTML5では

、あなたもそうのように、リンク内の見出しをラップすることができます：

<a href="article-1.html"><h1>That happened!</h1></a>