Nuxt3SEO优化指南

本篇专栏基于笔者的Vue专栏，Nuxt3系列，如有不连贯之处可查看Nuxt3系列其他文章！特此说明

• Nuxt3文档
• Nuxt3中文文档

一、优化方向

使用浏览器的这个工具可以快速地找出网页中需要优化的地方，这里我们列举几种常见的优化方案；

二、图片优化

• 这里不建议直接使用img标签，建议使用NuxtImg去实现图片优化；
• NuxtImg文档

1. <NuxtImg src="/abc.webp" width="300" height="150" alt="banner">, 图片携带alt 属性, 并且携带宽高(给个默认宽高即可)；
2. 可以适当将图片资源迁移到对象存储上，<NuxtImg provider="aliyun" src="/abc/efg.webp" alt="banner" width="150" height="150" />
3. 尽量使用webp的图像资源

import postcssConfig from "./postcss.config";

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...
  modules: [
    ...
    "@nuxt/image",
    ...
  ],
  image: {
    inject: true,
    provider: 'twicpics', // 这里是默认的twicpics, 可以随便用provider中的任意一项，但不能用ipx，目前是存在一些问题的；
    domains: ['mom-bullet.oss-cn-shanghai.aliyuncs.com'],
    twicpics: {
      baseURL: '', // 设置空，作为默认的
    },
    aliyun: { // 配置阿里云cdn，开发时先丢到本地的public目录下，上线后，将public目录丢到cdn上即可
      baseURL: "https://mom-bullet.oss-cn-xxxx.aliyuncs.com/xxxx/public/",
    },
  },
});

三、国际化SEO优化

这里没有写普通的SEO优化，是因为可以随便写，所以这里仅体现国际化的SEO优化

• 国际化采用nuxt i18n模块，具体请查看本系列的《Nuxt3国际化指南》

3.1-封装SEO钩子函数

export default (replace?: string) => {
    const route = useRoute();
    const { t } = useI18n();
    
    let name = route.name;
    name = name?.toString().split("___")[0];

    if (replace) {
        name = name?.replace(replace, "") || "index";
    }
    
    useSeoMeta({
        title: t("pageBaseTitle") ? t(`page.${name}.title`) + ' - ' + t("pageBaseTitle") : (t(`page.${name}.title`) || t(`pageDefaultTitle`)),
        description: t(`page.${name}.description`) || t(`pageDefaultDescription`),
        keywords: t(`page.${name}.keywords`) || t(`pageDefaultKeywords`),
    });
}

3.2-创建相关文件及使用

• lang/zh/index.ts
• lang/zh/pages/index.ts
• lang/en/index.ts
• lang/en/pages/index.ts
• pages/index.vue
• pages/mobile/index.vue

// lang/zh/index.ts

import index from "@/lang/zh/pages/index";

export default {
    zh: "中",
    ja: "日",
    en: "英",

    pageBaseTitle: "xxx官网",
    pageDefaultTitle: "xxxx官网",
    pageDefaultDescription: "xxx官网",
    pageDefaultKeywords: "xxxx,xxxx,xxxx",

    page: {
        index,
    },
}

// lang/en/index.ts

import index from "@/lang/en/pages/index";

export default {
    zh: "ZH",
    en: "EN",

    pageBaseTitle: "xxx website",
    pageDefaultTitle: "xxxx website",
    pageDefaultDescription: "xxx website",
    pageDefaultKeywords: "xxxx,xxxx,xxxx",

    page: {
        index,
    },
}

// lang/zh/pages/index.ts

export default {
	title: "首页"
	description: "首页seo描述",
	keywords: "首页seo keywords",
}

// lang/en/pages/index.ts

export default {
	title: "home"
	description: "home seo description",
	keywords: "home seo keywords",
}

// pages/index.vue
...
<script setup lang="ts">
useSeo();
</script>
...

// pages/mobile/index.vue
...
<script setup lang="ts">
useSeo("mobile");
</script>
...

四、伪静态

// nuxt.config.ts
...
hooks: {
  'pages:extend'(routes) {
    routes.push(...routes.map((r) => ({
      path: r.path === "/" ? r.path + "index.html" : r.path  + ".html",
      file: r.file,
    })));
  }
},
...

根据自己的路由去合理的定义