身為一名前端對網站做seo的極限在哪裡?nuxt+vue

三月 發表於 2022-07-12
前端 Vue

身為一名前端對網站做seo的極限在哪裡?
環境(百度 goolge)
在這裡舉個例子(本人用的是vue+nuxt.js)的框架
採用的優化方案是
gzip+打包拆分+element按需載入+第三方js配置ssr和async
經本人實測效果很不錯

一,基礎類
1,網頁title
網站的標題是搜尋引擎優化非常關鍵的一步
<title>網站最關鍵的頁面title</title>

2,關鍵詞
例如:

<meta data-n-head="ssr" name="keywords" content="關鍵詞儘量在10個左右">

3,描述

<meta data-n-head="ssr" name="description" content="描述不易特長保持在100字元之內">

當你的網站完成上述的基礎類的植入,你的網站基本上通過title 和全部描述就可以搜尋到了。
倒是部分關鍵詞可能還剩搜尋不到,或者排名很靠後...

4,語義化標籤
例如
h1-h6、header、aside、nav、section 等;

二,效能優化
主要是看網站開啟的速度,也就是網站的這項的得分
(google瀏覽器 Lighthouse)

image.png

網站載入速度影響的項如下:
1,消除渲染阻塞資源 (主要是 js/css/img)
深入理解一下
https://segmentfault.com/a/11...

2,圖片處理
千萬別小看這一項,在前端seo 的各個方面都有圖片影子!
在這裡不做細化的說明,會給大家總結一個本人優化過的目錄

(1)圖片質量
(2)圖片描述alt
(3)圖片設定明確的寬高避免拉伸
(4)圖片格式
(5)圖片懶載入
(6)所有關鍵資源完成載入後延遲載入螢幕外和隱藏影像,以減少互動時間

三,服務端
服務端在seo中這個模組也是要單獨拿出來說說的

1,採用http2.0

(這裡為什麼要採用http2.0?這篇文章做了簡單的介紹             https://juejin.cn/post/6844903489596833800)

2,配置gzip壓縮的靜態檔案走.gz檔案

例子1
以webpack+vue的架構來舉例子
通過 npm install compression-webpack-plugin --save-dev 下載外掛
(這裡注意版本)
在vue.config.js中進行配置

const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin')
        .use(new CompressionPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8,
          deleteOriginalAssets: true
        }));
    }
  },
}

例子2
這裡在給一個muxt+vue的配置

build: {
    transpile: [/^element-ui/],
    vendor: ['element-ui'],
    productionSourceMap: false,
    plugins: [
        new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: /\.(js|css|html|png)$/,
            threshold: 1024,
            minRatio: 0.8,
            deleteOriginalAssets: false // 是否刪除原檔案
        })
    ]
}

(引數的具體配置這裡不做過多的贅述)

3,設定服務端靜態檔案快取(不少網站快取長達365d)

 以nginx為例
 參考文章
 https://juejin.cn/post/6844904148136099854

4,域名的設定和確認,這個也很有講究
5,配置404 500頁面等(這裡劃分到服務端模組下)
6,新增Robot.txt 檔案
7,配置sitemap 地圖檔案

四,運營
配置部落格互動頁面,新聞頁

1,外鏈配置
2,關鍵詞文章優秀的文章

五,其他
ssr 服務端預渲染
這裡簡單的舉了一個例子 利用nuxt官網提供的方式

  async asyncData({ query }) {
    if(query.id){
      return axios.all([getCaseDesc({id:query.id}),getCaseLists({rows: 9,page: query.page})]).then(axios.spread((caseDesc,caseLists) => {
        const [ceseHeardDetail] = caseLists.data.list.filter(item=> +item.id === +query.id)
          // console.log(ceseHeardDetail)
        return {
          caseDetail:caseDesc,
          ceseHeardDetail,
          caseList:caseLists.data.list
        }
      })).catch(err=>{
        console.log(err)
      })
    }
  },

有seo更多相關的方案的同學可以留言討論...