身為一名前端對網站做seo的極限在哪裡？nuxt+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）

網站載入速度影響的項如下：
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更多相關的方案的同學可以留言討論...

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

相關文章