专栏首页微服务架构日记Nuxt.js生成sitemap.xml、seo优化、robots.txt协议添加

Nuxt.js生成sitemap.xml、seo优化、robots.txt协议添加

环境准备

注意生成sitemap依赖于@nuxtjs/sitemap,并且需要用axios进行请求,不要使用@nuxtjs/axios,不然会报错

npm install @nuxtjs/sitemap
npm install axios

sitemap.xml配置

  • 在nuxt.config.js中配置下面的内容
# 在第一行引入
const axios = require('axios')
# 在modules中添加@nuxtjs/sitemap
modules: [
    '@nuxtjs/sitemap'
  ],
# 在最后面添加
sitemap: {
    path: '/sitemap.xml', // sitemap path,不用改
    hostname: 'https://www.gaozhe.net/', // sitemap网址的前缀
    cacheTime: 60 * 60 * 6, //  更新频率,只在 generate: false有用
    gzip: true, // 生成 .xml.gz 压缩的 sitemap
    generate: false, // 允许使用 nuxt generate 生成
    // 排除不要页面
    exclude: [
      '/404',
      '/page',
      '/details',
      '/article',
      '/tags',
      '/category',
      '/search'
    ],
    // 页面路由
    routes (callback) {
      axios.all([
        // 文章分类
        axios.get('https://api.gaozhe.net/categories/', {
          params: {
            type: 2
          }
        }),
        // 遍历所有文章
        axios.get('https://api.gaozhe.net/posts', {
          params: {
            type: 2,
            page: 1,
            per_page: 100,
            _embed: true
          },
          data: { progress: false }
        }),
        // 文章标签
        axios.get('https://api.gaozhe.net/blog', {
          params: {
            type: 2
          }
        })

      ]).then(axios.spread(function (menu, posts, info) {
        let now = new Date();
        now.setHours(now.getHours(), now.getMinutes() - now.getTimezoneOffset());
        let indexRoutes = [
          {
            url: '/',
            changefreq: 'daily',
            priority: 1,
            lastmodISO: now.toISOString()
          }
        ]
        let menuRoutes = menu.data.map((data) => {
          let url = ''
          if (data.ctype === 1) {
            url = '/category/1?type=' + data.id + '&title=' + data.cname
          }
          if (data.ctype === 2) {
            url = '/page/' + data.id
          }
          return {
            url: url,
            changefreq: 'monthly',
            priority: 0.8,
            lastmodISO: data.add_time
          }
        });
        let postsRoutes = posts.data.results.map((data) => {
          return {
            url: '/details/' + data.id,
            changefreq: 'daily',
            priority: 0.9,
            lastmodISO: data.update_at
          }
        });
        let tagsRoutes = info.data[0].blog_tag.map((data) => {
          return {
            url: `/tags/1?type=${data.id}&title=${data.tname}`,
            changefreq: 'weekly',
            priority: 0.7,
            lastmodISO: data.add_time
          }
        })
        //  用concat进行数据合并
        callback(null, indexRoutes.concat(menuRoutes, postsRoutes, tagsRoutes));
      }), function (err) {
        throw (err);
      });
    }
  }

seo优化

  • 全局seo

在nuxt.config.js的meta中添加网站的字符编码、语言、响应式标签、网站描述、网站关键字等信息;在link中添加全局的css、网站logo等信息。

  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  • 页面seo

在nuxt.js项目pages路由页面的script中添加head方法,该方法将随nuxt运行时自动载入

head () {
    return {
      title: `${this.info.blogName} | ${this.info.blogDescription}`,
      meta: [
        { name: 'keywords', content: this.info.keywords },
        { name: 'description', content: this.info.description }
      ]
    }
  }

robots.txt协议

在nuxt项目的static文件夹下,配置项目的静态文件,直接在static新建robots.txt即可,nuxt运行时会自动装配到根路由

参考文档

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 新网站 Robots 和 SiteMap 优化

    robots.txt是网站管理者写给爬虫的一封信,里面描述了网站管理者不希望爬虫做的事,比如:

    Parker
  • 新网站如何做好SEO优化 尽快被收录

    对于新网站,百度等搜索引擎会有一定的扶持,所以在网站上线之前一定要做好规划,为了网站往什么领域发展、所涉猎的内容等都要提前想好。

    德顺
  • Nuxt项目各级目录功能一览

    pages 用于构建Nuxt的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

    Javanx
  • Vue开始使用NUXT框架开发

    Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如服务端渲染、SEO、中间件支持、布局支持等。

    剑行者
  • 酒香也怕巷子深,教你一招,轻松让百度收录你的个人站点

    俗话说,酒香不怕巷子深,可是对于我们写技术文章的小伙伴,酒香也怕巷子深呀,为什么呢?

    Mculover666
  • 利用google Sitemap提交漏洞劫持其它网站排名

    我个人虽然不建议做黑帽SEO,但了解一些黑帽技术是白帽SEO的必修课。SEO黑帽的常见技术和最新应用至少可以让我们:

    砸漏
  • 网站更换域名与重新设计:8个SEO细节!

    对于站长而言,每个成功的站点都会经过改版的过程,更换网站域名,重新设计程序与网站模板,但这并不是一个轻松的事情,特别是针对中小企业网站,它面临诸多风险。

    蝙蝠侠IT
  • 移动SEO分享:php自动提交复合型Sitemap到百度搜索

    导读:本文分享的是移动 sitemap 协议说明及生成复合型 sitemap 的方法。所谓复合型就是指一个 sitemap.xml 既包含了 pc 页,也包含了...

    张戈
  • 浅析:18个影响网站流量下降的原因!

    网站流量一直以来是一个动态指标,每天都会有一定的涨幅,这是一个正常现象,但有的时候,网站流量会莫名其妙的开始持续下降,而从SEO人员的角度,总是感觉自身什么也没...

    蝙蝠侠IT

扫码关注云+社区

领取腾讯云代金券