Open Graph type metadata doesn't work in meta plugin.

[zaynab-raisi]

With meta plugin, open graph metadatas are added to source code of site but any of them don't work.

meta() {
    return {
      title: "title",
      meta: {
        og1: {
          property: "og:title",
          content: "title test",
        },
        og2: {
          property: "og:description",
          content: "test description",
        },
      },
    };
  },

[hawkeye64]

@heyran If you are looking to use meta tags for search engines that don't invoke JavaScript, then your site has to be done with SSR.

[zaynab-raisi]

Impossible unless there's some other misusage. If you will provide a barebones reproduction repo, we can help.

Thank you.
https://github.com/heyran/quasar-meta-plugin-problem

When I insert <meta property="og:title" content="og title" /> and <meta property="og:description" content="og description" /> directly in index.template.html work fine:

But when I use meta plugin:

[hawkeye64]

Is it possible you have left the og metadata in index.template.html? If so, then it can't be overwritten by the Meta plugin

[rstoenescu]

Apologies for the mixup. Checked OpenGraph and indeed it needs <meta property="..." content="..."> tags, so the initial approach with { property, content } is the right approach.
However, I checked your project (and reverted to property+content) and it correctly generates the tags. You can check yourself in the browser by running SSR mode and using devtools to disable Javascript. So not sure what your tool does, but I can ensure 100% that Quasar does its job.

[zaynab-raisi]

Is it possible you have left the og metadata in index.template.html? If so, then it can't be overwritten by the Meta plugin

Yes. But I want to specify it for a certain route while in this way, it is applied to all pages (routes). How can I do that in index.template.html?

[zaynab-raisi]

Apologies for the mixup. Checked OpenGraph and indeed it needs <meta property="..." content="..."> tags, so the initial approach with { property, content } is the right approach.
However, I checked your project (and reverted to property+content) and it correctly generates the tags. You can check yourself in the browser by running SSR mode and using devtools to disable Javascript. So not sure what your tool does, but I can ensure 100% that Quasar does its job.

That's OK 👍
So it's good to edit meta related document because written { name, content } in it:
https://quasar.dev/quasar-plugins/meta

Yes, as I mentioned in my post, it correctly generates the tags but problem is that og metadata not appears in Open Graph Preview extension and then in site links after deploying.
It seemed to og title overwritten by main title. I removed <title><%= productName %></title> and <meta name="description" content="<%= productDescription %>" /> from index.template.html, and title: "title", & description: { name: 'description', content: 'description' }, from index.vue. Now og title works but og description and og image not appear while are generated.

meta: { meta: { og1: { property: 'og:title', content: 'og title' }, og2: { property: 'og:description', content: 'og description' }, og3: { property: "og:image", content: "https://ogp.me/logo.png", }, } }

When I remove og1, I have only og2:

meta: { meta: { og2: { property: 'og:description', content: 'og description' }, og3: { property: "og:image", content: "https://ogp.me/logo.png", }, } }

If I write og3 before og2, only og3 works!

meta: { meta: { og3: { property: "og:image", content: "https://ogp.me/logo.png", }, og2: { property: 'og:description', content: 'og description' }, } }