从前端角度谈代码对seo的影响（seo代码优化有哪些方法）

JS脚本对网站SEO优化有没有影响？

关于网站JavaScript的使用和SEO注意事项。JS的SEO是近年越来越重要的问题，以前还没写过这方面的话题。无论是异步调用内容，还是增加页面互动，现在的网站几乎无法避免使用JS脚本。但JavaScript使用不当的话可能会对SEO造成非常大的影响。

搜索引擎怎样处理JS

首先，简单一句话，JS造成SEO问题的症结在于，搜索引擎不一定执行JS脚本。

做SEO的都知道，要有搜索流量，搜索引擎蜘蛛需要顺利爬行链接，抓取页面，解析并索引页面html代码中的内容，然后才谈得上排名和流量。在爬行、抓取、索引的过程中，如果JS造成障碍，就会导致问题。

浏览器执行JS、渲染页面是肯定的，使用用户访问一切正常。但问题就在于，搜索引擎蜘蛛抓取页面html代码时，如果遇到JS，不一定会去执行JS脚本，那么需要执行JS才能看到的内容，搜索引擎就不一定看得到。

Google遇到页面JS时，会在有计算资源、且页面有比较高价值时，尝试执行脚本、渲染页面。百度则基本上不执行JS脚本。所以做中文网站，使用JS上就更要谨慎。

重要链接不要用JS

搜索引擎爬行、抓取页面是靠跟踪链接的。如果重要链接需要运行JS脚本才能调用或解析出来，那搜索引擎就可能无法跟踪。

不是说链接就不能用JS调用，但重要的、想被收录的页面至少还要有最普通的<a>格式链接提供抓取入口。比如，调用一些相关文章、相关产品链接，可以用JS，但这些链接在网站主导航中都已经有列表页面提供了入口才行。

主导航、菜单系统、栏目/产品列表，不要用JS，除非你确认有其它方法提供了入口。

想被收录的内容不要用JS调用

页面上的文字内容，凡是想被收录的，不要用JS调用，包括文章正文，产品说明，产品图片，评论等。

JS倒是可以用来调用那些不想被收录的文字，比如广告、某些侧栏内容等。

我见过用JS调用内容的各种千奇百怪的用法，比如还有用JS调用页面标题标签的。

慎用懒加载、瀑布流

图片懒加载，甚至文字内容懒加载，是现在网站经常使用的方法，在一定程度上有利于提高页面速度。但要注意，用JS实现懒加载时，是否需要用户互动才能加载，比如点击“更多”链接，或者向下拉页面，搜索引擎蜘蛛是不会做这些动作的，不会点击按钮，也不会下拉页面，所以就可能看不到懒加载后的内容。无论懒加载的是更多本页内容，还是更多其它页面列表，都可能造成爬行、索引问题。

列表页面使用瀑布流是社交媒体网站的主流方式，用户已经习惯，有的普通网站也学这种方式。同样，要考虑到社交媒体网站经常是主动屏蔽搜索引擎的，不想让搜索引擎索引，普通网站大概率是想被索引的，使用瀑布流时要想一想有没有提供搜索引擎可以跟踪链接的其它入口。

注意速度

一般来说，使用JS会拖慢页面打开和响应速度。

通常下载JS文件倒还不算大问题，除非用了几MB的JS文件。但浏览器执行JS有可能会很耗费设备资源，设计不周的JS可能会执行好几秒钟，浏览器在执行JS时不能处理其它事情，造成脚本阻塞，对用户来说就是个页面空白或卡死数秒钟的状态，这是非常急人的。

所以，尽量删除执行时间过长的JS，执行超过1-2秒的脚本需要慎重考虑。尽量合并JS脚本，减少<script>数量。

尽量减少JS数量，包括第三方JS。我看过很多网站页面需要执行几十个JS脚本，包括很多第三方脚本。问一下自己，这些JS都是必须的吗？真的必须吗？宁可拖慢页面几秒钟、跳出率大幅提高也要用？对信息类页面，除了显示文章内容，其它都不是必须的。对电商网站，除了购物车，其它都不是必须的。

除了用户体验，页面速度也是搜索排名的重要因素。

服务器端渲染

如果可能的话，可以考虑JS在服务器端渲染，而不是客户端（浏览器）渲染。虽然这会增加技术难度，服务器响应也会变慢一点，但服务器性能一定是超过用户设备的，再加上缓存等方法，总体上是会比浏览器执行JS、渲染页面快很多的。

怎样检查JS是否造成SEO问题

几个小方法供读者参考。

一是浏览器禁用JS，看一下访问页面时是什么情况。如果禁用JS后重要内容看不到了，那么搜索引擎也可能看不到。不要寄希望于搜索引擎会青睐你的网站而去执行JS。

第二个是检查页面的快照，尤其是纯文字版的快照。搜索引擎快照在很多情况下就是搜索引擎索引的页面内容。

