北京网站制作人才/seo最新快速排名

本篇专栏基于笔者的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-configexport 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.tsimport 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.tsimport 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.tsexport default {title: "首页"description: "首页seo描述",keywords: "首页seo keywords",}

// lang/en/pages/index.tsexport 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,    })));  }},...

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