如何在 nuxt.js (vue.js) 中配置动态 og 标签？

关键词：

【中文标题】如何在 nuxt.js (vue.js) 中配置动态 og 标签？【英文标题】：How do I configure dynamic og tags in nuxt.js (vue.js)? 【发布时间】：2018-05-31 12:59:18 【问题描述】：

我使用 vue init nuxt / express myprojectstart 启动了 nuxt 应用程序。

这是我的目录。

page
|- _project.vue
|- project
  | - index.vue

_project.vue的配置

export default 
  head () 
    return 
      title: this.project.title,
      meta: [
        property: 'fb:app_id', content: '12873892173892',
        property: 'og:title', content: this.project.title,
        property: 'og:image', content: this.project.image,
      ],
    
  
,
async asyncData (app, params, error) 
  const project = await app. $ axios. $ get (`/ project`)
    return 
      project: project.project,
    
  

但是，如果您按 Facebook 分享按钮，则不会出现所需的标题和图像。

我认为这是服务器端渲染问题。但我无法解决这个问题。

感谢您的帮助。

【问题讨论】：

可能这有帮助：github.com/jvandemo/angular-update-meta/issues/13 或这个：***.com/questions/17127980/…，不是 nuxtjs 特定但类似的问题。 【参考方案1】：

此代码会覆盖 head 中的主要元标记。因此，如果您需要共享单篇文章或单页并需要覆盖 og 标签，这就是它的工作方式。

 meta: [
      
        'property':  'og:title',
        'content':  `$this.news.title`,
      ,
      
        'property':  'og:description',
        'content': `$this.project.content`.replace(/<\/?[^>]+(>|$)/g, ""),
      ,
      
        'property':  'og:image',
        'content': `$this.project.image[0]`
      
    ],

【讨论】：

这个答案可以通过解释它的作用以及它如何解决问题来改进。 @CtrlS 这段代码覆盖了head中的主要meta标签。所以如果需要分享一篇文章或单个页面并且需要覆盖og标签，这就是它应该工作的方式。 这应该包含在您的答案中！ :) 这不起作用，所有标签在 facebook 调试器工具上都不起作用【参考方案2】：

要使用 Nuxt.js 而不是使用 'property'，您需要使用 'name' 元属性。此外，您可以添加 'hid' 属性来为您的标签设置唯一标识符，以防您有使用相同标签的子组件。

所以，对于你的情况：

  meta: [
     hid: 'fb:app_id', name: 'fb:app_id', content: '12873892173892' ,
     hid: 'og:title', name: 'og:title', content: this.project.title ,
     hid: 'og:image', name: 'og:image', content: this.project.image ,
  ],

【讨论】：

您的答案中有未封闭的 cmets 大多数网站不会选择属性name=""下的数据。根据 opengraph 文档，您必须使用 property="" 属性。不幸的是，您在回答中建议的内容无效。为了解决这个问题，他只需要添加hid 属性。

如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading

】如何在Nuxt.js(Vue.js)中使用vue-infinite-loading【英文标题】：Howtousevue-infinite-loadinginNuxt.js(Vue.js)【发布时间】：2017-10-2807:01:42【问题描述】：我在Nuxt.js(Vue.js)中开发网络应用程序首先，vueinitnuxt/expressMyProject~page/help.vue<template><... 查看详情

如何在 Vue.js/Nuxt.js 中为 RepositoryFactory 编写测试

】如何在Vue.js/Nuxt.js中为RepositoryFactory编写测试【英文标题】：HowtowritetestforRepositoryFactoryinVue.js/Nuxt.js【发布时间】：2022-01-2106:03:34【问题描述】：夏天我已经为Vue.js/Nuxt.js应用程序中的API连接实现了RepositoryFactory模式。https://medium... 查看详情

如何在 nuxt.js 中编写全局路由器功能

】如何在nuxt.js中编写全局路由器功能【英文标题】：howtowriteglobalrouter-functioninnuxt.js【发布时间】：2018-01-1213:11:55【问题描述】：我正在将Vue.js与Nuxt.js一起使用，但路由器的功能出现问题。在纯Vue中，我可以这样写main.js：valroute... 查看详情

Vue.js 和 Nuxt.js

