seo优化

前言

对 nuxt@2.15.7 编写的项目进行sitemap + head 进行seo优化，这里做一个实现的记录。

生成sitemap

什么是sitemap

Sitemap（站点地图）是一种文件的统称，通常Sitemap（站点地图）可以是txt或者XML格式。通过Sitemap（站点地图）你可以告诉搜索引擎关于你的站点中的网页、视频或者其他文件的相关信息，帮助搜索引擎更好的认识和理解你的站点。格式正确的Sitemap（站点地图）文件会帮助搜索引擎更高效地抓取你的网站。XML格式的站点地图，通常会包含更多的信息，比如你可以通过Sitemap（站点地图）文件告诉搜索引擎你认为网站中的哪些网页和文件比较重要，还会提供与这些文件有关的重要信息。例如，网页上次更新的时间和网页是否有任何备用的语言版本。

摘自：zhuanlan.zhihu.com/p/441973408 （Sitemap（站点地图）全知道）

sitemap的格式要求

我这里是使用xml的格式，这里可以查看官方的文档进行了解，这里就不进行过多的赘述了

www.sitemaps.org/protocol.ht… （Sitemaps XML format）

生成sitemap

目前有非常多的生成方式：

使用第三方工具（我这里没有使用这种方式，就不说了）
使用第三方库进行代码生成。由于目前项目是采取的nuxt框架，所以我这里使用@nuxtjs/sitemap进行自动生成。

@nuxtjs/sitemap使用

安装@nuxtjs/sitemap

安装@nuxtjs/sitemap
```
npm install @nuxtjs/sitemap -S
```

添加@nuxtjs/sitemap

在nuxt.config.js中添加如下配置

export default {
    modules: [
        '@nuxtjs/axios',
        ...
+       '@nuxtjs/sitemap'
    ]
}

这时候你可以启动项目（我这里启动的项目的端口是: 2066）。浏览器中查看http://localhost:2066/sitemap.xml，可以看到如下的图示。说明你的项目中已经添加了xml格式的sitemap文件。

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  <url>
    <loc>http://localhost:2066/activityDetail</loc>
  </url>
  ...(这里的<url></url>是根据我们的router生成的)
  <url>
    <loc>http://localhost:2066/activityDetail</loc>
  </url>
</urlset>

我们如上图可以看到，存在如下两个问题：
- <url></url>是根据我们的router生成的
- <url></url>内只有一个<loc></loc>。这个是不够的
所以需要sitemap的具体配置。

sitemap具体配置

在nuxt.config.js中添加如下配置：

export default {
    modules: [
        '@nuxtjs/axios',
        ...
        '@nuxtjs/sitemap'
    ],
+   sitemap: {
+       hostname: 'http://www.YourOfficeSite.com/', // 你的具体的网址
+       path: '/sitemap.xml',
+       cacheTime: 24 * 60 * 60 * 1000,
+       // gzip: true,
+       defaults: {
+         changefreq: 'daily',
+         priority: 1,
+         lastmod: new Date()
+       },
+    }
}

此时继续查看http://localhost:2066/sitemap.xml，你可以看到如下的xml信息(这里一点信息简化)：

<urlset ...(这的属性不做展示了)>
  <url>
    <loc>http://www.yourofficesite.com/activityDetail</loc>
    <lastmod>2022-07-15T07:22:44.780Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  ...
</urlset>

那现在基本就完成了sitemap的配置了。

nuxt.config.js中sitemap的配置的具体项目可以根据sitemap.nuxtjs.org/usage/sitem… 进行查阅进行自己需要的配置。

head的seo检索优化

head meta 标签与 seo优化

这里直接贴出来下面的文章，我是一个没有表情的文章搬运工。

www.w3cplus.com/html5/meta-… (Meta 标签与搜索引擎优化)

全局head设置

nuxt.config.js添加如下配置：

export default {
+   head: {
+   title: '我的官网', // 页面标签的显示
+   meta: [ // 直接添加到head中的meta标签
+     // seo 公共配置
+     { hid: 'og:type', name: 'og:type', content: 'webpage' },
+     { hid: 'og:title', name: 'og:title', content: '我的官网' },
+     { hid: 'og:site_name', name: 'og:site_name', content: '我的官网' },
+     { hid: 'og:url', name: 'og:url', content: 'http://www.YourOfficeSite.com/' }
+   ],
+ },
  modules: [
    '@nuxtjs/axios',
    ...
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    hostname: 'http://www.YourOfficeSite.com/', // 你的具体的网址
    path: '/sitemap.xml',
    cacheTime: 24 * 60 * 60 * 1000,
    // gzip: true,
    defaults: {
      changefreq: 'daily',
      priority: 1,
      lastmod: new Date()
    },
  }
}

我们打开http:localhost:2066控制台可以看到如下的效果：

www.nuxtjs.cn/api/configu…（【官网】nuxtjs nuxti.config.js的head文档）

子页面内的head设置

子页面~/page/hot.vue中添加如下配置

export default {
  name: 'hot',
  data() {},
+  head: {
+    title: 'hot页面',
+    meta: [
+      {
+        hid: 'description',
+        property: 'description',
+        content: 'hot页面中添加到 description 的meta'
+      },
+      {
+        hid: 'og:description',
+        property: 'og:description',
+        content: 'hot页面中添加到 description 的meta'
+      }
+
+    ]
+  },
}

