一、SEO需要注意的点
新页面是要做SEO的话，需要注意一下几点:
1、TDK是SEO页面必须的指标，不注重SEO的页面也要跟david确认是否要加上DTK
NUXT框架提供了自带的书写title（T），description（D），keywords（K）的函数
例如：
head() {
return {
title: `${this.t}`,
meta: [
{
hid: "description",
name: "description",
content: `${this.d}`,
},
{
hid: "keywords",
name: "keywords",
content: `${this.k}`,
},
{
name: "applicable-device",
content: this.isMobile ? "mobile" : "pc",
},
],
}
},
** 注意：不要忘记TDK的规则（一般需求文档会有，没有需要跟david确认）**
** 2、a标签的使用**
<a :href="`/pingce/${item.id}`" target="_blank">{{ item.title}}</a>
a标签是SEO的重中之重，要求做SEO的页面，链接一定是要通过a标签的href地址去跳转的，不是同一类型页面的跳转要加上target="_blank"属性，例如，列表页面跳转到详情页面（https://www.shenlanbao.com/pingce ->https://www.shenlanbao.com/pingce/803622289687375872）
注：
- 切记不要用js的事件去实现跳转，这样搜索引擎会不收录链接的
- 如果有不希望被收录的链接，在a标签中加入
rel="nofollow"属性，去避免被爬虫收录
** 3、分页问题**
普通的页面，也就是不做SEO需求的页面，可以用element的分页组件去实现，但是，需要做SEO的页面，要用单独封装的分页去实现
注：Fenye.vue组件是SEO分页组件
4、img图片问题
通常的SEO页面例如：知识列表（www.shenlanbao.com/zhishi/list5），图片是很重要的SEO收录排名的因素，一定要用img标签去实现，不要用背景图，用了背景图，会导致源码中展示不出来图片的地址，影响收录和排名。img标签会有title和alt属性，这个需要同david协商，看是否有需要补充这两个属性。
** 5、标签使用说明**
一般情况下，SEO用到的标签有，H1，H2，H3，a，img等，一个页面只能出现一个H1标签，一般情况下是标题，可以出现若干H2和H3，具体情况david会在SEO需求中说明，如果没有说明，需要和david协商此事
** 6、跳转路径问题（相对路径）**
前端在代码中如果用到了a标签跳转，需要接口数据渲染时，要用相对路径，不要用绝对路径，例如<a :href="/zhishi/typeId-articleId"></a>，不要用带有域名的绝对路径，否则会导致爬虫抓取地址有问题，导致收录降低
** 7、301跳转**
SEO很重要的一点就是301跳转（永久重定向），当有需求说明要更换SEO页面的地址时，此时就要考虑此页面是否被收录，为了确保因为页面已经被收录，而前端又更换地址，导致收录的地址跳转到404页面问题，前端需要将之前地址做好301跳转，301跳转也是官网SEO的重要指标之一
** 8、404页面**
404页面是SEO种必不可少的页面，假如文章已经被删除，但是文章的地址已经被收录，例如（www.shenlanbao.com/zhinan/12345），而咱们这边因为业务需要，删除了此篇文章，那么这个地址就应该展示为404页面，而不是常规的spa项目中，数据消失，只展示一个空白没有内容的页面了，因为在SEO优化中，页面中的中心内容区无数据，不能正常展示，这样也不利于SEO优化，爬虫会认为你的页面优化程度不高，页面质量差，降低全站的收录率，所以，此时就应该跳转到404页面中，告知爬虫我们这个页面是无效页面，搜索引擎会定期清理对404页面的地址的收录。
9、nuxt.config.js配置中需要注意的问题
"render:route": (url, result) => {
// eslint-disable-next-line no-undef
this.$ = cheerio.load(result.html, {
decodeEntities: false,
})
//由于window.__nuxt__总是位于body中的第一个script中，
//所以我移除了body中第一个脚本标签
this.$(`body script`).eq(0).remove()
result.html = this.$.html()
},
},
这部分代码的初衷是为了应SEO要求，将源码中最底部的冗余代码去除，但是加上后发现导致工程的服务端渲染全部被客户端代替，不符合要求，所以一直弃用，但是也为服务端接口在浏览器可视化提供了便利，将此部分代码打开，就能在客户端Network中看到服务端请求接口的数据（本来是看不到的），所以为了调试接口的便捷性，开发时，可以开发此行代码，如无特殊修改，nuxt.config.js文件是不要提交到远程master分支的
** 10、TS和ESlint**
官网工程已经接入TS和ESlint，目前官网绝大部分代码还是用js写得，那是引入TS之前的代码，此后开发新的需求时，要用TS语法输入，遵守ESlint规范，在TS运用中要减少any类型的使用。
二、HTML和CSS的使用
因为HTML标签的使用规范，也是SEO的指标之一，虽然权重占比不高，但是也要尽量去遵守SEO的规范，之前因为时间紧任务重，且SEO规范没有第一时间制定，此后要遵守规范，
html：
（1）在使用HTML标签时，尽量不要出现大面积的div套用div的情况
（2）p标签可以用来写一些摘要或者提示语
（3）列表可以用ul和li标签
（4）详情的主题按规则用H1和h2等等
（5）img标签要有alt属性（具体问david）
（6）a标签的使用，rel="nofollow"属性的使用
官网工程全部使用scss预处理语言，要严格遵守scss规则
** css：**
（1）在类名命名时要遵循驼峰命名法，减少拼音的使用，百度翻译使用起来
（2）H5端，统一使用rem单位
（3）养成封装常用的css属性的习惯（scss语法）
代码结构方面
1、新页面的路由地址要跟David确认，不要随意命名
2、新页面要有自己对应的component，static，文件夹，用来放置页面独有的组件和静态资源（static中不要和pages中命名相同，否则会出现问题）
3、公共组件放置在component/common中，且组件命名要语义化，尽量使用英文驼峰
4、plugins文件夹放置一些插件，插件使用率不高的，要局部引入
