Nuxt开放图元标签在Netlify中无法正常工作。

huangapple
go评论109阅读模式
英文:

Nuxt open graph meta tags not working in netlify

问题

我有一个投资组合网站，直到三月份都运行正常，最近我尝试发布一篇新博客并检查了新博客的链接预览时，我得到的是在nuxt.config.js中提到的数据的元标签，而不是各个页面/文章的元标签。

这是我的nuxt配置文件：

  1. export default {
  2.   target: 'static',
  3.   head: {
  4.     title: "Kamran Memon | Portfolio",
  5.     htmlAttrs: {
  6.       lang: "en",
  7.     },
  8.     meta: [
  9.       { charset: "utf-8" },
  10.       {
  11.         name: "viewport",
  12.         content:
  13.           "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
  14.       },
  15.     ],
  16.     link: [
  17.       { rel: "icon", type: "image/x-icon", href: "/favicon.png" },
  18.       {
  19.         rel: "stylesheet",
  20.         href: "https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap",
  21.       },
  22.     ],
  23.   },
  24. }

在各个页面/文章中，我的元标签信息如下：

  1. head() {
  2.     return {
  3.       title: 'About | Kamran Memon | Portfolio',
  4.       meta: [
  5.         {
  6.           hid: "description",
  7.           name: "description",
  8.           content:
  9.             "我是Kamran Memon，一名前端开发人员，主要使用Vue.js、Vuetify、Nuxt.js进行开发，并在金融科技和医疗保健行业工作过",
  10.         },
  11.         {
  12.           hid: 'author',
  13.           name: 'author',
  14.           content: 'Kamran Memon'
  15.         },
  16.         {
  17.           hid: "keywords",
  18.           name: "keywords",
  19.           content: "Kamran Memon"
  20.         },
  21.         //Open Graph
  22.         { hid: "og-type", property: "og:type", content: "website" },
  23.         {
  24.           hid: "og-title",
  25.           property: "og:title",
  26.           content: "About | Kamran Memon | Portfolio",
  27.         },
  28.         {
  29.           hid: "og-desc",
  30.           property: "og:description",
  31.           content:
  32.             "我是Kamran Memon，一名前端开发人员，主要使用Vue.js、Vuetify、Nuxt.js进行开发，并在金融科技和医疗保健行业工作过",
  33.         },
  34.         {
  35.           hid: "og-image",
  36.           property: "og:image",
  37.           content: "https://codewithkamran.com/assets/card-image.png",
  38.         },
  39.         { hid: "og-url", property: "og:url", content: "https://codewithkamran.com" },
  40.         { hid: "t-type", name: "twitter:card", content: "summary_large_image" },
  41.       ];
  42.     }
  43.   },

一切在本地开发环境中都正常工作，但一旦部署到Netlify并在任何Open Graph检查器中检查，它会显示来自nuxt配置文件而不是各个页面/博客的数据。

我一直在使用https://metatags.io/和https://www.opengraph.xyz/来检查元标签，以下是结果图：

Nuxt开放图元标签在Netlify中无法正常工作。

我尝试了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

  1. export default {
  2.   target:'static',
  3.   head: {
  4.     title: "Kamran Memon | Portfolio",
  5.     htmlAttrs: {
  6.       lang: "en",
  7.     },
  8.     meta: [
  9.       { charset: "utf-8" },
  10.       {
  11.         name: "viewport",
  12.         content:
  13.           "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
  14.       },
  15.     ],
  16.     link: [
  17.       { rel: "icon", type: "image/x-icon", href: "/favicon.png" },
  18.       {
  19.         rel: "stylesheet",
  20.         href: "https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap",
  21.       },
  22.     ],
  23.   },
  24. }

and in individual pages/articles I have the meta info like this

  1. head() {
  2.     return {
  3.       title: 'About | Kamran Memon | Portfolio',
  4.       meta: [
  5.         {
  6.           hid: "description",
  7.           name: "description",
  8.           content:
  9.             "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",
  10.         },
  11.         {
  12.           hid: 'author',
  13.           name: 'author',
  14.           content: 'Kamran Memon'
  15.         },
  16.         {
  17.           hid: "keywords",
  18.           name: "keywords",
  19.           content: "Kamran Memon"
  20.         },
  21.         //Open Graph
  22.         { hid: "og-type", property: "og:type", content: "website" },
  23.         {
  24.           hid: "og-title",
  25.           property: "og:title",
  26.           content: "About | Kamran Memon | Portfolio",
  27.         },
  28.         {
  29.           hid: "og-desc",
  30.           property: "og:description",
  31.           content:
  32.             "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",
  33.         },
  34.         {
  35.           hid: "og-image",
  36.           property: "og:image",
  37.           content: "https://codewithkamran.com/assets/card-image.png",
  38.         },
  39.         { hid: "og-url", property: "og:url", content: "https://codewithkamran.com" },
  40.         { hid: "t-type", name: "twitter:card", content: "summary_large_image" },
  41.       ];
  42.     }
  43.   },

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

Nuxt开放图元标签在Netlify中无法正常工作。

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.

huangapple
  • 本文由 发表于 2023年7月10日 14:33:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/76651179.html
  • metadata
  • netlify
  • nuxt.js
  • server-side-rendering
  • vue.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定