1

我正在使用Ruby 2.5.1、Rails 6.0.3.4 和Vue 2.6。

在铁轨上，

应用程序.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>This is my back-end title</title>
    <%= csrf_meta_tags %>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <%= csp_meta_tag %>
    <%= stylesheet_pack_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

对于 Vue：

javascript/packs/application.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import App from '../app.vue'
import router from '../routes'
import index from '../stores'
import Meta from 'vue-meta'

Vue.use(Meta)
Vue.use(Vuex)

let token = document.getElementsByName('csrf-token')[0].getAttribute('content')
let meta = document.createElement('meta')
document.getElementsByTagName('head')[0].appendChild(meta)
axios.defaults.headers.common['X-CSRF-Token'] = token
axios.defaults.headers.common['Accept'] = 'application/json'
document.addEventListener('DOMContentLoaded', () => {
  const el = document.body.appendChild(document.createElement('hello'))
  const app = new Vue({
    el,
    router,
    store: index,
    render: h => h(App),
  })
  console.log(app)
})

javascript/routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'
.....
import AboutUs from './components/LandingPage/Footer/AboutUs.vue'
Vue.use(VueRouter)
export default new VueRouter({
  scrollBehavior() {
    return {x: 0, y: 0}
  },

  routes: [
    {
      path: '/AboutUs',
      name: 'AboutUs',
      component: AboutUs,
    },
    ...
  ]
)}

关于我们.vue

<template>
  <div>
    <p> I am about us page </p>
  </div>
</template>

<script>
export default {
  metaInfo() {
    return {
      title: `About Us`,
      titleTemplate: '%s - test.com',
      meta: [
        {name: 'keywords', content: this.keywords},
        {name: 'description', content: this.description, vmid: 'description'},
        {property: 'og:title', content: 'About Us',
         template: (chunk) => `${chunk} - test.com`, vmid: 'og:title'},
        {property: 'og:description', content: this.description,
          template: (chunk) => `${chunk}`, vmid: 'og:description'},
      ],
    }
  },
  computed: {
    description() {
      return 'This is about us description' 
    },
    keywords() {
      return 'apple, ball, cat'
    },
  },
}
</script>

当我检查时，我可以看到：

<html>
  <head>
    <title>About Us - test.com</title>`
    <meta name="csrf-param" content="authenticity_token">
    <meta name="csrf-token" content="dLn5c24Bcel/KwzvAwDSqBhG9EFmt6qwsah8yyLo1pUEToI2PpLLYF/cg4sfguF7DtXhYE0LKie9WJMmjNVdxQ==">
    <style> 
      ......
    </style>
    <meta>
    <meta data-vue-meta="1" name="keywords" content= "apple, ball, cat">
    <meta data-vue-meta="1" name="description" content="This is about us description" data- vmid="description">
    <meta data-vue-meta="1" property="og:title" content="About Us - test.com" data- vmid="og:title">
  </head>
</html>

在我的本地服务器上，我可以看到来自 vue 的更新标签。

但是当我们去生产或在https://developers.facebook.com/tools/debug/

http://test.com/#/AboutUs

I am getting og:title from backend which is:

这是我的后端标题

和警告如：

推断属性

'og:image' 属性应该明确提供，即使可以从其他标签中推断出一个值。

缺少属性

缺少以下必需属性：og:url、og:type、og:title、og:image、og:description、fb:app_id

4

0 回答 0