入门篇八 Nuxt4页面元信息与 SEO：让搜索引擎爱上你的网站

文章目录一、全局 meta 配置二、页面级 meta 配置三、动态 meta四、Open Graph 社交分享五、结构化数据JSON-LD六、规范链接Canonical URL七、robots.txt 和 sitemap八、性能优化 meta九、调试 SEO总结网站做得再漂亮如果搜索引擎搜不到用户就发现不了你。SEO搜索引擎优化对网站至关重要。Nuxt 内置了完善的 meta 管理功能让你轻松搞定页面标题、描述、关键词等 SEO 元素。一、全局 meta 配置在nuxt.config.ts中配置全局默认 metaexportdefaultdefineNuxtConfig({app:{head:{title:我的网站,titleTemplate:%s - 我的网站,// 页面标题模板meta:[{name:description,content:这是一个使用 Nuxt 4 构建的网站},{name:keywords,content:Nuxt, Vue, SSR, 前端开发},{name:author,content:Your Name},{charset:utf-8},{name:viewport,content:widthdevice-width, initial-scale1}],link:[{rel:icon,type:image/x-icon,href:/favicon.ico}],htmlAttrs:{lang:zh-CN}}}})现在所有页面都会有这些基础的 meta 信息。二、页面级 meta 配置每个页面可以覆盖或追加 meta 信息。使用useHead或useSeoMetascript setup langts useHead({ title: 首页, meta: [ { name: description, content: 这是首页的描述信息 } ] }) /script更推荐使用useSeoMeta它有更好的类型提示script setup langts useSeoMeta({ title: 文章详情, description: 这是文章详情页面的描述, ogTitle: 文章详情 - 我的网站, // Open Graph 标题 ogDescription: 分享到社交媒体时显示的描述, ogImage: https://example.com/article-cover.jpg, // 分享图片 twitterCard: summary_large_image // Twitter 卡片类型 }) /script三、动态 meta页面标题和描述经常需要动态生成比如文章详情页script setup langts const route useRoute() const articleId route.params.id // 获取文章数据 const { data: article } await useFetch(/api/articles/${articleId}) // 动态设置 meta useHead({ title: computed(() article.value?.title || 加载中...), meta: [ { name: description, content: computed(() article.value?.summary || ) } ] }) /script四、Open Graph 社交分享想让你的网站分享到微信、微博、Facebook 时显示漂亮的卡片需要配置 Open Graphscript setup langts const article { title: Nuxt 4 完全指南, summary: 从入门到精通一文掌握 Nuxt 4, cover: https://example.com/cover.jpg, author: Your Name } useSeoMeta({ // 基本信息 title: article.title, description: article.summary, // Open Graph微信、Facebook 等 ogTitle: article.title, ogDescription: article.summary, ogImage: article.cover, ogUrl: https://example.com/articles/nuxt4-guide, ogType: article, ogSiteName: 我的网站, // Twitter twitterCard: summary_large_image, twitterTitle: article.title, twitterDescription: article.summary, twitterImage: article.cover }) /script现在分享到社交媒体时就会显示带图片的精美卡片了。五、结构化数据JSON-LD结构化数据能让搜索引擎更好理解你的内容提升搜索排名。比如文章类型script setup langts const article { title: Nuxt 4 完全指南, author: Your Name, date: 2024-01-15, image: https://example.com/cover.jpg } useHead({ script: [ { type: application/ldjson, children: JSON.stringify({ context: https://schema.org, type: Article, headline: article.title, author: { type: Person, name: article.author }, datePublished: article.date, image: article.image }) } ] }) /script常见结构化数据类型类型用途Article文章Product产品Recipe食谱Event活动Organization组织BreadcrumbList面包屑导航六、规范链接Canonical URL避免重复内容被搜索引擎降权需要设置规范链接script setup langts const route useRoute() const canonicalUrl https://example.com${route.path} useHead({ link: [ { rel: canonical, href: canonicalUrl } ] }) /script七、robots.txt 和 sitemap让搜索引擎知道哪些页面可以抓取创建public/robots.txtUser-agent: * Allow: / Disallow: /admin/ Disallow: /api/ Sitemap: https://example.com/sitemap.xmlNuxt 有专门的 sitemap 模块pnpmaddnuxtjs/sitemap// nuxt.config.tsexportdefaultdefineNuxtConfig({modules:[nuxtjs/sitemap],site:{url:https://example.com}})会自动根据pages目录生成sitemap.xml。八、性能优化 meta一些 meta 能提升页面加载性能// nuxt.config.tsexportdefaultdefineNuxtConfig({app:{head:{meta:[// DNS 预解析{rel:dns-prefetch,href:https://fonts.googleapis.com},// 预连接{rel:preconnect,href:https://fonts.googleapis.com},// 预加载关键资源{rel:preload,href:/fonts/main.woff2,as:font,type:font/woff2,crossorigin:anonymous}],link:[// 预加载{rel:preload,href:/critical.css,as:style}]}}})九、调试 SEOChrome 开发者工具可以查看 meta 是否生效打开开发者工具切换到 Elements 面板查看head标签内的内容也可以用在线工具检查Facebook Sharing DebuggerTwitter Card ValidatorGoogle Rich Results Test总结SEO 是一个持续优化的过程核心要点功能实现方式全局 metanuxt.config.ts的app.head页面 metauseHead()或useSeoMeta()Open GraphogTitle,ogDescription,ogImage结构化数据JSON-LD script 标签规范链接link relcanonicalsitemapnuxtjs/sitemap模块入门篇到这里就结束了接下来进入基础篇我们会深入聊聊路由、组件、样式等核心概念。相关文章入门篇三Nuxt4组件自动导入写代码少敲一半字入门篇二Nuxt 4路由自动生成告别手动配置路由的日子延伸阅读nuxt4完整系列持续更新中。。内容有帮助点赞、收藏、关注三连评论区等你