[英]Issue with Open Graph tags and Nuxt.js (prod?)
I integrated OpenGraph tags into my Nuxt.js app, following the instructions from their SEO documentation at https://nuxtjs.org/examples/seo-twitter-og我按照https://nuxtjs.org/examples/seo-twitter-og 上的 SEO 文档中的说明将 OpenGraph 标签集成到我的 Nuxt.js 应用程序中
I'm setting tags from a child component using the SocialHead
component.我正在使用SocialHead
组件从子组件设置标签。 The contents of this component are:该组件的内容是:
<template>
<span v-if="false" />
</template>
<script>
export default {
props: {
title: {
type: String,
default: '',
},
description: {
type: String,
default: '',
},
url: {
type: String,
default: '',
},
image: {
type: String,
default: '/images/hero/brain-og.png',
},
},
head() {
return {
title: this.title,
meta: [
{
hid: 'og:title',
name: 'og:title',
content: this.title.replace(' - M.academy', ''),
},
{
hid: 'description',
name: 'description',
content: this.description,
},
{
hid: 'og:description',
property: 'og:description',
content: this.description,
},
{
hid: 'og:url',
property: 'og:url',
content: process.env.baseUrl + this.url,
},
{
hid: 'og:type',
property: 'og:type',
content: 'website',
},
{
hid: 'og:image',
property: 'og:image',
content: process.env.baseUrl + this.image,
},
{
hid: 'og:image:secure_url',
property: 'og:image:secure_url',
content: process.env.baseUrl + this.image,
},
{
hid: 'og:image:alt',
property: 'og:image:alt',
content: this.description,
},
{
hid: 'twitter:title',
name: 'twitter:title',
content: this.title.replace(' - M.academy', ''),
},
{
hid: 'twitter:card',
name: 'twitter:card',
content: 'summary_large_image',
},
{
hid: 'twitter:image',
name: 'twitter:image',
content: process.env.baseUrl + this.image,
},
{
hid: 'twitter:description',
name: 'twitter:description',
content: this.description,
},
{
hid: 'twitter:site',
name: 'twitter:site',
content: '@mdotacademy',
},
{
hid: 'twitter:creator',
name: 'twitter:creator',
content: '@markshust',
},
],
}
},
}
</script>
I'm using Google Chrome's "Open Graph Preview" extension and locally, they all appear to work and preview correctly:我在本地使用 Google Chrome 的“Open Graph Preview”扩展程序,它们似乎都能正常工作和预览:
However, when I deploy these updates to production and check again, all of the Open Graph preview tools I use do not seem to find the tags:但是,当我将这些更新部署到生产并再次检查时,我使用的所有 Open Graph 预览工具似乎都找不到标签:
I have also tested LinkedIn's & Twitter's open graph preview tools at:我还在以下位置测试了 LinkedIn 和 Twitter 的开放图形预览工具:
I'm a bit stuck, because the tags appear when viewing the page source, and also using a tool like https://www.opengraph.xyz/ -- but not using the actual LinkedIn & Twitter verification tools.我有点卡住了,因为在查看页面源代码时会出现标签,并且还使用了https://www.opengraph.xyz/ 之类的工具——但没有使用实际的 LinkedIn 和 Twitter 验证工具。
The page I tested out is https://m.academy/courses/build-12-factor-nodejs-app-docker/我测试的页面是https://m.academy/courses/build-12-factor-nodejs-app-docker/
最后,摆脱prerender.io
足以解决 SEO 问题,因为配置已正确完成。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.