基于nuxtjs框架的网站SEO优化处理

一、页面TDK（标题、描述、关键词）设置

全局设置

配置nuxt.config.js文件

export default {
    //...
      head: {
        htmlAttrs: {
            lang: 'en'
        },
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },
    //...
}

在每个页面的配置

//首页index.vue
export default{
    ...//其他代码块
      head: {
        title: "网站标题",
        meta: [
            { name: 'description', content: '网站描述' },
            { name: 'keywords', content: '网站关键词' },
        ],
    },
    ...//其他代码块
}

动态设置文章标题
例如新闻详情页一般情况下是需要动态设置文章标题，先通过asyncData()拿到文章标题，在head()里设置：
```
export default{
    head(){
        return{
            title: this.title+'-行业资讯',
        }
    },
}
```

二、内嵌样式提取到外部

在nuxt.config.js的build中添加配置项：

  build: {
    // 将内嵌CSS样式提取到外部
    extractCSS: { allChunks: true },
  }

三、打包到服务器端指定目录下

测试期间可能会把项目暂时部署到根目录下的一个文件夹下，比如放在/ctc-nuxt，这时打包的时候前端可以通过在nuxt.config.js中设置一个配置项来实现：


  //配置将项目打包不对劲/ctc-nuxt文件夹下，打包后访问根目录变成：http://localhost:3000/ctc-nuxt
  router:{
    base:'/ctc-nuxt'
  },

四、配置网站地图sitemap.xml

详见：
https://blog.csdn.net/Steven_Son/article/details/127922593
https://blog.csdn.net/ww_5211314/article/details/119038092