关于seo:身为一名前端对网站做seo的极限在哪里nuxtvue

3次阅读

共计 2234 个字符，预计需要花费 6 分钟才能阅读完成。

身为一名前端对网站做 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 更多相干的计划的同学能够留言探讨 …

正文完