一、SEO需要注意的點

新頁面是要做SEO的話，需要注意一下幾點:

1、TDK是SEO頁面必須的指標(biāo)，不注重SEO的頁面也要跟david確認(rèn)是否要加上DTK
NUXT框架提供了自帶的書寫title（T），description（D），keywords（K）的函數(shù)
例如：

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的規(guī)則（一般需求文檔會有，沒有需要跟david確認(rèn)）**

** 2、a標(biāo)簽的使用**

<a :href="`/pingce/${item.id}`" target="_blank">{{ item.title}}</a>

a標(biāo)簽是SEO的重中之重，要求做SEO的頁面，鏈接一定是要通過a標(biāo)簽的href地址去跳轉(zhuǎn)的，不是同一類型頁面的跳轉(zhuǎn)要加上target="_blank"屬性，例如，列表頁面跳轉(zhuǎn)到詳情頁面（https://www.shenlanbao.com/pingce ->https://www.shenlanbao.com/pingce/803622289687375872）

注：

• 切記不要用js的事件去實現(xiàn)跳轉(zhuǎn)，這樣搜索引擎會不收錄鏈接的
• 如果有不希望被收錄的鏈接，在a標(biāo)簽中加入rel="nofollow"屬性，去避免被爬蟲收錄

** 3、分頁問題**
普通的頁面，也就是不做SEO需求的頁面，可以用element的分頁組件去實現(xiàn)，但是，需要做SEO的頁面，要用單獨封裝的分頁去實現(xiàn)

注：Fenye.vue組件是SEO分頁組件

4、img圖片問題
通常的SEO頁面例如：知識列表（www.shenlanbao.com/zhishi/list5），圖片是很重要的SEO收錄排名的因素，一定要用img標(biāo)簽去實現(xiàn)，不要用背景圖，用了背景圖，會導(dǎo)致源碼中展示不出來圖片的地址，影響收錄和排名。img標(biāo)簽會有title和alt屬性，這個需要同david協(xié)商，看是否有需要補充這兩個屬性。

** 5、標(biāo)簽使用說明**
一般情況下，SEO用到的標(biāo)簽有，H1，H2，H3，a，img等，一個頁面只能出現(xiàn)一個H1標(biāo)簽，一般情況下是標(biāo)題，可以出現(xiàn)若干H2和H3，具體情況david會在SEO需求中說明，如果沒有說明，需要和david協(xié)商此事

** 6、跳轉(zhuǎn)路徑問題（相對路徑）**
前端在代碼中如果用到了a標(biāo)簽跳轉(zhuǎn)，需要接口數(shù)據(jù)渲染時，要用相對路徑，不要用絕對路徑，例如<a :href="/zhishi/typeId-articleId"></a>，不要用帶有域名的絕對路徑，否則會導(dǎo)致爬蟲抓取地址有問題，導(dǎo)致收錄降低

** 7、301跳轉(zhuǎn)**
SEO很重要的一點就是301跳轉(zhuǎn)（永久重定向），當(dāng)有需求說明要更換SEO頁面的地址時，此時就要考慮此頁面是否被收錄，為了確保因為頁面已經(jīng)被收錄，而前端又更換地址，導(dǎo)致收錄的地址跳轉(zhuǎn)到404頁面問題，前端需要將之前地址做好301跳轉(zhuǎn)，301跳轉(zhuǎn)也是官網(wǎng)SEO的重要指標(biāo)之一

** 8、404頁面**
404頁面是SEO種必不可少的頁面，假如文章已經(jīng)被刪除，但是文章的地址已經(jīng)被收錄，例如（www.shenlanbao.com/zhinan/12345），而咱們這邊因為業(yè)務(wù)需要，刪除了此篇文章，那么這個地址就應(yīng)該展示為404頁面，而不是常規(guī)的spa項目中，數(shù)據(jù)消失，只展示一個空白沒有內(nèi)容的頁面了，因為在SEO優(yōu)化中，頁面中的中心內(nèi)容區(qū)無數(shù)據(jù)，不能正常展示，這樣也不利于SEO優(yōu)化，爬蟲會認(rèn)為你的頁面優(yōu)化程度不高，頁面質(zhì)量差，降低全站的收錄率，所以，此時就應(yīng)該跳轉(zhuǎn)到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中第一個腳本標(biāo)簽
     this.$(`body script`).eq(0).remove()
     result.html = this.$.html()
   },
 },

這部分代碼的初衷是為了應(yīng)SEO要求，將源碼中最底部的冗余代碼去除，但是加上后發(fā)現(xiàn)導(dǎo)致工程的服務(wù)端渲染全部被客戶端代替，不符合要求，所以一直棄用，但是也為服務(wù)端接口在瀏覽器可視化提供了便利，將此部分代碼打開，就能在客戶端Network中看到服務(wù)端請求接口的數(shù)據(jù)（本來是看不到的），所以為了調(diào)試接口的便捷性，開發(fā)時，可以開發(fā)此行代碼，如無特殊修改，nuxt.config.js文件是不要提交到遠(yuǎn)程master分支的

** 10、TS和ESlint**
官網(wǎng)工程已經(jīng)接入TS和ESlint，目前官網(wǎng)絕大部分代碼還是用js寫得，那是引入TS之前的代碼，此后開發(fā)新的需求時，要用TS語法輸入，遵守ESlint規(guī)范，在TS運用中要減少any類型的使用。

二、HTML和CSS的使用

因為HTML標(biāo)簽的使用規(guī)范，也是SEO的指標(biāo)之一，雖然權(quán)重占比不高，但是也要盡量去遵守SEO的規(guī)范，之前因為時間緊任務(wù)重，且SEO規(guī)范沒有第一時間制定，此后要遵守規(guī)范，

html：
（1）在使用HTML標(biāo)簽時，盡量不要出現(xiàn)大面積的div套用div的情況
（2）p標(biāo)簽可以用來寫一些摘要或者提示語
（3）列表可以用ul和li標(biāo)簽
（4）詳情的主題按規(guī)則用H1和h2等等
（5）img標(biāo)簽要有alt屬性（具體問david）
（6）a標(biāo)簽的使用，rel="nofollow"屬性的使用

官網(wǎng)工程全部使用scss預(yù)處理語言，要嚴(yán)格遵守scss規(guī)則
** css：**
（1）在類名命名時要遵循駝峰命名法，減少拼音的使用，百度翻譯使用起來
（2）H5端，統(tǒng)一使用rem單位
（3）養(yǎng)成封裝常用的css屬性的習(xí)慣（scss語法）

代碼結(jié)構(gòu)方面

1、新頁面的路由地址要跟David確認(rèn)，不要隨意命名
2、新頁面要有自己對應(yīng)的component，static，文件夾，用來放置頁面獨有的組件和靜態(tài)資源（static中不要和pages中命名相同，否則會出現(xiàn)問題）
3、公共組件放置在component/common中，且組件命名要語義化，盡量使用英文駝峰
4、plugins文件夾放置一些插件，插件使用率不高的，要局部引入