Nuxt3 实战 (十二)：SEO 搜索引擎优化指南
2024-06-26 242 发布于广东
版权
举报
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章介绍了如何为Nuxt.js项目添加favicon图标和TDK（标题、描述、关键词），安装@nuxtjs/seo模块，以及如何设置Robots、Sitemap、OG Image、Schema.org、Experiments等。文章还提到了添加Google Analytics、Microsoft Clarity和Umami统计代码的方法。文章最后总结称，Nuxt.js 3集成了很多SEOModules，使开发者能够更加高效便捷地做好搜索引擎方面的优化。
添加 favicon 图标和 TDK（标题、描述、关键词）
nuxt.config.ts 添加配置：export default defineNuxtConfig({ app: { title:'Dream Site', meta: [ { name: 'keywords', content: 'Nuxt.js,导航,网站' }, { name: 'description', content: '致力于打造程序员的梦中情站' } ], link: [{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }], style: [], script: [], noscript: [] } }) 使用 useHead
<script setup lang="ts"> useHead({ title:'Dream Site', link: [{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }], meta: [ { name: 'keywords', content: 'Nuxt.js,导航,网站' }, { name: 'description', content: '致力于打造程序员的梦中情站' } ] }) </script> 使用 useSeoMeta 组合函数
<script setup lang="ts"> useSeoMeta({ title: 'Dream Site', ogTitle: 'Dream Site', description: '致力于打造程序员的梦中情站', ogDescription: '致力于打造程序员的梦中情站', ogImage: 'https://example.com/image.png', twitterCard: 'summary_large_image', }) </script> /pages/ 目录中可以使用 definePageMeta 来根据当前路由设置元数据
<script setup lang="ts"> definePageMeta({ title: 'Dream Site' }) </script> 动态标题
<script setup lang="ts"> useHead({ // 作为字符串， // 其中`%s`会被标题替换 titleTemplate: '%s - Dream Site', // ... 或者作为一个函数 titleTemplate: (productCategory) => { return productCategory ? `${ productCategory} - Dream Site` : 'Dream Site' } }) </script>
官方文档：SEO和Meta
安装 @nuxtjs/seo 模块
我们需要安装 @nuxtjs/seo 插件，@nuxtjs/seo 是一个模块集合，它覆盖了搜索引擎中常用的模块：
@nuxtjs/sitemap：网站地图 nuxt-simple-robots：蜘蛛爬虫协议 nuxt-schema-org：网页标准 nuxt-seo-experiments：实验性 SEO 元特征 nuxt-og-image：生成动态的社交分享图片 nuxt-link-checker：检查失效链接具体使用方式：
@nuxtjs/seo 插件：npx nuxi@latest module add seo 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
Robots
禁用网站索引export default defineNuxtConfig({ site: { indexable: false } }) 禁用页面索引
<script lang="ts" setup> defineRouteRules({ robots: false, }) </script> 如果需要更精细的编程控制，可以使用 nuxt.config.ts 配置该模块
export default defineNuxtConfig({ robots: { disallow: ['/secret', '/admin'], } })
更加详细的配置可以参考官方文档：Robots
Sitemap
禁用 URL 模式的索引export default defineNuxtConfig({ routeRules: { // Don't add any /secret/** URLs to the sitemap.xml '/secret/**': { robots: false }, } }) 对于所有其他情况，您可以使用 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/**'], } })
设置 Lastmod、changefreq、priority
<script setup> useSeoMeta({ // will be inferred as the lastmod value in the sitemap articleModifiedTime: '2023-01-01' }) defineRouteRules({ sitemap: { changefreq: 'daily', priority: 0.3 } }) </script>
缓存时间
export default defineNuxtConfig({ sitemap: { cacheMaxAgeSeconds: 3600 // 1 hour } })
自定义样式
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%' }, ], }, })
更加详细的配置可以参考官方文档：Sitemap
OG Image
使用可组合 defineOgImageComponent 来定义主页的 og:image<script lang="ts" setup> defineOgImageComponent('NuxtSeo') </script>
在浏览器中访问主页并打开 Nuxt DevTools (Shift + Alt + D)
自定义模板
<script lang="ts" setup> defineOgImageComponent('NuxtSeo', { title: 'Hello OG Image ', description: 'Look what at me in dark mode', theme: '#ff0000', colorMode: 'dark', }) </script>
更加详细的配置可以参考官方文档：OG Image
Schema.org
配置默认值<script lang="ts" setup> useSchemaOrg([ defineWebPage({ name: 'My Page' }), defineWebSite({ name: 'My Site' }) ]) </script> 如果你不想使用默认值
export default defineNuxtConfig({ schemaOrg: { default: false } }) 设置身份类型
export default defineNuxtConfig({ schemaOrg: { identity: { type: 'Organization', // or 'Person' name: 'My Company', url: 'https://example.com', logo: 'https://example.com/logo.png' } } }) 自定义节点
<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>
更加详细的配置可以参考官方文档：Schema.org
添加 Google Analytics 统计代码
安装 nuxt-gtag：npx nuxi@latest module add gtag
nuxt.config.ts 添加配置：
export default defineNuxtConfig({ modules: ['nuxt-gtag'], gtag: { id: 'G-XXXXXXXXXX' } }) 或者在环境变量中添加 NUXT_PUBLIC_GTAG_ID ：
NUXT_PUBLIC_GTAG_ID = G-XXXXXXXXXX
添加 Microsoft Clarity 统计代码
安装 nuxt-clarity-analytics：pnpm add -D nuxt-clarity-analytics nuxt.config.ts 添加依赖：
export default defineNuxtConfig({ modules: [ 'nuxt-clarity-analytics' ] }) 在环境变量中添加：
MICROSOFT_CLARITY_ID = 'clarity ID'
添加 Umami 统计代码
安装 nuxt-umami：pnpm add nuxt-umami nuxt.config.ts 添加配置：
defineNuxtConfig({ extends: ['github:ijkml/nuxt-umami'] }); 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 } });
跟踪事件
<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>
详细文档：nuxt-umami
总结
Nuxt3 集成了很多 SEO Modules，使开发者能够更加高效便捷地做好搜索引擎方面的优化。
好了，这篇文章就到这了，希望对你有所帮助！
相关文章
前端SEO的知识，你get到了吗
seo是前端工程师需要掌握的一些知识，但是现在都是前后端分离开发，客户端渲染，而国内百度的搜索引擎又不太能打，因此，对这方面没怎么深入，后来因为学习了一些服务端渲染框架next/nuxt，才重新进行了一些了解
网站改版如何使用SEO技术
从简单的表现型网站到市场营销型网站，从市场营销型网站到建立移动网站对于现在运营了10年以上的网站来说，最担心的是每次升级改版、年代变化、技术日新月异、网站运营一段时间后需要改版，但是在网站升级改版的过程中，如何使用SEO技术防止这种情况
SEO入门教程
大家口中的SEO（Search Engine Optimization），中文翻译为“搜索引擎优化”
SEO基础入门教程之SEO优化的六个步骤！
SEO并不是简单的几个秘诀或几个建议，而是一项需要足够耐心和细致的脑力劳动。大体上，SEO包括六个步骤： 1、关键词分析（也叫关键词定位） 这是进行SEO最重要的一环，关键词分析包括：关键词关搜索分析、竞争对手分析、关键词与网站相关性分析、关键词布置、关键词排名预测。 2、网站架构分析 网站结构符合搜索引擎的爬虫喜好则有利于SEO。网站架构分析包括：剔除网站架构不良设计、实现树状目录结构、网站导航与链接优化。
目录
添加 favicon 图标和 TDK（标题、描述、关键词） 安装 @nuxtjs/seo 模块 Robots Sitemap OG Image Schema.org 添加 Google Analytics 统计代码 添加 Microsoft Clarity 统计代码 添加 Umami 统计代码 总结相关知识
SEO蜘蛛池如何养护——酷像SEO
如何诊断网站SEO优化过度？避免网站优化的方法
企业SEO网站优化的步骤分析
鲜花的seo策略 鲜花SEO策略：绽放网站流量的秘诀
SEO艺术阅读笔记
2019亚马逊SEO全指南，搞定listing排名和提升销量
外贸网站推广谷歌SEO排名，水到底有多深？
WordPress外贸网站Google搜索优化排名【防忽悠必读】
2023年9项有趣的Google专利及其对SEO的意义
网络营销实战密码
网址: Nuxt3 实战 (十二)：SEO 搜索引擎优化指南 https://m.huajiangbk.com/newsview830247.html
| 上一篇: Google搜索引擎优化(SEO |
下一篇: 搜索引擎优化 (SEO) |
