详情请参考:ezdoc.cn/docs/nuxtjs…
1.添加 favicon 图标和 TDK(标题、描述、关键词):
nuxt.config.ts
添加配置:
export default defineNuxtConfig({
app: {
title: "website-name",
meta: [
{
name: 'keywords',
content: '网站关键字'
},
{
name: 'description',
content: '网站描述'
}
],
link: [{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }],
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
}
style: [],
script: [],
noscript: []
}
})
2.使用 useHead:
在app.vue中使用
<script setup lang="ts">
useHead({
title: "Nuxtjs - mywebsite" // 动态改变网站title
link: [
{
rel: 'icon', type: 'image/x-icon', href: 'favicon.ico'
}
],
meta: [
{ name: 'keywords', content: 'Nuxtjs,前端架构,JavaScript,TypeScript' },
{ name: 'description', content: '网站描述' }
]
})
</script>
3.使用 useSeoMeta:
<script setup lang="ts">
useServerSeoMeta({
title: "网站标题",
ogTitle: "网站标题",
description: '网站描述/简介',
ogDescription: '网站描述/简介',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})
</script>
当插入响应性标签时,您应该使用计算得到的语法 () => value
或使用 useHead 实现动态标题:
<script setup lang="ts">
const title = ref('my - website');
useSeoMeta({
title,
description: () => `description: ${title.value}`
})
</script>
<script setup lang="ts">
useHead({
// 作为字符串
// 其中`%s`会被标题替换
titleTemplate: '%s - website - title',
// ... 或者作为一个函数
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - website - title`
: 'website title'
}
})
</script>
4. 内置组件:
Nuxt 提供<Title>
, <Base>
, <NoScript>
, <Style>
, <Meta>
, <Link>
, <Body>
, <Html>
和 <Head>
组件,以便您可以直接与组件模板中的元数据进行交互
因为这些组件名称与原生 HTML 元素相匹配,所以在模板中将它们 大写
非常重要!
<Head>
和 <Body>
可以接受嵌套元标记(出于审美原因),但这对嵌套元标记在最终 HTML 中呈现的位置没有影响
<template>
<div>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="title" />
<Style type="text/css" children="
body {
background-color:rgba(255,0,0,.1);
}
"></Style>
</Head>
<h1>{{ title }}</h1>
</div>
</template>
<script setup lang="ts">
const title = ref('Hello World');
</script>
5. 外部 CSS:
<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>
6. /pages/
目录中可以使用 definePageMeta
来根据当前路由设置元数据:
<script setup lang="ts">
definePageMeta({
title: '网站标题'
})
</script>
7. 安装 @nuxtjs/seo 模块:
npx nuxi@latest module add seo
我们需要安装 @nuxtjs/seo 插件,@nuxtjs/seo 是一个模块集合,它覆盖了搜索引擎中常用的模块:
@nuxtjs/sitemap:网站地图
nuxt-simple-robots:蜘蛛爬虫协议
nuxt-schema-org:网页标准
nuxt-seo-experiments:实验性 SEO 元特征
nuxt-og-image:生成动态的社交分享图片
nuxt-link-checker:检查失效链接
在 nuxt.config.ts
中根据实际情况添加配置:
export default defineNuxtConfig({
// SEO 配置
site: {
url: 'https://dream-site.cn',
name: 'Dream Site',
description: '致力于打造程序员的梦中情站',
defaultLocale: 'zh-cn',
exclude: ['/admin/_components/**'], // 过滤不需要的 url
cacheMaxAgeSeconds: 24 * 3600, // 缓存时间一天
autoLastmod: true, _// 自动检测每个 URL 的 lastmod 日期
},
routeRules: {
// Don't add any /secret/\*\* URLs to the sitemap.xml
'/admin/_components/**': { robots: false },
}
})
现在你就能打开 sitemap.xml 和 robots.txt 了,其他更加详细的配置可以参考官方文档:nuxt-seo
8. Robots:
1. 禁用网站索引
在 nuxt.config.ts
export default defineNuxtConfig({
site: {
indexable: false
}
})
2. 禁用页面索引
<script setup lang="ts">
defineRouteRules({
robots: false
})
</script>
3. 如果需要更精细的编程控制,可以使用 nuxt.config.ts
配置该模块
在 nuxt.config.ts
export default defineNuxtConfig({
robots: {
disallow: ['/secret', '/admin'],
}
})
9. Sitemap:
1. 禁用 URL
模式的索引
export default defineNuxtConfig({
routeRules: {
// Don't add any /secret/** URLs to the sitemap.xml
'/secret/**': {
robots: false
},
}
})
2. 对于所有其他情况,您可以使用 include
和 exclude
模块选项来过滤 url
export default defineNuxtConfig({
sitemap: {
// exclude all URLs that start with /secret
exclude: ['/secret/**'],
// include all URLs that start with /public
include: ['/public/**'],
}
})
3. 设置 Lastmod
、changefreq
、priority
<script setup lang="ts">
useSeoMeta({
// will be inferred as the lastmod value in the sitemap
articleModifiedTime: '2024-10-01'
})
defineRouteRules({
sitemap: {
changefreq: 'daily',
priority: 0.3
}
})
</script>
4. 缓存时间
export default defineNuxtConfig({
sitemap: {
cacheMaxAgeSeconds: 3600 // 1 hour
}
})
5. 自定义样式
export default defineNuxtConfig({
sitemap: {
xslColumns: [
{ label: 'URL', width: '50%' },
{ label: 'Last Modified', select: 'sitemap:lastmod', width: '25%' },
{ label: 'Priority', select: 'sitemap:priority', width: '12.5%' },
{ label: 'Change Frequency', select: 'sitemap:changefreq', width: '12.5%' },
],
},
})
10. OG Image
1. 使用可组合 defineOgImageComponent
来定义主页的 og:image
<script lang="ts" setup>
defineOgImageComponent('NuxtSeo')
</script>
2. 在浏览器中访问主页并打开 Nuxt DevTools (Shift
+ Alt
+ D
)
3. 自定义模板
<script lang="ts" setup>
defineOgImageComponent('NuxtSeo', {
title: 'Hello OG Image 👋',
description: 'Look what at me in dark mode',
theme: '#ff0000',
colorMode: 'dark',
})
</script>
11. Schema.org
1. 配置默认值
<script lang="ts" setup>
useSchemaOrg([
defineWebPage({
name: 'My Page'
}),
defineWebSite({
name: 'My Site'
})
])
</script>
2. 如果你不想使用默认值
export default defineNuxtConfig({
schemaOrg: {
default: false
}
})
3. 设置身份类型
export default defineNuxtConfig({
schemaOrg: {
identity: {
type: 'Organization', // or 'Person'
name: 'My Company',
url: 'https://example.com',
logo: 'https://example.com/logo.png'
}
}
})
4. 自定义节点
<script lang="ts" setup>
useSchemaOrg([
{
'@type': 'DefinedTerm',
'name': 'Nuxt Schema.org',
'description': 'Nuxt Schema.org is a Nuxt module for adding Schema.org to your Nuxt app.',
'inDefinedTermSet': {
'@type': 'DefinedTermSet',
'name': 'Nuxt Modules',
},
}
])
</script>
12. 添加 Google Analytics 统计代码
1. 安装 nuxt-gtag:
npx nuxi@latest module add gtag
2. nuxt.config.ts:
export default defineNuxtConfig({
modules: ['nuxt-gtag'],
gtag: {
id: 'G-XXXXXXXXXX'
}
})
3. 或者在环境变量中添加 NUXT_PUBLIC_GTAG_ID
:
NUXT_PUBLIC_GTAG_ID = G-XXXXXXXXXX
13. 添加 Microsoft Clarity 统计代码
1. 安装 nuxt-clarity-analytics:
pnpm add -D nuxt-clarity-analytics
2. nuxt.config.ts
添加依赖:
export default defineNuxtConfig({
modules: [
'nuxt-clarity-analytics'
]
})
3. 在环境变量中添加:
MICROSOFT_CLARITY_ID = 'clarity ID'
14. 添加 Umami 统计代码
1、 安装 nuxt-umami:
pnpm add nuxt-umami
nuxt.config.ts
添加配置:
defineNuxtConfig({
extends: ['github:ijkml/nuxt-umami']
});
3. app.config.ts
添加配置:
export default defineAppConfig({
umami: {
id: '95653e90-7b8b-4541-b6de-ea5e544d8c2d',
host: 'https://umami.baiwumm.com',
useDirective: true,
version: 2,
domains: ['dream-site.cn'],
ignoreLocalhost: true
}
});
4. 跟踪事件
<template>
<button v-umami="'Event-Name'">
Event Button
</button>
<button v-umami="{ name: 'Event-Name' }">
as object
</button>
<button v-umami="{ name: 'Event-Name', position: 'left', ...others }">
with event details
</button>
</template>