Nuxt - 每个页面单独设置 SEO 相关标签及网页标题、图标等（页面配置 head）

已于 2024-07-29 16:53:31 修改
阅读量3.1k 收藏 7
点赞数 5
分类专栏： + Vue + Vue3 文章标签： javascript html 前端 nuxt.js SEO
于 2022-06-28 11:34:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/125499071
版权
+ Vue 同时被 3 个专栏收录
226 篇文章 1297 订阅 ¥9.90 ¥99.00
订阅专栏
+ Vue3
218 篇文章 1256 订阅 ¥9.90 ¥99.00
订阅专栏
+ Nuxt
42 篇文章 316 订阅 ¥9.90 ¥99.00
订阅专栏
本文介绍了如何在Nuxt 2和3中为每个页面单独设置SEO相关标签，如网页标题、图标等。通过利用Nuxt提供的页面级钩子函数`head()`，开发者可以在每个页面组件中自定义SEO信息，确保不同页面的SEO配置独立且精确。
摘要由CSDN通过智能技术生成

前言

您一定知道，要想配置一些 SEO 相关的标签，就要在项目根目录下 nuxt.config.js → head 字段进行。

但是nuxt.config.js 文件中所配置的是全局的，也就是说所有都有页面都会生效。

在 nuxt2 / nuxt3 网站网页开发中，详细实现单独设置每个页面的 SEO 信息。

在这里插入图片描述

