Nuxt 菜鸟入门学习笔记七：SEO 和 Meta 设置

文章目录

SEO 和 Meta
- 默认值
- useHead
- useSeoMeta 和 useServerSeoMeta
- Components
- Meta 对象数据类型格式
- 特性
- - 响应式 Reactivity
  - 标题模板 Title Template
  - Body Tags
- 示例 Examples
- - definePageMeta
  - 动态设置标题
  - 动态添加外部 CSS

Nuxt 官网地址： https://nuxt.com/

SEO 和 Meta

Nuxt 可以通过 3 种方式提高 Nuxt 应用程序的搜索引擎优化：

强大的头部配置nuxt.config
组合式函数useHead
组件Head、Title、Meta等

默认值

在开箱即用的情况下，Nuxt 提供了合理的默认值，如：

charset: utf-8
viewport: width=device-width, initial-scale=1

如果需要，可以覆盖这些默认值，还可以设置 title 和 meta，如下代码示例：

// nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      charset: "utf-8",
      viewport: "width=device-width, initial-scale=1",
      title: "Nuxt3学习实践",
      meta: [
        {
          name: "description",
          content: "菜鸟小白nuxt3从入门到精通，边理论边实践",
        },
      ],
    },
  },
});

上面的代码运行结果可以通过在浏览器中查看网页源代码。

在nuxt.config.ts中提供app.head属性允许自定义整个应用程序的head。

缺点：这种方式无法使用响应式数据。
如果需要，推荐在 app.vue 或者在页面中使用useHead组合式函数。

useHead

useHead组合式函数允许我们通过Unhead以编程和响应式的方式管理页面的head标签。
与所有组合式函数一样，它只能用在组件的setup函数和生命周期钩子中。

// app.vue

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
useHead({
  title: "Nuxt3学习实践 ~ 坚持",
  meta: [{ name: "keywords", content: "Nuxt Vue SSR Typescript" }],
  bodyAttrs: {
    class: "page-container",
  },
  script: [
    {
      children: "console.log('Hello World')",
    },
  ],
});
</script>

我们建议您查看useHead和useHeadSafe组件。

useSeoMeta 和 useServerSeoMeta

通过useSeoMeta和useServerSeoMeta组合式函数，可以将网站的 SEO 元标签定义为一个完全支持 TypeScript 的扁平对象。
这可以帮助您避免错别字和常见错误，例如使用name而不是property。

// pages/about.vue

<script setup lang="ts">
useSeoMeta({
  title: "@about page",
  ogTitle: "@about page ..ogTitle",
  description: "@about page ..description",
  ogDescription: "@about page ..ogDescription",
  ogImage: "https://example.com/image.png",
  twitterCard: "summary_large_image",
});
</script>

了解更多关于useSeoMeta和useServerSeoMeta可组合项的信息。

Components

Nuxt 提供了<Title>、<Base>、<NoScript>、<Style>、<Meta>、<Link>、<Body>、<Html>和<Head>组件，这样就可以在组件模板中直接与元数据交互。
由于这些组件名称与本地 HTML 元素相匹配，因此在模板中将它们大写是非常重要的。
<Head>和<Body>可以接受嵌套的元标签（出于美观的考虑），但这对嵌套的元标签在最终 HTML 中的呈现位置没有影响。

// pages/login.vue

<template>
  <div>
    <Head>
      <Title>登录页</Title>
      <Meta name="description" :content="message" />
      <Style
        type="text/css"
        children="body { background-color: lightgreen; }"
      />
    </Head>

    <h1>@ login page</h1>
  </div>
</template>

<script setup lang="ts">
const message = ref("Hello World");
</script>

<style lang="scss" scoped></style>

Meta 对象数据类型格式

以下是用于useHead、app.head和组件的非响应式类型。