我们打开http:localhost:2066/hot控制台可以看到如下的效果：

www.nuxtjs.cn/api/pages-h… （【官网】nuxtjs page内的head文档）

子页面的全局配置

如果我们项目中有非常多的页面，就需要到每个页面代码中进行修改与调整。所以按照我自己的想法就是，写一个配置的项，然后找一个入口跳转时候进行自动的配置。所以就有了如下的方案：（如果你有更好的方案，也欢迎沟通交流！！！）

~/layout/default.vue添加如下配置

+ const seoConfig = {
+   '/hot': {
+    title: 'hot页面',
+    meta: [
+      {
+        hid: 'description',
+        property: 'description',
+        content: 'hot页面中添加到 description 的meta'
+      },
+      {
+        hid: 'og:description',
+        property: 'og:description',
+        content: 'hot页面中添加到 description 的meta'
+      }
+    ]
+   }
+ }
export default {
  name: 'DefaultLayout',
+  head() {
+    return seoConfig[this.$route.path]
+  }
}

子页面~/page/hot.vue中更新如下配置:

export default {
  name: 'hot',
  data() {},
-  head: {
-    title: 'hot页面',
-    meta: [
-      {
-        hid: 'description',
-        property: 'description',
-        content: 'hot页面中添加到 description 的meta'
-      },
-      {
-        hid: 'og:description',
-        property: 'og:description',
-        content: 'hot页面中添加到 description 的meta'
-      }
-
-    ]
-  },
}

sitemap 跟 head 的配置封装

由于我们项目中，目前是页面不多并且只有部分的页面需要配置上述两个，所以考虑使用配置项的形式进行封装。

seo的配置项的封装

新增文件~/seo/seo-config.js

import Vue from 'vue'
export const seoConfig = {
  '/hot': {
    title: 'hot页面',
    meta: [
      {
        hid: 'description',
        property: 'description',
        content: 'hot页面中添加到 description 的meta'
      },
      {
        hid: 'og:description',
        property: 'og:description',
        content: 'hot页面中添加到 description 的meta'
      }
    ]
  }
}
/**
 * 在 layout/default 中设置 head
 */
export function setSeoHead() {
  const vm = this
  if (!(vm instanceof Vue)) throw new Error('需要再vue组件中进行使用')
  return seoConfig[vm.$route.path]
}
const seoRouteList = Object.keys(seoConfig)
/**
 * 在 nuxt.config.js 中设置 sitemap
 */
export const seoSitemap = {
  hostname: 'http://www.yimeishang.com/',
  path: '/sitemap.xml',
  cacheTime: 24 * 60 * 60 * 1000,
  // gzip: true,
  defaults: {
    changefreq: 'daily',
    priority: 1,
    lastmod: new Date()
  },
  // 只有匹配到的项目 生成 sitemap
  filter({ routes }) { 
    return routes.filter(route => seoRouteList.includes(route.url))
  }
}

nuxt.config.js中更新如下设置

+  import { seoSitemap } from './seo/seo-config'
export default {
  head: {
   title: '我的官网', // 页面标签的显示
   meta: [ // 直接添加到head中的meta标签
     // seo 公共配置
     { hid: 'og:type', name: 'og:type', content: 'webpage' },
     { hid: 'og:title', name: 'og:title', content: '我的官网' },
     { hid: 'og:site_name', name: 'og:site_name', content: '我的官网' },
     { hid: 'og:url', name: 'og:url', content: 'http://www.YourOfficeSite.com/' }
   ],
 },
  modules: [
    '@nuxtjs/axios',
    ...
    '@nuxtjs/sitemap'
  ],
+  sitemap: seoSitemap,
}

~/layout/default.vue 更新如下配置

+ import { setSeoHead } from '~/seo/seo-config'
export default {
   name: 'DefaultLayout',
+  head: setSeoHead,
}

zhuanlan.zhihu.com/p/37897723（Nuxt.js踩坑记，利用Nuxt一键生成多页面静态站点）

参考文章：

sitemap部分：

www.cnblogs.com/kongyijilaf… （使用@nuxtjs/sitemap给项目添加sitemap(网站地图)）

www.sitemaps.org/protocol.ht… （【官网】 Sitemaps XML format）

sitemap.nuxtjs.org/guide/setup （【官网】@nuxtjs/sitemap）

zhuanlan.zhihu.com/p/441973408 (Sitemap（站点地图）全知道)

head部分：

www.nuxtjs.cn/api/configu…（【官网】nuxtjs nuxti.config.js的head文档）

www.nuxtjs.cn/api/pages-h… （【官网】nuxtjs page内的head文档）

zhuanlan.zhihu.com/p/37897723（Nuxt.js踩坑记，利用Nuxt一键生成多页面静态站点）

www.w3cplus.com/html5/meta-… (Meta 标签与搜索引擎优化)

blog.csdn.net/yangziqi098… (HTMl中Meta标签 seo)

对nuxt2项目 sitemap + head 优化 SEO 实录

seo优化

前言

生成sitemap

什么是sitemap

sitemap的格式要求

生成sitemap

@nuxtjs/sitemap使用

安装@nuxtjs/sitemap

sitemap具体配置

head的seo检索优化

head meta 标签 与 seo优化

全局head设置

子页面内的head设置

子页面的全局配置

sitemap 跟 head 的配置封装

seo的配置项的封装

head meta 标签与 seo优化