本文介绍如何在 Nuxt 中使用 useHead 设置规范链接和 JSON-LD 结构化数据，帮助搜索引擎及 AI 更准确地理解页面内容，从而提升页面的 SEO 与 GEO 基础表现。
一、什么是 SEO 与 GEO
SEO 是搜索引擎优化，目的是让网页更容易被搜索引擎抓取、理解和展示。
GEO 可以理解为生成式引擎优化，重点是让 ChatGPT、Google AI 等生成式搜索工具更容易理解和引用网页内容。
在 Nuxt 中，可以使用 useHead 动态设置页面的 <head> 信息，例如：
php
useHead({
link: [
{
rel: 'canonical',
href: url,
},
],
script: [
{
type: 'application/ld+json',
innerHTML: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Article',
headline: title,
description,
mainEntityOfPage: url,
}),
},
],
})二、为什么需要设置 canonical
canonical 用于告诉搜索引擎当前页面的规范 URL。
例如，同一篇文章可能通过以下地址访问：
bash
https://example.com/article/1
https://example.com/article/1?source=google
https://example.com/article/1?utm_campaign=test这些地址内容相同，但 URL 不同。通过设置：
css
{
rel: 'canonical',
href: 'https://example.com/article/1',
}可以告诉搜索引擎：
https://example.com/article/1才是这篇内容的正式地址。
这样可以减少重复内容问题，避免页面权重被不同 URL 分散。
三、什么是 JSON-LD 结构化数据
JSON-LD 是一种结构化数据格式，常用于向搜索引擎说明网页的类型和内容。
例如，可以告诉搜索引擎：
- 这是一个文章页面
- 文章标题是什么
- 文章描述是什么
- 作者是谁
- 发布时间是什么
- 页面主地址是什么
在 Nuxt 中，可以通过以下方式添加：
css
{
type: 'application/ld+json',
innerHTML: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Article',
headline: title,
description,
mainEntityOfPage: url,
}),
}四、每个字段的作用
1. @context
less
'@context': 'https://schema.org'表示使用 Schema.org 标准描述页面内容，通常固定填写，不需要修改。
2. @type
arduino
'@type': 'Article'表示页面类型是文章。
根据页面内容，也可以使用：
arduino
'@type': 'BlogPosting'适合博客文章；或者：
arduino
'@type': 'NewsArticle'适合新闻内容。
3. headline
makefile
headline: title表示文章标题，例如：
vbnet
headline: 'Nuxt 中如何使用 useHead 优化 SEO'建议与页面上的主标题保持一致。
4. description
makefile
description: description表示文章摘要或页面描述，建议简洁说明文章主要内容。
例如：
vbnet
description: '本文介绍如何在 Nuxt 中使用 useHead 设置 canonical 和 JSON-LD 结构化数据。'5. mainEntityOfPage
makefile
mainEntityOfPage: url表示这篇文章对应的主要页面 URL。
例如：
rust
mainEntityOfPage: 'https://example.com/articles/nuxt-seo'建议使用完整的绝对 URL，而不是相对路径。
五、推荐添加的字段
除了基础字段，还可以添加图片、作者、发布者和时间信息：
php
useHead({
link: [
{
rel: 'canonical',
href: url,
},
],
script: [
{
type: 'application/ld+json',
innerHTML: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Article',
headline: title,
description,
image: imageUrl,
author: {
'@type': 'Person',
name: authorName,
},
publisher: {
'@type': 'Organization',
name: siteName,
logo: {
'@type': 'ImageObject',
url: logoUrl,
},
},
datePublished: publishedAt,
dateModified: updatedAt,
mainEntityOfPage: {
'@type': 'WebPage',
'@id': url,
},
}),
},
],
})字段说明：
image：文章主图的完整 URLauthor：作者信息publisher：发布网站或机构logo：网站或机构的 LogodatePublished：文章首次发布时间dateModified：文章最后更新时间mainEntityOfPage：文章所属的主要网页
时间建议使用 ISO 8601 格式，例如：
makefile
2025-01-01T08:00:00Z六、Nuxt 中的完整示例
php
<script setup lang="ts">
const title = 'Nuxt 中如何使用 useHead 优化 SEO'
const description = '本文介绍如何在 Nuxt 中使用 useHead 设置 canonical 和 JSON-LD 结构化数据。'
const url = 'https://example.com/articles/nuxt-seo'
const imageUrl = 'https://example.com/images/nuxt-seo.jpg'
const authorName = '张三'
const siteName = '示例网站'
const logoUrl = 'https://example.com/logo.png'
const publishedAt = '2025-01-01T08:00:00Z'
const updatedAt = '2025-01-02T08:00:00Z'
useHead({
link: [
{
rel: 'canonical',
href: url,
},
],
script: [
{
type: 'application/ld+json',
innerHTML: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Article',
headline: title,
description,
image: imageUrl,
author: {
'@type': 'Person',
name: authorName,
},
publisher: {
'@type': 'Organization',
name: siteName,
logo: {
'@type': 'ImageObject',
url: logoUrl,
},
},
datePublished: publishedAt,
dateModified: updatedAt,
mainEntityOfPage: {
'@type': 'WebPage',
'@id': url,
},
}),
},
],
})
</script>七、使用时的注意事项
首先，所有 URL 最好使用完整地址，例如：
arduino
https://example.com/article/1不要只使用：
bash
/article/1其次，结构化数据中的标题、描述、作者和日期应与页面实际内容保持一致，不能填写虚假信息。
另外，不同页面应根据实际类型选择合适的 @type。产品页、FAQ 页、面包屑页面等，不一定都应该使用 Article。
最后，结构化数据只是 SEO 和 GEO 的基础优化，不能保证一定提升排名或被 AI 引用。页面本身还需要具备真实、有价值、结构清晰且可抓取的内容。