最常见的A标签和H标签该如何正确嵌套？网站中几乎随处可见，HTML的标签不论你怎么使用都是可以正常解析，被浏览器完整地渲染出想要的效果，所以很少有人会关注HTML标签的嵌套规则。而在SEO优化中a标签和h标签的嵌套使用不当，对SEO优化的影响可以说是非常之大。

要对a标签与h标签的嵌套规则首先的理解什么是锚文本和锚链接，如果搞不清这个就会把HTML标签胡乱嵌套。

01SEO优化中的锚链接

看下面的示例代码：

锚文本

上面是一个标准的锚链接，也就是说这个超链接包含有一个完整的“锚链接”和“锚文本”，其中的锚文本可以是文章的标题或者一个关键词。比如我们在换友情链接的时候，对方会要求你提供锚文本和锚链，一般情况下锚链就是网站网站的URL，锚文本则是网站的名称或你希望的一个关键词。

在网页设计中一个网站到处都有链接，所有的连接不论你怎么嵌套，对于浏览器来说都可以正确的渲染，但是对于SEO优化则不一定会正确，因为搜索引擎是按照HTML规则来进行页面所以和识别内容的。

02正确的A和H标签嵌套方法

在网站页面上，如logo处的链接，内页中二级栏目的链接，相关文章内容的链接，这些地方的锚链接都是为了用户体验和网站内容相互推荐的重要表现形式。有的地方使用了SEO优化的权重标签h1~h6，而又需要添加链接，正确的规则是：

标题

根据前面锚链的原理，a标签里面的链接文字就是这个锚链接的关键词，如果把h1放在a标签的里面，那么意思就是把整个h1标签作为了锚文本，从逻辑上来说是不对的，即使在浏览器上展现的效果都一样。

所以超链接里面一定是直接写文字，而不是包含很多的标签，这样才能真正的有利于SEO优化，搜索引擎的判断方式是按照w3c的标准来进行的，如果你没有按照规则来编写代码，很有可能收录也不会太好。

这也解释了同样的一个SEO优化人员，在优化相同权重的不同网站时效果差异会很大的原因，由于前端代码的不规范，影响网站收录和关键词排名是不可忽略的，有人说SEO优化关前端代码什么事，是你自己优化技术不行怪前端！这也巧了，你看你写的都是什么垃圾代码吧。

03错误的HTML标签嵌套分享

一、网站首页logo处

在网站的首页logo这里，什么样的代码都有，而正确的却只有

这一种方式，下面提供3种常见的错误写法：

上面第一个和第二个的错误都是逻辑不对，不符合锚链接的规则，a标签里面嵌套的块级元素div和标题标签h是个什么逻辑，请你给我解释一下！第3个的错误在于没有锚文本，a标签里面是空的，logo图片使用css的background属性展示出来，没有锚文本这就是一个空连接，搜索引擎都找不着锚文本请问凭什么收录，还要给你一个优质的排名，你在逗我吗。

二、栏目列表链接到详细页

栏目列表的错误方法主要表现在将文章的标题和摘要直接使用一个A标签链接，这样对于前端来说也蛮省事的。

栏目文章列表

比如上图中你可以点左边的图片打开详细页，也可以点右边红框的任意位置进入文章详情页，用户使用和浏览器渲染等都没有问题，但是源码就不符合规范了，右边红框内的源码如下。

GET 与 POST 两种请求方法的区别

说到WEB开发中GET与POST两种请求方法……

根据锚链接的规则，这一个a标签里面的h4和p标签都是锚文本，这么多的内容被当作锚文本来处理，搜索引擎会觉得这孙子到底写的是啥，老子难以理解代码的意思读不懂啊。

三、文章详情页相关文章

有时候为了实现一些特殊效果或者为了省事，直接使用某些嵌套可以很方便的就能实现想要的功能，并且是视觉上有不错的表现。比如下面的截图是文章详情页的相关文章代码。

相关文章

从前台的表现看没有什么问题，当我们打开源码，你就会发现这个HTML标签嵌套是不规范的、不合理的，代码如下：

这段代码有2个错误，第一是HTML标签中li和div均属于块级元素，用于页面的布局，属于兄弟关系，不宜进行嵌套使用；第二是超链接a标签里面嵌套的div，请你解释一下这个逻辑是什么，不符合锚链接的规则，也不利于SEO优化。

经过上面的分析，其实正确的写法就严格按照w3c标准来写前端代码，由于HTML标签不管你怎么写，浏览器几乎都可以渲染出来，但是如果嵌套的不规范，也会加重浏览器渲染页面的时间，也就是打开网页看到效果的时间会延长；其次是对SEO优化非常不友好。

不要说SEO优化和前端代码没有关系或影响可以忽略不计，当一个网站上不规范的代码多了自然影响就大了，SEO优化靠的就是一点一滴的权重积累，这里可以不用管，那里也可以忽略不计，这样的地方多了，你的网站整体权重就不行了，细节很重要，因为大的的方面其他人都知道，别人也都做了。

举报/反馈