nuxt 服务器渲染动态设置 title和seo关键字的操作

使用如下钩子即可，但是前提条件是 没有默认配置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="description" content="">

<meta data-n-head="1" data-hid="keywords" name="keywords" content="">

第一步 在router里面index.js文件夹中

routes: [
  {
   path: '/',
   name: 'main',
   component: Main,
   meta: {
    title: '首页title内容',
    content:{
     keywords:'这里是第一个keywords',
     description:'这里是第一个description',
    },

   }
  },
  {
   path: '/trueBag',
   name: 'trueBag',
   component: trueBag,
   meta: {
   title: 'trueBag页面的title内容',
    content:{
    keywords:'这里是第二个keywords',
     description:'这里是第二个description',
    },
   }
  },
  ]

第二步 在main.js里面设置，路由发生变化修改页面meta

前提是已经导入了router

// 现在可以直接复制，不需要改什么东西
// 当然如果你想添加的meta,不仅仅只有keywords 和 description的时候，
// 自己可以举一反三 :
// setAttribute 后面就是设置它的值前提是要和router里面的content是相对应的
//要不然是获取不到的
//document.querySelector(‘meta[name=“description”]').setAttribute(‘content', to.meta.content.description)

router.beforeEach((to, from, next) => {
 /* 路由发生变化修改页面meta */
 console.log(to.meta.content)
 if(to.meta.content){
  let head = document.getElementsByTagName('head');
  let meta = document.createElement('meta');
  document.querySelector('meta[name="keywords"]').setAttribute('content', to.meta.content.keywords)
  document.querySelector('meta[name="description"]').setAttribute('content', to.meta.content.description)
  meta.content = to.meta.content;
  head[0].appendChild(meta)
 }
 // /* 路由发生变化修改页面title */
 if (to.meta.title) {
  document.title = to.meta.title;
 }
 next()
});

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

