一.身份验证 请参考 身份验证
二.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 supportedinLanguage: locale.value // refs are supported}}
})
配置参数
tagPosition
type: string
default: head
Schema.org脚本标记的位置。如果您希望在页面主体中加载脚本，这将非常有用。
hosttype: 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: FaqPagemainEntity:- "@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 applicableimage: '/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 applicablename: 'Dr. Sarah Chen',givenName: 'Sarah',familyName: 'Chen',additionalName: 'J.', // middle name or other additional namesalternateName: 'Sarah J. Chen',// Profile Information, if applicableimage: '/profile-photo.jpg',description: 'AI researcher and technical author specializing in machine learning and neural networks',jobTitle: 'Principal AI Researcher',// Contact & Social, if applicableemail: '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 applicableworksFor: {'@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 Informationname: 'TechCorp Solutions',logo: '/logo.png',})}
})
示例 Expanded
import { defineOrganization } from 'nuxt-schema-org/schema'export default defineNuxtConfig({schemaOrg: {identity: defineOrganization({// Basic Informationname: 'TechCorp Solutions',alternateName: 'TechCorp',description: 'Leading provider of enterprise software solutions and cloud services',url: 'https://techcorp.com',logo: '/logo.png',// Address Information, if applicableaddress: {'@type': 'PostalAddress','streetAddress': '100 Innovation Drive, Suite 400','addressLocality': 'Silicon Valley','addressRegion': 'CA','postalCode': '94025','addressCountry': 'US'},// Contact Information, if applicableemail: 'info@techcorp.com',telephone: '+1-650-555-0123',contactPoint: {'@type': 'ContactPoint','telephone': '+1-650-555-0124','email': 'support@techcorp.com'},// Business Details, if applicablefoundingDate: '2010-01-15',numberOfEmployees: {'@type': 'QuantitativeValue','minValue': 500,'maxValue': 999},// Social and External Links, if applicablesameAs: ['https://twitter.com/techcorp','https://www.linkedin.com/company/techcorp','https://www.facebook.com/techcorp'],// Business Identifiers, if applicablelegalName: 'TechCorp Solutions Inc.',taxID: '12-3456789',vatID: 'GB123456789',duns: '12-345-6789',iso6523Code: '0060:123456789',naics: '541512',// Return Policy, if applicablehasMerchantReturnPolicy: {'@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 Brunchcloses: '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
