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

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

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

一、网页三要素的基础优化规范T 深入浅出 SEO 优化规范1、页面标题 (Title)，30 字以内网站首页：品牌词 -网站托管 产品中文全称、特色服务、xxxx品牌名-正品低价、品质保障、配送及时、轻松购物 ！

list 页面：产品和主题概述 - 品牌词广州装修公司排行，联系地址-品牌词detail 页面：具体产品或内容主题概述 - 品牌词广州番禺区百姓装潢设计_收费标准-品牌词

注：强调重点即可，重要的关键词出现不要超过 2 次，而且要靠前，不同页面的 title 要有所不同2、页面描述（Description）150 字以内不超过 150 个字符，描述内容要和页面内容相关。

对页面内容的高度概括，不可过分堆砌关键词，不同页面的 description 要有所不同

商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居网站托管家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求" />3、页面关键字（Keywords）Keywords 为产品名、专题名、专题相关名词，之间用英文半角逗号

, 隔开 ，告诉搜索引擎本页的重点、关键词4、总结书写顺序。

代码顺序按照 标题 -> 描述 -> 关键字 依次二、搜索引擎的索引方式索引方式robot terms 是一组使用逗号 , 分割的值通常有如下几种取值：none，noindex，nofollow，all，index 和 follow。

确保正确使用 nofollow 和 noindex 属性值 页面重定向和刷新) 页面重定向和刷新content 内地数字代网站托管表时间（秒），既多少时间后刷新如果加 url，则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。

三、语义化内容标签的使用语义化的好处符合 W3C 规范代码结构清晰，方便阅读，有利于团队合作开发语义化代码让搜索引擎容易理解网页，有利于搜索引擎优化（SEO）

语义化内容标签如下：1、超链接：a 标签内部链接，要加 title 属性加以说明外部链接，要加 rel="nofollow" 属性，告诉蜘蛛无需追踪，传递权重2、图片：img 标签TIPimg 要加上

alt 属性加以说明3、表格：table 标签标题使用 caption 标签4、标题：h1 ~ h6 标签h1 一个网站托管页面只可有一个，首页多用于包含 logo，其他页面用于主标题h2 模块标题h3 段落的小节标题

h4, h5, h6 基本上不使用具体标准参考百度百科文章页面代码5、强调内容的重要性strong 和 em 都表示强调strong 显示为粗体 em 显示为斜体，且 strong 的强调程度要比 em 更高

强调文本强调文本6、视觉上突出显示文本7、时间

文章发表于

datetime="2022-06-01 12:00">2022-06-01

9、代表一段独立的内容，经常与说明配合使用标题/说明

10、换行、版权符号br 只用于文本内容的换行输入法输入 banquan，按序号选择版权符号四、语网站托管义化结构标签的使用TIP 语义化标签在 SEO 优化中的应用1、section 标签使用场景

>

标题

段落内容

标题