从前端角度浅谈代码对SEO的影响！

写在前面：我们经常提到的“前端”，即“HTML、CSS、JS”的总称。HTML是超文本标记语言，结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。CSS是层叠样式表，顾名思义就是用来控制网页标签的样式，决定网站的视觉效果。JS是一种直译式脚本语言，简单的用途就是控制网页的行为，用来给HTML网页增加动态功能。

小的总结：

• HTML —— 结构层（控制页面结构）；
• CSS —— 样式层（控制页面样式）；
• JS —— 行为层（控制页面行为）。

具体示例：

01.HTML:

02.CSS:

03.JS:

正文内容：通过上面的简单介绍，想必大家也会觉得：其实前端真正对SEO比较有影响作用的还是HTML。

那么我们从几个详细的角度来讨论HTML对SEO的影响：

1. 性能角度：一个网页的性能主要涉及到其“加载速度”和“浏览流畅度”，主要解决方案有：减少页面请求、CDN加速、精简代码、压缩传输、引用新框架等；
2. 结构角度：HTML5版本相较于之前版本最明显的区别就是引入大量语义化标签，所谓“语义化标签”？顾名思义就是直接通过标签所用的单词意思就能知道这个标签包裹的内容范围属于什么。HTML头部meta标签大概了解即可，主要用于声明网页的语言、编码格式、相应模式、相关版权等。

接下来，举例介绍几个比较“流行”使用的HTML语义化标签：

01.header定义了站点的头部信息，也就是页眉，一般放置网站的站点名称以及LOGO和导航栏。搜索引擎更容易识别站点的类型。

02.nav定义导航链接，也就是栏目或者频道的链接。搜索引擎可以更好了解网站的信息架构，分类等。良好的信息架构，更有利于蜘蛛的爬行和权重的分布。

03.footer定义了底部信息，也就是页脚。放置页脚导航，一些比如公司介绍，联系我们之类的信息。一般来说对网站比较不重要，有可能搜索引擎会降低其位置的权重。

04.section该元素用来表示网页中不同的分区。优势体现在每个部分都可以有其独立的HTML标题。这可以让搜索引擎更好的了解网页的结构是如何划分的。搜索引擎可能会根据网页中的section标签找出其信息架构。（同左撇子）

05.article定义文章区域，可以更有利于搜索引擎识别网页的内容以及判断相关性。，

06.aside定义页面内容之外的内容，在左侧或右侧边栏。比如知乎右侧的“相关问题”就属于aside区域。aside标签的文字信息与article标签区域的文字信息最好是相关。可能会影响到该页面和目标页面的排名。

还有一些小标签SEO也会·识别：tag标签顾名思义就是文章标签词、time标签顾名思义就是页面发布时间、audio定义音频 、video定义视频 等等 … …

最后简单提一下几个要点：

• 一个页面要将H1标签数量控制到一个（最好是包裹页面大主标题、等有一定权重后，可以包裹logo强调品牌），文章段落二级标题最好加上H2。
• 编辑产品、资讯详情页的时候，“文章摘要”、“标签”要着重构思编辑，因为将直接影响到页面的SEO，最好是在编辑的时候就填好，精准。不要拖到后面再修改。
• 页面的文章内容板块最好用article标签包裹，不用担心兼容性问题，浏览器不能识别的标签会直接输出内容，不会对页面显示造成影响，而且现在主流浏览器对HTML5新的语义化标签兼容性都很不错。
• 编辑文章的时候，可以适当添加相关关键词的站内链接，提升网站的内链结构。
• 内容关键词加黑标签请用b标签(strong标签可以用来强调具体页面内容)。B标签往往用在关键词上，一个页面只要加2-5次就差不多了，具体还要根据页面大小而定。
• 页面配图的时候记得加“Alt”属性，有利于站内图片被搜索引擎的检索，对提升网站的曝光度有一定作用，同时也对页面的seo排名有一定影响。
• 借鉴相关文章时，如果涉及到内容复制粘贴，切记勿将iframe标签也复制过来了，内容本身的一些无关内外链接可以删除。
• 网站添加“面包屑”导航也有利于搜索引擎的爬行，更利于页面的抓取和索引效率。

写在最后：最后简单提几点对SEO优化有助的几点：网页页面链接伪静态（一个好的链接结构，可以清晰指导搜索引擎明确网页主体内容），制作网站地图（sitemap.html/xml）并提交给站长平台（对页面收录有直接影响），根据网站后台系统编辑对应的robots.txt（引导搜索引擎对网站进行有效抓取），网站结构扁平化（目录和内容结构最好不要超过3层，如果有超过三层的，最好通过子域名来调整和简化结构层数）。