...麻烦，因为整个nuxt的工作方式之间的可见性为0%。问题：如何注册全局组件。如何在客户端行为的某些用户上切换nuxt中的布局。在哪里编写vue.use(somep 查看详情

如何在 Nuxt.js 中使用 CKEditor - 未定义窗口错误

】如何在Nuxt.js中使用CKEditor-未定义窗口错误【英文标题】：HowtouseCKEditorwithNuxt.js-windowisnotdefinederror【发布时间】：2020-08-1503:00:36【问题描述】：在Vue.js中，这是我使用的设置。在Nuxt.js中，我收到“未定义窗口”错误。根据我的... 查看详情

如何测试 nuxt.js asyncData 并获取钩子

】如何测试nuxt.jsasyncData并获取钩子【英文标题】：Howtotestnuxt.jsasyncDataandfetchhooks【发布时间】：2020-12-1715:34:59【问题描述】：我一直在尝试测试使用nuxt（asyncData和fetch挂钩）的文件，我在测试vue.js正常生命周期时没有问题，但我... 查看详情

vue-awesome-swiper使用教程

...织，预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。（开箱即用）官方地址：https://zh.nuxtjs.org/guideⅡ.Nuxt安装使用Ⅲ.Nuxt模板目录结构分析重点关注：components、layouts、pages、plugins、nust.config.js目录及文件Ⅳ.Nuxt路由e... 查看详情

使用 nuxt-mail 在 Nuxt.js 中发送邮件

】使用nuxt-mail在Nuxt.js中发送邮件【英文标题】：SendingmailinNuxt.jswithnuxt-mail【发布时间】：2021-07-1011:05:47【问题描述】：我是Nuxt.js/Vue.js的新手，所以这里有一些新手问题：D我在从Nuxt.js应用程序中的联系人发送邮件时遇到问题。... 查看详情

(Nuxt.js/Vue.js) - 脚本只运行一次，更改路由/刷新页面后停止运行

】(Nuxt.js/Vue.js)-脚本只运行一次，更改路由/刷新页面后停止运行【英文标题】：(Nuxt.js/Vue.js)-Scriptonlyworksonce,stopsworkingafterchangingroute/refreshingthepage【发布时间】：2019-08-1609:51:21【问题描述】：我正在将我的项目网站“转移”到Vue.j... 查看详情

如何在 nuxt.js 上手动触发路由？

】如何在nuxt.js上手动触发路由？【英文标题】：Howtomanuallytriggerroutingonnuxt.js?【发布时间】：2021-07-2623:41:01【问题描述】：我想在回调中登录后手动导航到主页。methods:asyncuserLogin()varsession_url="/api/v1/authenticate";axios.post(session_url,thi... 查看详情

nuxt实践

...js框架读取该目录下所有的.vue文件并自动生成对应的路由配置。plugins用于组织那些需要在根vue.js应用实例化之前需要运行的Jav 查看详情

使用 nuxt.js 和 vue.js 在 <template> 标记内加载脚本

】使用nuxt.js和vue.js在<template>标记内加载脚本【英文标题】：Loadscriptinsidethe<template>tagusingnuxt.jsandvue.js【发布时间】：2018-05-0717:29:21【问题描述】：我正在使用nuxt.js（基于vue.js）构建自定义网站，我需要使用合作伙伴提... 查看详情

如何在 Vue.js 中使用 rowspan 将指针事件应用于简单表？

】如何在Vue.js中使用rowspan将指针事件应用于简单表？【英文标题】：Howtoapplypointer-eventstosimple-tableusingrowspaninVue.js?【发布时间】：2021-02-1618:32:45【问题描述】：我在Vuetify.js框架中使用v-simple-table作为Nuxt.js制作了表格。当我点击... 查看详情

nuxt的介绍以及入门(代码片段)

1.Nuxt.js服务器端渲染学习目标了解Nuxt.js的作用掌握Nuxt.js中的路由掌握layouts、pages以及components的区别能够在Nuxt.js项目中使用element-ui掌握Nuxt.js中异步获取数据的方式完成豆瓣电影小案例掌握SEO的优化1.1Nuxt.js入门1.1.1什么是Nuxt.jsVu... 查看详情

如何在 Nuxt 中使路由区分大小写

】如何在Nuxt中使路由区分大小写【英文标题】：HowtomakeroutescasesensitiveinNuxt【发布时间】：2019-12-2017:32:18【问题描述】：我使用nuxt.js+vue.js。我需要创建路由器的区分大小写。我发现了以下属性：caseSensitive。我正在尝试将它放入n... 查看详情

Vue.js 和 Nuxt.js 中的 Firebase 存储 CORS 错误

】Vue.js和Nuxt.js中的Firebase存储CORS错误【英文标题】：FirebaseStorageCORSerrorinVue.jsandNuxt.js【发布时间】：2021-12-3020:32:31【问题描述】：我正在尝试从我的Web应用程序(Vue.js+Nuxt.js)下载存储在firebase-storage上的.pdf但是出现了这个错误访... 查看详情

基于vue.js的ssr技术—nuxt.js

为什么要使用Nuxt.jsNuxt基于一个强大的模块化架构。你可以从50多个模块中进行选择，让你的开发变得更快、更简单。对PWA的支持、添加谷歌分析到你的网页或生成网站地图，这些功能都无需重新发明轮子来获得。Nuxt.js默认会优... 查看详情

当 nuxt.js (vue.js) 中的路由更改时，Facebook 分享按钮消失

】当nuxt.js(vue.js)中的路由更改时，Facebook分享按钮消失【英文标题】：Facebooksharebuttondisappearwhenroutechangedinnuxt.js(vue.js)【发布时间】：2021-11-1913:01:57【问题描述】：在我的nuxt.js("nuxt":"^2.15.7")网络应用程序中，我正在使用fullcodeexampl... 查看详情