nuxt如何实现服务器渲染并动态设置标题和seo关键字 - 行业资讯

　　介绍

nuxt如何实现服务器渲染并动态设置标题和seo关键字?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

使用如下钩子即可,但是前提条件是没有默认配置头的标题

 asyncData({应用},回调){
　　app.head。title=靶卤晏? 39;
　　回调(null, {})
　　},

<强> vue每个页面动态切换标题关键词描述(seo的设置)

最近接触到需要使用到seo,要求每个页面拥有不同的标题,关键词,描述

! ! !在这里先添加一步:

<强> html文件添加

& lt;元data-n-head=?”;data-hid=癲escription"name=癲escription"内容=?“在

& lt;元data-n-head=?”;data-hid=発eywords"name=発eywords"内容=?“在

<强>第一步在路由器里面指数。js文件夹中

路线:(
　　{
　　路径:& # 39;/& # 39;
　　名称:& # 39;主要# 39;
　　主要组件:,
　　元:{
　　标题:& # 39;首页标题内容& # 39;,
　　内容:{
　　关键词:& # 39;这里是第一个关键字# 39;,
　　描述:& # 39;这里是第一个描述,,
　　},
　　
　　}
　　},
　　{
　　路径:& # 39;/trueBag& # 39;
　　名称:& # 39;trueBag& # 39;
　　组件:trueBag,
　　元:{
　　标题:& # 39;trueBag页面的标题内容& # 39;,
　　内容:{
　　关键词:& # 39;这里是第二个关键字# 39;,
　　描述:& # 39;这里是第二个描述# 39;,
　　},
　　}
　　},
　　)

<强>第二步在主要。js里面设置,路由发生变化修改页面元

前提是已经导入了路由器

//现在可以直接复制,不需要改什么东西//当然如果你想添加的元,不仅仅只有关键词和描述的时候,//自己可以举一反三://setAttribute后面就是设置它的值前提是要和路由器里面的内容是相对应的//要不然是获取不到的//document.querySelector(“元[name="描述"]& # 39;).setAttribute(“内容# 39;to.meta.content.description)
　　
　　路由器。beforeEach(下),从=比;{/*路由发生变化修改页面元*/console.log (to.meta.content)
　　如果(to.meta.content) {
　　让头=document.getElementsByTagName(& # 39;头# 39;);
　　让元=document.createElement(& # 39;元# 39;);
　　document.querySelector(& # 39;元[name=発eywords"] & # 39;) .setAttribute(& # 39;内容# 39;,to.meta.content.keywords)
　　document.querySelector(& # 39;元[name=癲escription"] & # 39;) .setAttribute(& # 39;内容# 39;,to.meta.content.description)
　　元。内容=to.meta.content;
　　头[0].appendChild(元)
　　}///*路由发生变化修改页面标题*/如果(to.meta.title) {
　　文档。标题=to.meta.title;
　　}
　　next ()
　　});

nuxt如何实现服务器渲染并动态设置标题和seo关键字

具体是否成功可以f12查看,如果没有出来,一步一步打印一下,看自己是哪里出错。

关于nuxt如何实现服务器渲染并动态设置标题和seo关键字问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。