基于nodejs+vuetify3+ts+nuxt框架集成模块组件解析-seo优化第二章节+

最新推荐文章于 2025-06-09 10:11:41 发布

垣宇

最新推荐文章于 2025-06-09 10:11:41 发布

阅读量932

点赞数 28

分类专栏：开发框架/组件文章标签： vue.js node.js typescript vscode xhtml 中间件性能优化

本文链接：https://blog.youkuaiyun.com/mycollege2011/article/details/145733785

版权

一.身份验证请参考身份验证

二.SEO优化+谷歌等开源文档示例 SEO优化第一章节

三.SEO优化第二章节

1.Schema.org

介绍

nuxt 提供的 Schema.org 可能不会提供直接的排名提升，但它允许您在搜索结果中呈现丰富的片段。

丰富的片段已经被证明可以提高点击率，并在用户点击你的网站之前为他们提供更多的信息。

Schema.org提供了一个简单的API来为您的next应用程序构建Schema.org图。

特性

😎基于谷歌和Yoast最佳实践的简单API

🧙30+节点自动关系，日期，URL解析和更多的最佳实践Schema.org

💡简单的全局元提供最小的样板

🌳最小的代码，优化了摇树和SSR

next Dev Tools集成

安装配置

安装依赖模块

示例 nuxt安装

npx nuxi module add schema-org

示例手动安装

npm i nuxt-schema-org
#
yarn add nuxt-schema-org
#
pnpm i nuxt-schema-org
#
bun i nuxt-schema-org

示例需手动添加模块到 nuxt.config.ts 配置文件中

export default defineNuxtConfig({
  modules: [
    'nuxt-schema-org',
  ],
})

Tip:SPA警告

由于生成Schema.org节点所需的代码，建议在使用该模块时使用SSR。

如果在SPA中需要Schema.org支持，请使用useHead({script: [{type: 'application/ld+json‘, innerHTML: ’…'}]})来添加Schema.org节点。

预览Schema.org

设置好模块之后，您应该能够访问您的主页并查看Schema.org。您将发现<script type="application/ld+json">标记与默认Schema.org节点在</body>标记附近。

这是由缺省的Schema.org生成的，如果输出不是您需要的，您可以修改输出。

您可以在Schema.org选项卡下的next DevTools中进一步调试。

调试

Nuxt DevTools

调试的最佳工具是与next Schema.org集成的next DevTools。

这将为您提供Schema.org图和方便的测试链接。

这在开发中是默认启用的，只需导航到Schema.org选项卡。

调试配置

您可以启用调试选项，这将为您提供更细粒度的输出。这在开发模式下默认是启用的。

这将允许您访问 /__schema-org__/debug.json ，其中包含用于生成Schema.org节点的原始配置。

外部调试工具

您可以使用以下工具测试Schema.org：

谷歌富结果测试

Schema.org验证器

功能应用

工作原理

next Schema.org将根据您提供的输入和页面内容为您的站点生成结构化数据。

这是用来帮助搜索引擎更好地理解你的内容，并提供更相关的搜索结果。

有关如何生成schema.org的更多技术细节，您可以阅读Unhead schema.org文档。

原理详解

使用Unhead Schema.org，您可以将Schema.org图注入到页面中。

已经添加了包装器函数，以便更容易地选择谷歌Rich Results节点。谷歌结构化数据下文会新启用章节详细讲解，以清晰结构方便理解。

对于官方支持的节点，当图被解析时，它将应用许多转换来确保数据对谷歌有效。

否则，您可以提供按原样传递的自定义节点。

站点/页面级别配置

在解析图形时，包将从站点和页面级别注入配置，以减少样板文件的数量。

例如，如果您的页面上有一个<title>，那么我们很可能可以使用相同的标题来生成Schema.org网页的名称。

以下推论来自你的<head>数据：

inLanguage - <html lang="en"> (en)

name - <title>test</title> (test)

description - <meta name="description" content="test"> (test)

