How to create custom meta tags in Vue Meta 3?

user_1774037 0
Viewed 4940

I am using Vue Meta 3 to provide meta data to the website. The API for this is here

I do not understand how to provide custom meta tags( e.g Open Graph tags such as og:type). This is what I have tried to do in a component:

setup() {
    useMeta({
      title: "Homepage",
      meta: [
          {name: "hunky:dory", content: "website"}
      ],
      description: "This is the homepage."
    })
  },

The HTML that gets outputted ends up like this:

<head>
 <title>Homepage</title>
 <meta name="description" content="This is the homepage.">
 <meta name="meta" content="website"> <!-- should be <meta name="hunky:dory content="website"> -->
</head>

If I change the code to this:

setup() {
    useMeta({
      title: "Homepage",
      "hunky:dory": [
          {content: "website"}
      ],
      description: "This is the homepage."
    })
  },

I get illegal HTML output:

<head>
     <title>Homepage</title>
     <meta name="description" content="This is the homepage.">
     <hunky:dory>website</hunky:dory> <!-- total nonsense -->
    </head>

How do I get the output to be:

<head>
         <title>Homepage</title>
         <meta name="description" content="This is the homepage.">
         <meta name="hunky:dory" content="website">
        </head>
vue-meta vuejs3 vue.js
2 Answers

There are 2 parts to getting og meta working -- I think I can help with part 1:

  1. Correct vue-meta syntax
  2. Server-Side Rendering (SSR)

Part 1: vue-meta for Vue 3

I wrote this with vue-class-component, and it seems to be working:

meta = setup(() => useMeta(computed(() => ({
  title: this.event?.name ?? 'Event not found',
  og: {
    image: this.event?.bannerUrl ?? 'http://yourwebsite.com/images/default-banner.png'
  }
}))))

...which presumably translates to this in vanilla Vue 3:

setup() {  
  useMeta(
    computed(() => ({
      title: this.event?.name ?? 'Event not found',
      og: {
        image: this.event?.bannerUrl ?? 'http://yourwebsite.com/images/default-banner.png'
      }
    }))
  )
}

Result:

<meta property="og:image" content="http://cloudstorage.com/images/event-123.png">

References:

Part 2: SSR

Once I'd done part 1, I realized that I hadn't setup SSR... so I'm only rendering the meta for my users, not for Facebook's crawler (not very useful). I'm afraid I haven't fixed this yet on my project; perhaps someone else can pitch in that part!

Until then, maybe this will get you started:

Note: vue-meta is under the Nuxt GitHub organization => you might consider migrating to Nuxt v3 (which is built on top of Vue):

user_29571690

A bit late but maybe not useless for anyone facing issues with Vue 3 (and vue-meta). With the below detailed woraround, you are not dependent on any 3rd party lib.

My project is currently in development stage in local environment (so not fully tested), but a probable workaround is using beforeCreate lifecycle hook for adding meta tags if you are using Options API in Vue 3 (with vue-router), SFC way (e.g. If you are using single-file-component views for "pages" and you want them all to have their custom meta info).

In the hook method you can create DOM nodes and append them to the head like:

...
beforeCreate(){
  // adding title for current view/page using vue-i18n
  let title = document.createElement(`TITLE`)
  title.innerText = this.$t(`something`)

  document.querySelector(`head`).appendChild(title)

  // adding og:image
  let ogImage = document.createElement(`META`)
  ogImage.setAttribute(`name`,`og:image`)
  ogImage.setAttribute(`content`,`YOUR-IMAGE-URL`)

  document.querySelector(`head`).appendChild(ogImage)
}
...

I'm not sure yet if this is an efficient way to make it work, but gonna try to update this post when the project is in production.

I have tested this solution with chrome plugins like this one: Localhost Open Graph Debugger

user_155240060
Related