我按照https://nuxtjs.org/examples/seo-twitter-og上的 SEO 文档中的说明将 OpenGraph 标签集成到我的 Nuxt.js 应用程序中
我正在使用该SocialHead
组件从子组件设置标签。该组件的内容是:
<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>
我在本地使用 Google Chrome 的“Open Graph Preview”扩展,它们似乎都可以正常工作和预览:
但是,当我将这些更新部署到生产环境并再次检查时,我使用的所有 Open Graph 预览工具似乎都找不到标签:
我还在以下位置测试了 LinkedIn 和 Twitter 的开放图形预览工具:
我有点卡住了,因为在查看页面源代码时会出现标签,并且还使用了https://www.opengraph.xyz/之类的工具——但没有使用实际的 LinkedIn 和 Twitter 验证工具。
我测试的页面是https://m.academy/courses/build-12-factor-nodejs-app-docker/