url - <link rel="canonical" href="https://example.com/my-page">(https://example.com)

image - <meta property="og:image" content="https://example.com/image.jpg">(https://example.com/image.jpg)

否则，它们将来自您的 Schema.org参数。

降低节点

对于某些节点，一次只能存在其中一个节点。例如，一个页面只能有一个网页节点。

解析图时，包将根据节点的@id对节点进行重复数据删除。

应用举例

有许多解析器可以帮助最小化维护和开发Schema的工作。

URL方法

任何URL字段都允许提供相关链接。该链接将以规范主机或规范页面URL作为前缀。

示例

defineComment({
  text: 'This is really cool!',
  author: {
    name: 'Harlan Wilton',
    url: '/user/harlan-wilton',
  }
})

显示

[
  {
    "@id": "https://example.com/#/schema/person/1230192103",
    "@type": "Person",
    "name": "Harlan Wilton",
    "url": "https://example.com/user/harlan-wilton"
  },
  {
    "@id": "https://example.com/#/schema/comment/2288441280",
    "@type": "Comment",
    "author": {
      "@id": "https://example.com/#/schema/person/1230192103"
    },
    "text": "This is really cool!"
  }
]

图像方法

使用与URL转换器相同的相对链接逻辑。

此外，单个字符串图像将被转换为ImageObject并作为根节点添加，并且将添加到@id的适用链接。

示例

defineWebPage({
  image: '/my-image.png',
})

显示

{
  "@id": "https://example.com/#/schema/image/1571960974",
  "@type": "ImageObject",
  "contentUrl": "https://example.com//my-image.png",
  "url": "https://example.com//my-image.png"
}

ID方法

为Schema节点提供@id有时对于设置您自己的关系很有用。在配置@id时，您可以将其作为以#开头的简单字符串提供。

该ID将被解析为使用规范主机或规范页面路径作为前缀。

示例

defineBreadcrumb({
  '@id': '#subbreadcrumb',
  'itemListElement': [
    { name: 'Sub breadcrumb link', item: '/blog/test' },
  ],
})

显示

{
  "@id": "https://example.com/#subbreadcrumb",
  "@type": "BreadcrumbList"
}

类型方法

提供@type的字符串将被扩展为默认类型。这是为了在谷歌不支持特定的@type时允许回退。

示例

defineWebPage({
  '@type': 'FAQPage',
})

显示

{
  "@type": [
    "WebPage",
    "FAQPage"
  ]
}

日期方法

任何日期都可以作为字符串或js date对象提供。当提供Date对象时，它将被转换为ISO 8601格式。

示例

defineWebPage({
  datePublished: new Date(2022, 1, 10, 0, 0, 0),
})

显示

{
  "datePublished": "2022-01-10T00:00:0+00:00"
}

Schema.org参数

改变集成的行为

要一次配置多个Schema.org节点并减少样板文件，可以利用templateParams上的schemaOrg选项。

示例 useHead

useHead({
  templateParams: {
    schemaOrg: {
      host: 'https://example.com',
      path: '/blog'
    }
  }
})

示例 vue

useHead({
  templateParams: {
    schemaOrg: {
      host: 'https://example.com',
      path: useRoute().path, // reactive is supported
      inLanguage: locale.value // refs are supported
    }
  }
})

配置参数

tagPosition

type: string

default: head

Schema.org脚本标记的位置。如果您希望在页面主体中加载脚本，这将非常有用。

host

type: string

您站点的生产URL。这允许客户端为您生成所有url，正确设置非常重要。

path

type: string

default: window.location.pathname

当前页面的路径。这允许客户端为您生成所有url，正确设置非常重要。

inLanguage

type: string

default: en

将isLanguage设置为任何使用它的Schema的这个值。应该是有效的语言代码，即en-AU

trailingSlash

type: boolean

default: false

是否在URL中添加斜杠。这对于谷歌理解页面的规范URL非常重要。

使用vue组件

⚠️不再推荐使用组件API。您应该使用可组合物来获得更好的开发人员体验。

每个Schema都有一个可用于配置Schema的组件。

每个组件实现相同的逻辑，并且有多种方法来定义组件。

Headless - Attributes

组件上传递的任何属性都将被转发到Schema。

对于前缀为@的字段，例如@type和@id，您可以简单地省略@。

例如，要设置页面名称和类型：

示例

<template>
  <!-- About us page inline -->
  <SchemaOrgWebPage type="AboutPage" name="About Us" />
</template>

Headless - Slots

除了在道具上提供属性之外，您还可以通过使用与属性相同名称的槽来提供数据。

仅支持浅文本节点

例如，我们可以生成一个FAQ问题，如下所示：

<template>
  <SchemaOrgQuestion>
    <template #name>
      What is the capital of Australia?
    </template>
    <template #acceptedAnswer>
      Canberra
    </template>
  </SchemaOrgQuestion>
</template>

Rendered Default slot

默认槽位

如果您希望呈现标记并希望完全自定义，则可以提供默认槽。槽道具将是解析后的节点。

示例

<template>
  <SchemaOrgQuestion>
    <!-- Scoped slots won't render anything -->
    <template #name>
      {
  { question }}
    </template>
    <template #acceptedAnswer>
      <div v-html="answer" />
    </template>
    <!-- Default slot will render -->
    <h2>
      {
  { question }}
    </h2>
    <div v-html="answer" />
  </SchemaOrgQuestion>
</template>

更多Schema.org请开发中自行参考 Schema.org文档

LD+JSON标签

模式被注入到文档<body>结尾的<script type="application/ld+json">标记中。

生产静态数据

在开发中运行时，此模式将响应页面更改，而在生产中运行时，它将是静态的。

这是因为机器人只会解析初始SSR响应，而不会解析任何客户端更改。为了避免在前端生成schema.org所需的额外包大小，它只在SSR响应上静态生成。

如果你真的需要这种行为，你可以启用响应模块config。

数据推测

为了避免大量与schema.org相关的样板文件，next schema.org将从您的页面中推断数据。

例如，它将从标题、描述、关键字、作者、日期、图像等头部标签中推断数据。

Nuxt内容

如何将nextschema.org模块与nextcontent一起使用。

介绍

nextschema.org与nextcontent开箱即用的集成，支持可用于配置页面Schema.org数据的Schema.org frontmatter键。

您可以在next OG Image & next Content Playground中看到这种集成的演示。

nuxt3设置内容

在next Content v3中，我们需要使用 asSchemaOrgCollection（）函数来扩展任何集合，以便能够使用schemaOrg前置键。

示例 nuxt.config.ts

import { defineCollection, defineContentConfig } from '@nuxt/content'
import { asSchemaOrgCollection } from 'nuxt-schema-org/content'

export default defineContentConfig({
  collections: {
    content: defineCollection(
      asSchemaOrgCollection({
        type: 'page',
        source: '**/*.md',
      }),
    ),
  },
})

为了确保标签实际呈现，您需要确保使用的是带有head键的 useHead（）组合。

示例 /...slug

<script setup lang="ts">
import { queryCollection, useRoute } from '#imports'

const route = useRoute()
const { data: page } = await useAsyncData(`page-${route.path}`, () => {
  return queryCollection('content').path(route.path).first()
})
// Ensure the schema.org is rendered
useHead(page.value.head || {})
useSeoMeta(page.value.seo || {})
</script>

nuxt2设置内容

不需要额外的设置，只需将schemaOrg密钥添加到您的frontmatter中。

用法

建议提供Schema.org节点数组，否则将使用所提供的数据扩展网页节点。

示例数字形式

---
schemaOrg:
  # Define new nodes
  - "@type": "BlogPosting"
    headline: "How to Use Our Product"
    author:
      type: "Person"
      name: "Jane Smith"
    datePublished: "2023-10-01"
---

示例对象

---
schemaOrg:
  # Augment WebPage to an AboutPage
  "@type": "AboutPage"
---

Markdown Recipes

示例博客

---
title: 'My Blog Post'
schemaOrg:
  - type: "BlogPosting"
    headline: "How to Use Our Product"
    author:
      type: "Person"
      name: "Jane Smith"
    datePublished: "2023-10-01"
---

示例 FAQ Page

---
title: 'FAQ'
schemaOrg:
  type: FaqPage
  mainEntity:
    - "@type": "Question"
      name: "What is your return policy?"
      acceptedAnswer:
        "@type": "Answer"
        text: "You can return any item within 30 days of purchase."
    - "@type": "Question"
      name: "Do you offer technical support?"
      acceptedAnswer:
        "@type": "Answer"
        text: "Yes, we offer 24/7 technical support."
---

示例 About Page

---
title: 'About'
schemaOrg:
  "@type": "AboutPage"
---

示例 Contact Page

---
title: 'Contact'
schemaOrg:
  "@type": "ContactPage"
  mainEntity:
    "@type": "ContactPoint"
    contactType: "Customer Service"
    telephone: "+1-800-555-5555"
    email: "support@example.com"
---

示例 Product Page

---
title: 'Product'
schemaOrg:
  - "@type": "Product"
    name: "Product XYZ"
    description: "A high-quality product that meets your needs."
    offers:
      "@type": "Offer"
      price: "29.99"
      priceCurrency: "USD"
---

Schema.org默认设置

介绍

next Schema.org使用Schema.org图向搜索引擎提供结构化数据。这些图具有描述站点和页面的根节点。

示例

{
  "@context": "https://schema.org",
  "@graph": []
}

模块自动为您设置两个默认节点：WebSite 和 WebPage。

示例 WebSite

{
  "@id": "https://nuxtseo.com/#website",
  "@type": "WebSite",
  "description": "Nuxt SEO is a collection of hand-crafted Nuxt Modules to help you rank higher in search engines.",
  "name": "Nuxt SEO",
  "url": "https://nuxtseo.com"
}

示例 WebPage

{
  "@id": "https://nuxtseo.com/#webpage",
  "@type": "WebPage",
  "description": "content",
  "url": "https://nuxtseo.com",
  "isPartOf": {
    "@id": "https://nuxtseo.com/#website"
  },
  "potentialAction": [
    {
      "@type": "ReadAction",
      "target": [
        "https://nuxtseo.com"
      ]
    }
  ]
}

在下面这个例子中，我们使用site Config配置了我们的站点：

示例

export default defineNuxtConfig({
  siteConfig: {
    title: 'Nuxt SEO',
    description: 'Nuxt SEO is a collection of hand-crafted Nuxt Modules to help you rank higher in search engines.',
    url: 'https://nuxtseo.com'
  }
})

配置默认值

如果你想改变网页或网站节点上的任何数据，你可以在你的应用程序中使用useSchemaOrg。

这将在您的配置中与默认配置合并。

示例 App.vue

<script lang="ts" setup>
useSchemaOrg([
  defineWebPage({
    name: 'My Page'
  }),
  defineWebSite({
    name: 'My Site'
  })
])
</script>

关闭默认值

如果你不想使用默认设置，你可以通过在next .config中设置defaults: false来退出：

示例 nuxt.config.ts

export default defineNuxtConfig({
  schemaOrg: {
    defaults: false
  }
})

设置身份

通过提供站点的标识来改进Schema.org。

介绍

提供标识符将把Default Schema.org链接到站点的作者。Organization或LocalBusiness节点可能有助于生成富结果。

选择身份

Person

Organization

OnlineStore

LocalBusiness

Person

当你的网站是关于一个人、一个个人品牌或一个个人博客时，应该使用一个人的身份。

例如 harlanzw.com, antfu.me

示例 Minimal

import { definePerson } from 'nuxt-schema-org/schema'

export default defineNuxtConfig({
  schemaOrg: {
    identity: definePerson({
      name: 'Harlan Wilton',

      // Profile Information, if applicable
      image: '/profile-photo.jpg',
      description: 'Software engineer and open-source contributor',

      url: 'harlanzw.com',
      sameAs: [
        'https://twitter.com/harlan_zw',
        'https://github.com/harlan-zw'
      ],
    })
  }
})

示例 Expanded

import { definePerson } from 'nuxt-schema-org/schema'

export default defineNuxtConfig({
  schemaOrg: {
    identity: definePerson({
      // Basic Information, if applicable
      name: 'Dr. Sarah Chen',
      givenName: 'Sarah',
      familyName: 'Chen',
      additionalName: 'J.', // middle name or other additional names
      alternateName: 'Sarah J. Chen',

      // Profile Information, if applicable
      image: '/profile-photo.jpg',
      description: 'AI researcher and technical author specializing in machine learning and neural networks',
      jobTitle: 'Principal AI Researcher',

      // Contact & Social, if applicable
      email: 'sarah.chen@example.com',
      url: 'https://sarahchen.dev',
      sameAs: [
        'https://twitter.com/sarahchen',
        'https://github.com/sarahchen',
        'https://linkedin.com/in/sarahchen',
        'https://scholar.google.com/citations?user=sarahchen'
      ],

      // Professional Details, if applicable
      worksFor: {
        '@type': 'Organization',
        'name': 'Tech Research Labs',
        'url': 'https://techresearchlabs.com'
      },
    })
  }
})

Organization

当你的网站是关于一个公司、一个品牌、一个非营利组织或一个社区时，应该使用组织标识。但是，当其他选项不适合时，它也应该用作包罗万象的标识。

示例 Minimal

import { defineOrganization } from 'nuxt-schema-org/schema'

export default defineNuxtConfig({
  schemaOrg: {
    identity: defineOrganization({
      // Basic Information
      name: 'TechCorp Solutions',
      logo: '/logo.png',
    })
  }
})

示例 Expanded

import { defineOrganization } from 'nuxt-schema-org/schema'

export default defineNuxtConfig({
  schemaOrg: {
    identity: defineOrganization({
      // Basic Information
      name: 'TechCorp Solutions',
      alternateName: 'TechCorp',
      description: 'Leading provider of enterprise software solutions and cloud services',
      url: 'https://techcorp.com',
      logo: '/logo.png',

      // Address Information, if applicable
      address: {
        '@type': 'PostalAddress',
        'streetAddress': '100 Innovation Drive, Suite 400',
        'addressLocality': 'Silicon Valley',
        'addressRegion': 'CA',
        'postalCode': '94025',
        'addressCountry': 'US'
      },

      // Contact Information, if applicable
      email: 'info@techcorp.com',
      telephone: '+1-650-555-0123',
      contactPoint: {
        '@type': 'ContactPoint',
        'telephone': '+1-650-555-0124',
        'email': 'support@techcorp.com'
      },

      // Business Details, if applicable
      foundingDate: '2010-01-15',
      numberOfEmployees: {
        '@type': 'QuantitativeValue',
        'minValue': 500,
        'maxValue': 999
      },

      // Social and External Links, if applicable
      sameAs: [
        'https://twitter.com/techcorp',
        'https://www.linkedin.com/company/techcorp',
        'https://www.facebook.com/techcorp'
      ],

      // Business Identifiers, if applicable
      legalName: 'TechCorp Solutions Inc.',
      taxID: '12-3456789',
      vatID: 'GB123456789',
      duns: '12-345-6789',
      iso6523Code: '0060:123456789',
      naics: '541512',

      // Return Policy, if applicable
      hasMerchantReturnPolicy: {
        '@type': 'MerchantReturnPolicy',
        'name': 'Standard Return Policy',
        'inStoreReturnsOffered': true,
        'returnPolicyCategory': 'https://schema.org/MerchantReturnFiniteReturnWindow',
        'returnPolicyCountry': 'US',
        'returnWindow': {
          '@type': 'BusinessDaysSpecification',
          'numberOfDays': 30
        }
      }
    })
  }
})

LocalBusiness

当你的网站是关于本地企业、商店、餐馆或服务时，应该使用LocalBusiness标识。它必须有一个与之关联的物理地址。

LocalBusiness{lang="ts}:: Restaurant, HealthAndBeautyBusiness, ProfessionalService, FinancialService， MedicalBusiness等示例…

谷歌建议使用最适合您业务的特定类型的LocalBusiness，检查子类型列表以找到最合适的。

示例 Minimal

import { defineLocalBusiness } from 'nuxt-schema-org/schema'

export default defineNuxtConfig({
  schemaOrg: {
    identity: defineLocalBusiness({
      '@type': '...', // Choose from https://schema.org/LocalBusiness#subtypes

      // Basic Information (Required)
      'name': 'The Coastal Kitchen',
      'description': 'Farm-to-table restaurant specializing in sustainable seafood and seasonal ingredients',
      'url': 'https://thecoastalkitchen.com',

      // Location (Required)
      'address': {
        streetAddress: '742 Oceanview Boulevard, Suite 100',
        addressLocality: 'Santa Cruz',
        addressRegion: 'CA',
        postalCode: '95060',
        addressCountry: 'US'
      },
    }),
  }
})

示例 Expanded

import { defineLocalBusiness } from 'nuxt-schema-org/schema'

export default defineNuxtConfig({
  schemaOrg: {
    identity: defineLocalBusiness({
      '@type': '...', // Choose from https://schema.org/LocalBusiness#subtypes

      // Basic Information (Required)
      'name': 'The Coastal Kitchen',
      'description': 'Farm-to-table restaurant specializing in sustainable seafood and seasonal ingredients',
      'url': 'https://thecoastalkitchen.com',

      // Location (Required)
      'address': {
        streetAddress: '742 Oceanview Boulevard, Suite 100',
        addressLocality: 'Santa Cruz',
        addressRegion: 'CA',
        postalCode: '95060',
        addressCountry: 'US'
      },

      // Precise Geographic Location, if applicable
      'geo': {
        '@type': 'GeoCoordinates',
        'latitude': '36.9741',
        'longitude': '-122.0308'
      },

      // Contact Information, if applicable
      'telephone': '+1-831-555-0123',
      'email': 'hello@thecoastalkitchen.com',

      // Hours of Operation, if applicable
      'openingHoursSpecification': [
        {
          dayOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],
          opens: '11:30:00',
          closes: '22:00:00'
        },
        {
          dayOfWeek: ['Friday', 'Saturday'],
          opens: '11:30:00',
          closes: '23:00:00'
        },
        {
          dayOfWeek: 'Sunday',
          opens: '10:00:00', // Sunday Brunch
          closes: '21:00:00'
        }
      ],

      // Business Details, if applicable
      'priceRange': '$$$', // $, $$, $$$, or $$$$
      'servesCuisine': [
        'Seafood',
        'California',
        'Farm-to-table'
      ],

      // Menu (for restaurants)
      'menu': 'https://thecoastalkitchen.com/menu',

      // Images, if applicable
      'image': [
        'https://thecoastalkitchen.com/images/storefront.jpg',
        'https://thecoastalkitchen.com/images/interior.jpg',
        'https://thecoastalkitchen.com/images/food.jpg'
      ],
      'logo': '/logo.png',

      // Payment Options, if applicable
      'paymentAccepted': [
        'Cash',
        'Credit Card',
        'Cryptocurrency'
      ],
      'currenciesAccepted': 'USD',

      // Additional Business Details, if applicable
      'isAccessibleForDisabled': true,
      'amenityFeature': [
        {
          '@type': 'LocationFeatureSpecification',
          'name': 'Parking',
          'value': true

最低0.47元/天解锁文章