52

我试图<h1>在博客上使用标签作为帖子标题，但遇到了一个问题。标题超链接。

情况1：

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

情况2：

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

在搜索引擎优化方面哪个更好？

— 桑格拉姆
source

57

如果您使用的是HTML5，则只需选择一个即可；他们是等效的。
HTML5确实允许块级链接，但是在您的情况下，没有特别的理由这样做，因为只有一个块级元素。就个人而言，我不会在这里这样做，因为<h1>在外部具有标签会更容易在源代码中进行扫描。

其他任何东西（XHTML，HTML4等）和第二个都是完全错误的。它将不是有效的代码，并且在某种程度上对您的搜索优化不利。

— 素
source

我有一个问题：<h1> hello <h1> // 5个字符<h1> <a> hello </a> </ h1> // 5个字符或google将其读取为12个字符？

— hfarazm '16

11

就SEO而言，它们是相同的。（通常，块级元素包含内联元素，反之亦然，所以您应该使用第一个示例，但它不会影响SEO）。

— 约翰·康德
source

3

实际上，按照HTML规范，内联元素不得包含block元素。

— DisgruntledGoat

3

@DisgruntledGoat不完全是。Doctype需要考虑。

— Su

@Su'哪些文档类型允许内联元素中包含块元素？

— 不满的

4

@DisgruntledGoat HTML5允许链接（以前只是内联元素）链接到标题和段落标签等块元素。这是doctype重要的地方。如果您使用的是HTML5，则一定要使用pattern <a><h1></h1></a>。否则，请使用的传统模式<h1><a></a></h1>。Google会同等地注意这两种方法，但是除非您具有正确的doctype（HTML5），否则某些浏览器可能无法很好地与非标准模式配合使用。

— 蒂娜·贝尔万斯

因此以上内容也适用于命名锚标签。是不是除了<a name='intro'> <h1> Introduction </ h1> </a>以外，最好有<h1> <a name='intro'> Introduction </a> </ h1>。

— Jayapal Chandran

6

它们在html5中都是正确的，html允许内联元素中使用块元素。这对SEO也没有影响，在两种情况下，文本都被包装在标题中，因此保持相同的值。

这不是有效性的选择，而是用户界面中的首选项：

如果将标头包裹在锚点周围，则会创建一个较大的锚点，只有文本是可单击的。
当您将锚点环绕标题时，整行都可以单击。

我在jsFiddle.net上为您提供了一个示例

— 马丁
source

4

我发现案例2的href插入内容经常与我页面的其余部分不符。但这可能是我在银行中设置利润的方式.css。因此，我希望案例一。

— 盖·托马斯
source

1

这里所说的很有见地，谢谢大家。让我们再加一个分数：将微数据等添加到方程式中。

假设我们有

<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都更有意义。因为链接永远不是名称的一部分。区别归结为innerwise和DOMwise的textContent之间的区别。通过innerHTML进行查看时，锚点会妨碍您的操作。如果采用textContent，标签将被剥离。这样也提出了一个问题：innerHTML或textContent。

因此，我要说的是，考虑到微数据，将锚点放在外部更加纯净。

基于：http : //thenewcode.com/617/How-To-Add-Microdata-To-Your-Blog

— 舍普·范·沃登（Sjerp van Wouden）
source

0

<h1> <a href=""> xyz </a> </h1> 这个例子是正确的。

— 龙达
source

3

在HTML5下，这两种方法都是正确的

— Simon Hayter

0

出于SEO目的，应避免使用块级链接-从马口中即可：https： //www.seroundtable.com/block-level-links-google-seo-16369.html

更新：链接中的要点...

就像其他人所说的那样，拥有任何一种链接构造都非常适合链接。但是，出于SEO的目的，您应保持锚文本干净，以便Google可以更好地解释锚并分配适当的相关性。

John Mueller（Google网站管理员趋势分析师）继续说...

这种用法对我们来说很好（Google）-我们仍然可以选择链接，并且可以将您的文本作为锚点与此相关联。我们在解析HTML方面非常灵活，因此您甚至可以在HTML4中使用它。就是说，您使锚文本越清晰，我们就越容易理解链接的上下文，因此我不必总是将整个段落用作所有内部链接的锚。

TL; DR对于SEO，请不要使用块级链接。

— 加法器
source

希望您能更新您的答案，它部分显示了两个示例为何与其他示例所说的不相同。

— 罗布

-1

如果目的是在链接内添加其他可点击的元素（例如图片等），并且仍然使用html <5进行验证，则可以使用javascript两种方式同时使用它：

<div onclick="if (this.getElementsByTagName('a')[0]) location=this.getElementsByTagName('a')[0].href;">
<img src="/foo" alt="" />
<h1>
<a href="#">
linked-heading
</a>
</h1>
</div>

否则，只需：

<h1 onclick="if (this.getElementsByTagName('a')[0]) location=this.getElementsByTagName('a')[0].href;">
<a href="#">
linked-heading
</a>
</h1>

添加cursor:pointer到父元素的css中以完成技巧。

— 露西安·戴维德斯库（Lucian Davidescu）
source

1

内联JavaScript？我们回到1999年吗？;）

— Martijn 2015年

你为什么还要这么做？只需将标头包裹在锚点中即可。这只是不好的做法

— Martijn 2015年

仔细阅读评论，您会发现答案拼写在那里；）Html 4.01实际上早于1999年。当您尝试在该doctype下验证您的建议时，会出现以下错误：“ [D] ocument type在此不允许元素“ H1”（...）导致此消息的一个可能原因是，您试图将一个块级元素（例如“ <p>”或“ <table>”）放入一个内联元素（例如“ <a>”，“ <span>”或“ <font>”）。” 当然，不必绝对要关心验证者说的是什么，因此在评论的开头就加上了“ if”。

— Lucian Davidescu

<h1>或<h1>锚标记内的锚标记：哪个更好？

这不是有效性的选择，而是用户界面中的首选项：