解决方案

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
专栏目录
订阅专栏
Nuxt3 - 超详细动态设置网页标题/描述/关键字/图标等 SEO 信息，先调用接口获取数据后，再给页面设置标题、描述说明、关键字（接口服务端拿到数据后，然后给页面设置 meta 相关标签和数据）
王佳斌
10-26 3589
nuxt3.js框架，nuxt3页面seo，nuxt3设置页面seo标题和关键字，nuxt3动态更改meta信息（关键词、标题、描述），nuxt3设置动态网页图标，如何先调用接口获取到数据再设置网页标题等seo，nuxt3调用接口后动态设置网页标题描述关键字meta，Nuxt3的SEO，nuxt中head(meta)设置教程，nuxt3如何设置网页的图标/标题和描述关键字，如何在Nuxt3中设置网站favicon.ico图标，nuxt3用接口返回的数据当标题和关键字等，nuxt3框架动态设置title、ke
nuxt 服务器渲染动态设置 title和seo关键字的操作
01-21
使用如下钩子即可，但是前提条件是 没有默认配置head的title asyncData ({ app }, callback) { app.head.title = ‘new title' callback(null, {}) }, 补充知识：vue 每个页面动态切换title keywords description （seo的设置） 最近接触到需要使用到Seo,要求每个页面拥有不同的title,keywords,description ！！！在这里先添加一步： html文件添加 <meta data-n-head=”1″ data-hid=”description” name=”des
Nuxt3: SEO优化——抽取页面内部Style标签样式
最新发布
q1003675852的博客
08-01 590
本文记录Nuxt3: SEO优化——抽取页面内部Style标签样式的解决方案
Nuxt 菜鸟入门学习笔记七：SEO 和 Meta 设置
将PHP Web开发进行到底
09-28 1900
本文内容由 Nuxt 官网翻译而来，主要介绍了 Nuxt 的 SEO 以及头部设置。
用NUXT.JS,轻松搞定SEO!
qq_37957866的博客
08-23 1104
通过NUXT.JS快速开发需要seo的知识中心，新闻中心等内容分享平台。
Nuxt 每个页面单独设置head标签内容
你若盛开，清风自来
12-03 2632
知识储备（了解即可，可略过） 参考：官网 参考：https://www.jianshu.com/p/14ef958b0e8b 当前，SPA越来越无法满足业务对页面响应速度的要求。随着工程不断变大，打包文件不断增长，页面的整体刷新加载速度慢慢成为瓶颈。 越来越多的应用开始使用SSR来提高响应速度。 SSR是英文server side render的缩写，即服务端描画。 之前在SPA单页的时候，mouted元素部分，都是先去服务端拉取js脚本，然后客户端解析成html。而在SSR下，mouted部分是服务
Nuxt.js 里 添加 ＜head＞
FitnessSnail的博客
10-25 407
在 nuxt.config.js 里面。利用 mixin 全局混入。
Nuxtjs初学习
晟松的博客
02-21 1513
Nuxtjs初学习 怎么说啦，学这个主要是为了解决seo的问题，使用服务端渲染，给用户更好的体验 官网 一位大佬的简单教程 B站视频教程 注意上面的beforecreated和created两个钩子，这两个钩子既可以跑在服务端，也可以跑在客户端。有一个验证就是，使用console，服务端的会再终端里面打印出来，而客户端的会在浏览器的控制台打印出来 剩下的其他部分就是vue自己的其他生命周期钩子了，如mounted这些 在服务器端的钩子不能访问客户端的对象，如window对象，只能获取到服务器的上下文con
Nuxt.js小试牛刀—用SSR框架Nuxt.js+koa开发官网件
sinat_36253867的博客
11-08 485
简单说就是Vue的SEO化。Vue开发的SPA（单页应用）不利于搜索引擎的SEO优化，所以在开发需要搜索引擎提供流量的项目时就比较尴尬，对于公司官网、新闻、博客、电影、咨询等项目来说，Nuxt.js不仅可以带来巨大的 SEO 提升，而且可以做到服务端拼接好html后直接返回，首屏可以做到无需发起ajax、axios请求。
nuxt 每个页面head标签内容设置方式
01-18
导读 在前面几节课程中，我们已经完成对首页，jokes查询页，About页面的开发，接下来，我们来看一下每个页面的head标签 内容，我们会发现这三个页面的标签一致，而且和nuxt.config.js配置文件的head配置保持一致； 所以我们需要对这三个页面单独做一个head，更加方便于SEO优化，搜索引擎的爬取； 好，我们打开index.vue，编辑如下： head(){ return { title: 'jokes home page', meta: [{ hid: description, name: description, content: this
nuxt配置head,静态&动态
qq_36821038的博客
03-14 864
关于head信息内容，可以写死，也可以动态获取，写死就是在中head获取title，动态需要传参
单页面应用和服务端渲染-引入nuxt.js
benlalagang的博客
10-07 1311
单页面应用SPA和多页面服务端渲染SSR的特点 介绍 引入nuxt.js
动态修改服务器配置文件,nuxt 如何实现服务器渲染并动态设置 title和seo关键字...
weixin_42298225的博客
08-06 1170
nuxt 如何实现服务器渲染并动态设置 title和seo关键字发布时间：2020-11-06 15:01:09来源：亿速云阅读：133作者：Leahnuxt 如何实现服务器渲染并动态设置 title和seo关键字？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。使用如下钩子即可，但是前提条件是 没有默认配置head的titleasy...
【Nuxt】04 Nuxt2-SEO： sitemap.xml、seo优化、robots.txt
ColdCoder的博客
09-27 1503
在nuxt项目的static文件夹下，配置项目的静态文件，直接在static新建robots.txt即可，nuxt运行时会自动装配到根路由。注意生成sitemap依赖于@nuxtjs/sitemap，并且需要用axios进行请求，不要使用@nuxtjs/axios，不然会报错。
nuxt给当前页面配置head
LiangRZ
01-06 941
nuxt-link传递参数 页面里配置:
nuxt中设置默认的seo信息以及对指定路由界面的设置
wsfufua的博客
01-03 555
nuxt 设置全局的SEO信息以及指定界面的SEO信息设置
nuxt修改html中的head标签
weixin_49722066的博客
03-21 617
基于vue新建的nuxt是没有自带html文件的，在nuxt.config.js中可以修改。
Nuxt3中的常用seo标签
04-10 1196
Nuxt提供了和等组件让你在组件中方便的设置和更改你项目中的metadata。由于这些组件名与原生的HTML中的一些元素一样，所以你在template中使用时，一定要注意大写。和可以内部包含元标签(meta tags)。但对最终渲染成的HTML中的嵌套元标签没有什么影响。网页标题
nuxt3 - 超详细动态设置网页标题/描述/关键字/图标等 seo 信息,先调用接口获取数
11-23
在Nuxt3中，我们可以通过使用head标签来设置网页的标题、描述、关键字等信息，同时还可以设置网页的图标信息。通过这些设置，我们可以让网页在搜索引擎中展现出更加友好的信息，提高网页的曝光度和点击率。 总之，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值