如果某些内容必须用JS调用，但又希望搜索引擎索引，还可以搜索一下被调用的内容，如果能搜索到，说明搜索引擎执行了JS，索引到了内容。我想不到为什么必须用JS调用，但很多技术人员对使用JS是比较执着的。

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

写在前面:我们经常提到的“前端”是“HTML、CSS、JS”的总称。HTML是一种超文本标记语言，其结构包括“head”部分(英文:Head)和“body”部分(英文:Body)。CSS是级联样式表，顾名思义，用来控制网页标签的样式，决定网站的视觉效果。JS是文字脚本语言。它的简单目的是控制网页的行为，给HTML页面添加动态功能。

小总结:

html——结构层(控制页面结构)；CSS样式层(控件页面样式)；JS——行为层(控制页面行为)。

具体例子:

01.HTML:

示例HTML。

02.CSS:

CSS的例子。

03.JS:

JS例子。

正文内容:通过上面的简单介绍，我想大家会觉得:其实真正影响SEO比例的是HTML。

接下来，我们从一些细节方面讨论HTML对SEO的影响：

从性能上看:一个网页的性能主要涉及其“加载速度”和“浏览流畅度”。主要解决方案有:减少页面请求、CDN加速、精简代码、压缩传输、引用新框架等。；从结构上看，HTML5版本和之前版本最明显的区别就是引入了大量的语义标签，所谓的“语义标签”？顾名思义，你可以直接通过标签中使用的词语的含义，知道这个标签包的内容范围属于什么。HTML页眉标签大致可以理解，主要用于声明网页的语言、编码格式、对应模式和相关版权。

接下来，举几个例子介绍一些比较“流行”的HTML语义标签:

01.定义网站的标题信息，即标题，一般放置网站的网站名称、LOGO和导航栏。搜索引擎更有可能识别网站的类型。

02.定义导航链接，即栏目或频道的链接。搜索引擎可以更好的理解网站的信息架构和分类。好的信息架构更有利于蜘蛛爬行和权重分配。

03.定义底部信息，即页脚。放置页脚导航，比如公司介绍，联系我们等等。一般来说，对于一个网站来说，这并不重要，搜索引擎可能会减少其位置的重量。

04.

这个元素用来表示网页中不同的分区。好处是每个部分都可以有自己的HTML标题。这可以帮助搜索引擎更好地理解网页的结构是如何划分的。搜索引擎可以根据。

标签找到它的信息架构。(与左撇子相同)

05.定义文章区域可以帮助搜索引擎识别网页内容，判断相关性。,

06.在左侧栏或右侧栏中定义页面内容以外的内容。比如知乎右侧的“相关问题”就属于这个区域。旁边标签的文本信息优选地与商品标签区域的文本信息相关。可能会影响这个页面和目标页面的排名。

还有一些小标签搜索引擎优化会识别:标签顾名思义是文章标签，标签顾名思义是页面发布时间、定义音频、定义视频等。

最后，简要提及几个要点:

一个页面需要设置。

标签数量控制在一个(最好把页面的主标题包起来，一定权重后可以把logo包起来强调品牌)，最好加上文章段落的副标题。

。在编辑产品和信息详情页面时，“文章摘要”和“标签”要重点编辑，因为会直接影响页面的SEO，所以编辑时最好填写准确。不要拖到以后。页面的文章内容部分最好用标签包装，所以不要担心兼容性。浏览器无法识别的标签会直接输出内容，不会影响页面显示。而且主流浏览器与HTML5的新语义标签有很好的兼容性。编辑文章时，可以适当增加相关关键词的站点链接，改善网站的内部链结构。向内容关键字添加黑色标签时请使用标签(强标签可用于强调特定的页面内容)。关键字中经常使用b标签，一个页面只能添加2-5次，具体取决于页面大小。记得在页面匹配图片时添加“Alt”属性，有利于搜索引擎对站内图片的检索，对提高网站曝光度有一定作用，对页面的seo排名也有一定影响。参考相关文章时，如果涉及内容的复制粘贴，切记不要复制标签，内容本身的一些无关的内外链接可以删除。给网站添加“面包屑”导航也有利于搜索引擎的抓取，更有利于页面的抓取和索引效率。

最后简述一下对SEO优化有帮助的几点：网页链接伪静态(良好的链接结构，可以让搜索引擎清楚地了解网页的主要内容)，制作网站地图(sitemap.html/xml)提交到站长平台(直接影响网页收录)，根据网站后台系统，编辑相应的robots.txt(引导搜索引擎有效地抓取网站)，网站结构扁平化(目录和内容结构不超过3层，如果超过3层，最好通过子域调整简化结构层)。

转载请注明来自专注SEO技术,教程,推广 - 8848SEO，本文标题：《从前端角度谈代码对seo的影响（seo代码优化有哪些方法）》

标签：seo优化seo方法