likes
comments
collection
share

身为一名前端对网站做seo的极限在哪里?nuxt+vue

作者站长头像
站长
· 阅读数 24

身为一名前端对网站做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)

身为一名前端对网站做seo的极限在哪里?nuxt+vue

网站加载速度影响的项如下: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更多相关的方案的同学可以留言讨论...