问题描述
我使用的是 Ruby 2.5.1、Rails 6.0.3.4 和 Vue 2.6。
这里是导轨,
application.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,},...
]
)}
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',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,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
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)