以上这篇nuxt 服务器渲染动态设置 title和seo关键字的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • nuxt 每个页面head标签内容设置方式

    导读 在前面几节课程中,我们已经完成对首页,jokes查询页,About页面的开发,接下来,我们来看一下每个页面的head标签 内容,我们会发现这三个页面的标签一致,而且和nuxt.config.js配置文件的head配置保持一致: 所以我们需要对这三个页面单独做一个head,更加方便于SEO优化,搜索引擎的爬取: 好,我们打开index.vue,编辑如下: head(){ return { title: 'jokes home page', meta: [{ hid: "description

  • nuxt 页面路由配置,主页轮播组件开发操作

    在上一个章节内容中,我们开发了AppHeader公共顶部菜单导航栏组件,本章节呢,我们根据菜单导航的路由导航,来配置我们的 page页面, 去到pages目录,我们需要创建3个[nuxt_link_name].vue页面文件,用来匹配路由导航需要加载的页面: 好,我们进入命令行,来创建页面文件, 1.windows 系统下可以使用如下命令: for /r %v in ( index.vue , jokes.vue, about.vue ) do type null > %v 2.linux/ma

  • Nuxt pages下不同的页面对应layout下的页面布局操作

    有时候我们pages中不同的页面需要不同的个性化布局这时候layout就起作用了 layouts 根目录下的所有文件都属于个性化布局文件,可以在页面组件中利用 layout 属性来引用. pages文件下组件的layout属性值为layout文件下的所对应的布局组件的名称 请确保在布局文件里面增加 <nuxt/> 组件用于显示页面非布局内容. 举个例子 1.layouts/custom_layout.vue: <template> <div> <div class

  • 解决nuxt 自定义全局方法,全局属性,全局变量的问题

    注意 ,这个 在 asyncData 还是不能用的 ,在mounted等其他生命周期里面可以, asyncData 里因为获取不到this他在组件初始化前执行的,如果找到方法我会继续更新到下一篇博客 好现在说步骤,在plugins 文件夹里新增一个 commom.js名字你自己取 commom.js 测试代码 import Vue from 'vue' var comsys= { install(Vue){ Vue.prototype.comsys = { val:function(val){

  • nuxt.js写项目时增加错误提示页面操作

    为项目增加错误提示页面,比如后端接口没有数据或接口报错的时候,如果不增加错误提示页面的话,那接口报错的信息就会在页面中显示,这显然不利于用户体验. 实际操作过程中,可能因为各种原因无法显示正确的返回页面,比如本身这篇文章的id不存在,或者网络请求问题,这时候就需要一个错误展示页用来提示用户: nuxt.js官方也有错误提示页面的写法:传送门-> 官方错误提示页面的写法 此项目中的错误提示页面是放在layouts目录中: layouts中的error.vue页面内容为: <template>

  • nuxt引入组件和公共样式的操作

    1,引入组件 在components目录创建组件,在页面中引入组件 例如引入公共导航栏 创建组件components/Nav.vue 引入组件layouts/default.vue 2,引入公共样式 assets/css/common.css 在nuxt.config.js中引入 若引入less或者sass: 补充知识:在nuxt项目中使用component组件 编写组件页面 1.在components下新建一个新建组件页面,如下所示 2.新建完成之后初始页面的代码如下所示: 3.下面从elem

  • nuxt 实现在其它js文件中使用store的方式

    前言 在新建的js文件中想用store里面的数据,比如token想在封装的axios里面,请求头里面去使用,亦或者通过app的JS接口获取token并存储在store里面. 我们都知道如何在vue中如何使用. 代码 /* * @Description: * @Author: lxc * @Date: 2019-07-02 16:14:07 * @LastEditTime: 2019-08-14 16:08:19 * @LastEditors: lxc */ // 导出 store 的地方 imp

  • nuxt 服务器渲染动态设置 title和seo关键字的操作

    使用如下钩子即可,但是前提条件是 没有默认配置head的title asyncData ({ app }, callback) { app.head.title = 'new title' callback(null, {}) }, 补充知识:vue 每个页面动态切换title keywords description (seo的设置) 最近接触到需要使用到Seo,要求每个页面拥有不同的title,keywords,description !!!在这里先添加一步: html文件添加 <meta

  • React项目动态设置title标题的方法示例

    在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不用页面时,title是不会动态变化的.那么怎么让title随着路由的切换动态变化呢? 1.在定义路由时增加title属性. { path: "/regularinvestment", component: Loadable({ loader: () => import('./../../business/Regularinvestment/index'), loading: Page

  • vue项目动态设置页面title及是否缓存页面的问题

    vue项目动态设置页面title及是否缓存页面的问题

    跟传统的页面可以在每个页面分别设置填写对应的页面title,but,vue是单页面应用项目,想设置页面对应的title就不能跟传统方式一样了. 下载 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 在router的index.js的路由中加上参数 { path: '/login', comp

  • vue-router动态设置页面title的实例讲解

    由于用Vue框架开发的应用是SPA(单页面应用),采用的是路由的形式,没有所谓的页面,所以想让网页的标题随着路由的改变而改变,可以使用document.title = ×××来改变网页标题. 但是在IOS APP里这种方式不起作用,原因是在IOS webview中网页标题只加载一次,动态改变是无效的. 解决方案是在路由切换完成之后,静默加载一个空的iframe动态设置title util.js中定义setMetaTitle()函数 function setMetaTitle(title) { d

  • Vue服务器渲染Nuxt学习笔记

    Vue服务器渲染Nuxt学习笔记

    关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清晰明了的很少.所以想写篇文章学习下SSR,希望能够帮助大家快速理解Vue SSR. 什么是SSR? SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传给浏览器. 优点: SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容.

  • Angular设置title信息解决SEO方面存在问题

    Angular设置title信息解决SEO方面存在问题

    Javascript框架在处理seo方面存在问题,因为爬虫在检索seo信息的时候会读不了js给其赋的值,导致搜索引擎收录不了或者收录了无效的信息,比如收录的可能是title={{title}}这样的,下面先说如何在路由跳转时修改页面的seo信息,现在spa跳转一般用route-ui了,就以这个为基础讲解,在app.js配置项state中加入title信息,如下:data:{ pageTitle:'user title'} .state('index.user', { url: '/user',

  • vue动态设置页面title的方法实例

    本文主要介绍了Vue动态修改title的方法,需要的朋友可以参考学习,方法如下: 1.通过自定义指令去修改(单个修改比较好) //1.在main.js 页面里添加自定义指令 Vue.directive('title', {//单个修改标题 inserted: function (el, binding) { document.title = el.dataset.title } }) //2.在需要修改的页面里添加v-title 指令 <div v-title data-title="我是

  • 从零开始最小实现react服务器渲染详解

    从零开始最小实现react服务器渲染详解

    前言 最近在写 koa 的时候想到,如果我部分代码提供api,部分代码支持ssr,那我应该如何写呢?(不想拆成 2个服务的情况下) 而且最近写的项目里面也用过一些服务端渲染,如nuxt,自己也搭过next的项目,确实开发体验都非常友好,但是友好归友好,具体又是如何实现的呢,诸位有没有考虑过? 本着求真务实的折腾态度,选了react作为研究对象(主要是vue写的有点多,恶心了),那下面就简单就以最小成本写一个react的服务端渲染 demo 用到的技术栈 react 16 + webpack3 +

  • 详解超简单的react服务器渲染(ssr)入坑指南

    前言 本文是基于react ssr的入门教程,在实际项目中使用还需要做更多的配置和优化,比较适合第一次尝试react ssr的小伙伴们.技术涉及到 koa2 + react,案例使用create-react-app创建 SSR 介绍 Server Slide Rendering,缩写为 ssr 即服务器端渲染,这个要从SEO说起,目前react单页应用HTML代码是下面这样的 <!DOCTYPE html> <html lang="en"> <head&g

  • LayUI动态设置checkbox不显示的解决方法

    1.页面引入layui.js和layui.css <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手机银行权限配置</title> <link type="text/css" rel="stylesheet" href="common/layui/css/layui.css" r

随机推荐