interface MetaObject {
  title?: string;
  titleTemplate?: string | ((title?: string) => string);
  templateParams?: Record<string, string | Record<string, string>>;
  base?: Base;
  link?: Link[];
  meta?: Meta[];
  style?: Style[];
  script?: Script[];
  noscript?: Noscript[];
  htmlAttrs?: HtmlAttributes;
  bodyAttrs?: BodyAttributes;
}

特性

响应式 Reactivity

所有属性都支持响应式，包括 computed、getters 和 reactive。

建议
computed 建议使用 getters(() => value) 而不是computed(() => value)。

useHead 响应式应用

<script setup lang="ts">
const description = ref("My amazing site.");

useHead({
  meta: [{ name: "description", content: description }],
});
</script>

useSeoMeta 响应式应用

<script setup lang="ts">
const description = ref("My amazing site.");

useSeoMeta({
  description,
});
</script>

标签组件响应式应用

<script setup>
const description = ref("My amazing site.");
</script>

<template>
  <div>
    <Meta name="description" :content="description" />
  </div>
</template>

标题模板 Title Template

可以使用titleTemplate选项为自定义网站标题提供一个动态模板，例如，在每个页面的标题中添加网站名称。
titleTemplate可以是一个字符串（其中%s被title属性的值替换），也可以是一个函数。
如果使用函数（完全控制），则不能在nuxt.config中设置，建议在app.vue文件中设置，它将适用于网站的所有页面：

// app.vue

<script setup lang="ts">
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - www.51blog.xyz` : "www.51blog.xyz";
  },
});
</script>

现在，每个页面标题的后面都增加了 - www.51blog.xyz。

Body Tags

可以在适用的标记上增加 tagPosition 选项，将它们追加到页面的不同位置。
tagPosition 可选值：

head：将标记添加到页面的 <head> 标签内；
bodyOpen：将标记添加到页面的 <body> 标签的开始；
bodyClose：将标记添加到页面的 <body> 标签的末尾；

<script setup lang="ts">
// pages/about.vue

useHead({
  script: [
    {
      src: "https://third-party-script.com",
      tagPosition: "bodyClose",
    },
  ],
});
</script>

示例 Examples

definePageMeta

在pages/目录中，您可以使用definePageMeta和useHead来设置基于当前路由的元数据。
例如，可以首先设置当前页面的标题（这是在构建时通过宏提取的，因此无法动态设置）：

<script setup>
definePageMeta({
  title: "Some Page",
});
</script>

然后在布局文件中，您可以使用之前设置的路由元数据（Route Meta）：

<script setup>
const route = useRoute();

useHead({
  meta: [{ property: "og:title", content: `App Name - ${route.meta.title}` }],
});
</script>

动态设置标题

在下面的示例中，titleTemplate既可以设置为带有%s占位符的字符串，也可以设置为函数，这样就可以为 Nuxt 应用程序的每个路由动态设置页面标题，具有更大的灵活性：

<script setup>
useHead({
  // 字符串形式： `%s` 将被 title 替换
  titleTemplate: "%s - Site Title",
  // 函数形式
  titleTemplate: (productCategory) => {
    return productCategory ? `${productCategory} - Site Title` : "Site Title";
  },
});
</script>

nuxt.config也是设置页面标题的另一种方法。但是，nuxt.config不允许页面标题是动态的。因此，建议在app.vue文件中使用titleTemplate添加动态标题，然后将其应用于 Nuxt 应用程序的所有路由。

动态添加外部 CSS

使用useHead组合式函数的 link 属性：

<script setup lang="ts">
useHead({
  link: [
    {
      rel: "preconnect",
      href: "https://fonts.googleapis.com",
    },
    {
      rel: "stylesheet",
      href: "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
      crossorigin: "",
    },
  ],
});
</script>

使用组件来启用谷歌字体

<template>
  <div>
    <Link rel="preconnect" href="https://fonts.googleapis.com" />
    <Link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
      crossorigin=""
    />
  </div>
</template>