网站代码优化;网站建设代码优化 收藏 0

做前端，你一定会SEO网页代码优化，完全搞懂有意外收获

你一定不知道，在前端代码规范上，还有 SEO 代码规范，作为学习前端的你稍后了解呢？SEO 代码规范一方面是为了获取流量，如果你能运用得炉火纯青，在移动端和 PC 端网站应用上，那么你就可以找老板谈谈了，有了排名，有了流量，就可以拿提成了！

• 利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，为自己的网站获取免费流量；
• 以用户体验为核心，为目标用户提供高质量的内容；
• 对页面的代码和网页阅读体验，网站性能等进行优化，符合搜索引擎的规则，提升搜索引擎网页的自然排名。

T 深入浅出 SEO 优化规范

网站首页：

品牌词 – 产品中文全称、特色服务、xxxx

list 页面：

产品和主题概述 – 品牌词

detail 页面：

具体产品或内容主题概述 – 品牌词

注：强调重点即可，重要的关键词出现不要超过 2 次，而且要靠前，不同页面的 title 要有所不同

150 字以内

• 不超过 150 个字符，描述内容要和页面内容相关。
• 对页面内容的高度概括，不可过分堆砌关键词，不同页面的 description 要有所不同

Keywords 为产品名、专题名、专题相关名词，之间用英文半角逗号 , 隔开 ，告诉搜索引擎本页的重点、关键词。

书写顺序

代码顺序按照 标题 -> 描述 -> 关键字 依次

索引方式

• robot terms 是一组使用逗号 , 分割的值
• 通常有如下几种取值：none，noindex，nofollow，all，index 和 follow。确保正确使用 nofollow 和 noindex 属性值。

• content 内地数字代表时间（秒），既多少时间后刷新。
• 如果加 url，则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。

语义化的好处

• 符合 W3C 规范
• 代码结构清晰，方便阅读，有利于团队合作开发
• 语义化代码让搜索引擎容易理解网页，有利于搜索引擎优化（SEO）

语义化内容标签如下：

• 内部链接，要加 title 属性加以说明
• 外部链接，要加 rel=\”nofollow\” 属性，告诉蜘蛛无需追踪，传递权重

TIP

img 要加上 alt 属性加以说明

标题使用 caption 标签

• h1 一个页面只可有一个，首页多用于包含 logo，其他页面用于主标题
• h2 模块标题
• h3 段落的小节标题
• h4, h5, h6 基本上不使用

5、强调内容的重要性

• strong 和 em 都表示强调
• strong 显示为粗体 em 显示为斜体，且 strong 的强调程度要比 em 更高

• br 只用于文本内容的换行
• 输入法输入 \’banquan\’，按序号选择版权符号

TIP 语义化标签在 SEO 优化中的应用

注：对页面中的内容进行分块，一个 section 元素通常由标题以及内容组成不推荐那些没有标题的内容使用 section 标签

对比：它比 section 具有更明确的语义，代表一个独立的、完整的相关内容块，可以包含一个或多个 section

aside：独立于内容的一部分，且可以被单独的拆分出来而不会使整体受影响，常用于定义页面侧边栏

只能有一个：用来呈现文档或应用的主体部分，一个页面只能有一个 main 标签

页面中的 header

分块中的 header

文章中的 header

注：article、section、aside、nav 标签都可以拥有自己的 header 和 footer 标签

增强语义性：用来增强语义性，当现有的 HTML 标签不能充分表达语义的时候，可以借助 role 属性来说明

注：

• 重要内容尽量靠前放
• 搜索引擎抓取 HTML 的顺序是从上到下的，而有的搜索引擎对抓取的内容长度有一定的限制
• 重要内容不要用 JS 输出
• 搜索引擎不会抓取 JS 的生成内容
• 其他
• 页面结构尽量扁平化，目录结构不宜过深，最好不超过 三级，每级都有 面包屑导航，成树状结构分布。否则不利于搜索引擎抓取
• 做 404 页面，不仅提高蜘蛛体验，也提高用户体验

更多专业的 SEO 搜索引擎优化教程后续再做梳理

如果你才开始学习前端，我们这里有 html+css 阶段完整教程，我们在钉钉群里有全套的课程包含（入门到精通课程、4 综合项目（称之为 15 天训练营，在群里是从第二十三节课开始的）、30 个练习案例！）如果需要，给我发消息，邀请你进入钉钉群学习！

SEO手把手教你网站代码优化

网站建立之初，如果没有SEO的参与，网站代码方面可能比较乱。网页设计师在代码中夹杂了许多个人习惯。所以SEO做好网站优化，必须对网站中的代码进行优化，并需要跟网页设计师做好对接工作。那需要修改的内容包括哪些呢？

一、网站标题、关键词、详细描述的重新布置

某SEO看到过很多企业网站所有页面标题都是一个，某某某有限公司、股份公司等等。SEO需要做的工作就是需要让每个页面调用不同网站标题、关键词、详细描述。

不同页面标题设置有利于搜索引擎索引和排序

二、css、js代码的位置放置

通常我们查看源码时，看到的css或者是js不仅是大量堆积在</head>之前，还有一些css、js未写入文件，直接在页面中呈现。SEO的工作需要跟前端工程师沟通，将可以合并的css进行合并。不影响页面呈现的js放置在</body>之前。试试下，修改之后，你的网站打开速度有什么变化没有？

三、绿色无用代码的删除

打开页面源码之后，就看到一堆的绿色代码霸占了。虽然用户是不会看到这些代码，但是大量的绿色无用代码堆积，会增加页面的大小。虽然搜索引擎对于页面大小对网站排名有怎样的影响未有明确的规定，但是优质的页面中应当将这些绿色无用的代码删除。这仅是前端工程师的个人习惯造成的问题，需要改善。

四、大量空白回车的清理

一行一码是互联网还没开始流行起来时候的规定。在很多新的网页设计工具上市之后，很多页面可以自动生成，部分软件会造成代码中大量空白行的产生。SEO也需要联系前端工程师进行解决。

五、<h1>标签的使用

<h1>标示的是网页中最重要的内容，通常在详情页的标题中进行<h1>标签的控制。当然在前端工程师不明白优化的情况下，<h1>标签可能会被多次重复不当的使用。某SEO就遇到过这种情况。每个页面中都大量充斥着<h1>标签。需要提示前端工程师进行修改。

当然，如果使用好以上五点，让代码简洁清爽，相信企业网站能够得到搜索引擎的青睐，而且在对手明白之前，率先在搜素引擎排名上得到提升。企业订单一定会不断的增加。如有疑问和异议欢迎提出，某SEO愿意一起分享。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com