英文:
Nuxt open graph meta tags not working in netlify
问题
我有一个投资组合网站，直到三月份都运行正常，最近我尝试发布一篇新博客并检查了新博客的链接预览时，我得到的是在nuxt.config.js中提到的数据的元标签，而不是各个页面/文章的元标签。
这是我的nuxt配置文件：
export default {
target: 'static',
head: {
title: "Kamran Memon | Portfolio",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content:
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
},
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.png" },
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap",
},
],
},
}
在各个页面/文章中，我的元标签信息如下：
head() {
return {
title: 'About | Kamran Memon | Portfolio',
meta: [
{
hid: "description",
name: "description",
content:
"我是Kamran Memon，一名前端开发人员，主要使用Vue.js、Vuetify、Nuxt.js进行开发，并在金融科技和医疗保健行业工作过",
},
{
hid: 'author',
name: 'author',
content: 'Kamran Memon'
},
{
hid: "keywords",
name: "keywords",
content: "Kamran Memon"
},
//Open Graph
{ hid: "og-type", property: "og:type", content: "website" },
{
hid: "og-title",
property: "og:title",
content: "About | Kamran Memon | Portfolio",
},
{
hid: "og-desc",
property: "og:description",
content:
"我是Kamran Memon，一名前端开发人员，主要使用Vue.js、Vuetify、Nuxt.js进行开发，并在金融科技和医疗保健行业工作过",
},
{
hid: "og-image",
property: "og:image",
content: "https://codewithkamran.com/assets/card-image.png",
},
{ hid: "og-url", property: "og:url", content: "https://codewithkamran.com" },
{ hid: "t-type", name: "twitter:card", content: "summary_large_image" },
];
}
},
一切在本地开发环境中都正常工作，但一旦部署到Netlify并在任何Open Graph检查器中检查，它会显示来自nuxt配置文件而不是各个页面/博客的数据。
我一直在使用https://metatags.io/和https://www.opengraph.xyz/来检查元标签，以下是结果图：
我尝试了nuxt.config中的几种设置，如ssr:true和ssr:false，target:server，但似乎没有什么作用。感觉Netlify那边有问题。这是否与Netlify最近添加的预渲染有关？
英文:
I have a portfolio site which was working fine up until march, Recently when I tried to post a new blog and checked the linkpreview of the new blog, I was getting meta tags of the data mentioned in the nuxt.config.js instead of individual pages/articles.
Here is my nuxt config file
export default {
target:'static',
head: {
title: "Kamran Memon | Portfolio",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content:
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
},
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.png" },
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap",
},
],
},
}
and in individual pages/articles I have the meta info like this
head() {
return {
title: 'About | Kamran Memon | Portfolio',
meta: [
{
hid: "description",
name: "description",
content:
"I am Kamran Memon, A Frontend Developer with primary experience in Vue.js, Vuetify, Nuxt.js and have worked in Fintech and Health Care Industries",
},
{
hid: 'author',
name: 'author',
content: 'Kamran Memon'
},
{
hid: "keywords",
name: "keywords",
content: "Kamran Memon"
},
//Open Graph
{ hid: "og-type", property: "og:type", content: "website" },
{
hid: "og-title",
property: "og:title",
content: "About | Kamran Memon | Portfolio",
},
{
hid: "og-desc",
property: "og:description",
content:
"I am Kamran Memon, A Frontend Developer with primary experience in Vue.js, Vuetify, Nuxt.js and have worked in Fintech and Health Care Industries",
},
{
hid: "og-image",
property: "og:image",
content: "https://codewithkamran.com/assets/card-image.png",
},
{ hid: "og-url", property: "og:url", content: "https://codewithkamran.com" },
{ hid: "t-type", name: "twitter:card", content: "summary_large_image" },
];
}
},
Everything works fine in local dev environment once I deploy it on netlify and check in any open graph checker it shows data from nuxt config file instead of individual pages/blogs.
I have been using https://metatags.io/ and https://www.opengraph.xyz/ for checking meta tags here are the results
I have tried several settings in nuxt.config ssr:true and ssr:false target:server but nothing seems to be working. It feels something is wrong on the netlify side. Has it anything to do with pre-rendering which I guess has been recently added in netlify?
答案1
得分: 0
我之前的提交中错误地将<nuxt>用<client-only>包裹在布局文件中，因此我遇到了这个问题。
英文:
I had Mistakenly wrapped <nuxt> with <client-only> in the layout file in the earlier commits, due to which I was facing the issue.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论