seo设置 nuxt3

使用nuxt3就是为了seo,在nuxt3里可以直接使用useSeoMeta来设置tdk信息

useSeoMeta({
    title: `这里是标题`,// t,不要太长,二三十字左右吧
    description: `这里是描述`,// d,建议150字左右,太多的话搜索引擎也没法给你全展示出来
    ogTitle: `这里是标题`, // 分享标题
    ogDescription: `这里是描述`,// 分享描述,建议150字左右,太多的话搜索引擎也没法给你全展示出来
    keywords: `关键词1,关键词2,关键词3`, // k,推荐3-5个
    ogImage: 'aa.png', // 分享小图
    twitterTitle: `这里是标题`, // twitter分享标题
    twitterDescription: `这里是描述`,//twitter分享描述
    twitterCreator: '摸鱼社',// twitter分享创作者
    twitterImage: 'aa.png', // twitter分享小图
  })

值得注意的一点是,tdk信息一定要在服务端完成,如果到了客户端才去更新,就没有意义了。

### Nuxt 3 中的 SEO 配置指南 在 Nuxt 3 中,SEO配置主要通过 `nuxt.config.ts` 文件中的 `meta` 和 `runtimeConfig` 属性来完成。以下是关于如何设置页面元数据以及优化 SEO 的详细说明。 #### 页面 Meta 数据的配置 为了确保每个页面都有合适的 meta 标签用于搜索引擎优化 (SEO),可以利用 `<head>` 组件或者 Vue 文件内的 `definePageMeta()` 方法[^1]。例如: ```vue <script setup> useHead({ title: &#39;文章标题&#39;, meta: [ { name: &#39;description&#39;, content: &#39;这是文章的描述&#39; }, { property: &#39;og:title&#39;, content: &#39;文章标题&#39; }, { property: &#39;og:description&#39;, content: &#39;这是文章的描述&#39; }, { property: &#39;og:image&#39;, content: &#39;/path/to/image.jpg&#39; } ] }) </script> <template> <div> <!-- 文章内容 --> </div> </template> ``` 上述代码展示了如何为单个页面设置特定的 Open Graph 和常规 meta 标签。 #### 动态路由与多参数支持下的 SEO 考量 对于动态路由和带有多个参数的情况,在 Nuxt 3 中可以通过扩展默认路由规则 (`extendRoutes`) 来实现更灵活的 URL 结构[^2]。这不仅有助于用户体验,也能够提升搜索引擎抓取的效果。下面是一个简单的例子展示如何创建 `/category/:categoryId/product/:productId` 这样的嵌套结构: ```javascript // nuxt.config.ts export default defineNuxtConfig({ router: { extendRoutes(routes, resolve) { routes.push({ path: &#39;/category/:categoryId/product/:productId&#39;, component: resolve(__dirname, &#39;pages/category/_categoryId/product/_productId.vue&#39;) }) } } }) ``` 此方法允许开发者完全控制路由行为而不依赖于 `_id.vue` 自动匹配机制。 #### 使用 Headless CMS 或 API 获取动态内容并更新 Meta Tags 如果网站的内容是从外部来源获取,则可以在组件加载时调用异步函数以填充必要的头部信息。比如结合 Axios 插件请求远程接口返回的文章详情,并同步调整当前页的 SEO 设置: ```typescript async function fetchAndSetMetadata() { const articleResponse = await $fetch(&#39;/api/articles/&#39; + useRoute().params.articleId); useHead({ title: articleResponse.title, meta: [{name:&#39;description&#39;,content:articleResponse.excerpt}] }); } onMounted(() => fetchAndSetMetadata()); ``` 以上片段演示了基于实际业务逻辑动态改变网页标题及摘要的方法[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值