web-dev-qa-db-ja.com

<h1>内のアンカータグまたはアンカータグ内の<h1>：どちらが良いですか？

ブログの<h1>タグを投稿タイトルに使用しようとしていますが、1つの問題に遭遇しました。タイトルはハイパーリンクされています。

事例1：

<h1> <a href=""> xyz </a> </h1>

ケース2：

<a href=""> <h1> xyz</h1> </a>

SEOの点でどちらが良いですか？

seohtmlheadinghyperlink
52
Sangram

HTML5を使用している場合、1つだけを選択してください。それらは同等です。
HTML5では ブロックレベルのリンク を使用できますが、ブロックレベルの要素は1つしかないため、特別な理由はありません。個人的には、ここでそれをしません。なぜなら、外側に<h1>タグがあると、ソースコードのスキャンが容易になるからです。

他のもの（XHTML、HTML4など）と2番目のものはまったく間違っています。それは有効なコードではなく、あるレベルでは検索の最適化には不向きです[1つの違反が実際にどれだけに影響するかについての標準免責事項を挿入するなど]。

56
Su'

SEOに関する限り、それらは同じです。 （通常、ブロックレベル要素にはインライン要素が含まれ、その逆は含まれないため、最初の例を使用する必要がありますが、SEOには影響しません）。

11
John Conde

これらは両方ともhtml5で正しく、htmlはインライン要素のブロック要素を許可します。これはSEOにも影響を与えません。どちらの場合もテキストは見出しで折り返されるため、同じ値を保持します。

有効性の選択ではなく、ユーザーインターフェイスの設定です。

  • アンカーの周りにヘッダーをラップすると、大きなアンカーが作成され、テキストのみがクリック可能になります。
  • ヘッダーの周りにアンカーをラップすると、行全体がクリック可能になります。

jsFiddle.netで例を作成しました

6
Martijn

ケース2では、hrefの挿入がページの他の部分とずれていることがよくあります。しかし、.cssでマージンを設定する方法かもしれません。したがって、ケース1を優先します。

4
Guy Thomas

ここで言うことは洞察に満ちています、ありがとうございました。もう1つノッチを取り上げましょう。方程式にmicrodataなどを追加します。

私たちが持っているとしましょう

<h1 itemprop="name"><a href="http://goldenage.com/maths.html"
itemprop="url">Mathematics in The Muslim Golden Age</a></h1>

と競合する

<a href="http://goldenage.com/maths.html" itemprop="url"><h1
itemprop="name">Mathematics in The Muslim Golden Age</h1></a>

「パフォーマンスに関係なく」私にとっては、例2の方が理にかなっています。リンクは名前の一部ではないためです。違いは、innerHTMLとtextContent、DOMwiseの違いに要約されます。 innerHTMLで見ると、アンカーが邪魔になります。 textContentが方法である場合、タグは削除されます。したがって、innerHTMLまたはtextContentという質問もあります。

したがって、マイクロデータを考慮に入れて、外側にアンカーを置く方がより純粋です。

ベース： http://thenewcode.com/617/How-To-Add-Microdata-To-Your-Blog

1
Sjerp van Wouden

ブロックレベルのリンクは、SEOの目的で避ける必要があります-馬の口から： https://www.seroundtable.com/block-level-links-google-seo-16369.html

更新：リンクの要点...

他の人が言ったように、どちらかのリンク構造を持つことは、リンクに適しています。ただし、SEOの目的のために、アンカーテキストをきれいに保ち、Googleがアンカーをより適切に解釈し、適切な関連性を割り当てることができるようにする必要があります。

John Mueller（Googleのウェブマスタートレンドアナリスト）は、次のように述べています...

その使用法は私たち（Google）でうまくいくでしょう-私たちはまだリンクをピックアップし、それとアンカーとしてテキストを関連付けることができます。 HTMLの解析には非常に柔軟性があるため、おそらくHTML4でも使用できます。とは言っても、アンカーテキストを明確にすればするほど、リンクのコンテキストを理解しやすくなるので、必ずしもすべての内部リンクのアンカーとして段落全体を使用するとは限りません。

TL; DR SEOの場合、ブロックレベルのリンクを使用しないでください。

0
Adders

<h1> <a href=""> xyz </a> </h1>この例は正しいです。

0
rakonda