How to create custom meta tags in Vue Meta 3?

Question

How to create custom meta tags in Vue Meta 3?

13.8k Views Asked by volume one At 20 October 2024 at 23:33

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>

Original Q&A

There are 3 best solutions below

Brainiac On 31 January 2023 at 09:42

I was having the same issues then I came across this which solves the problem for me. Here is the link to the original post: vue3 vue-meta showing name="meta"

In vue js 3 you should use the vue3-meta or alpha version. Then do the following

metaInfo() {
    return {
        htmlAttrs: { lang: 'en', amp: true },
        title: "page title",
        description : "Page description",
        twitter: {
            title: "twitter title",
            description: "twitter description",
            card: "twitter card",
            image: "twitter image",
        },
        og: {
            title : 'og title!',
            description : 'og description!',
            type : 'og type',
            url : 'og url',
            image : 'og image',
            site_name : 'og site name',
        }
    }
}

if you want to use meta name then change the config in main.js

import { createMetaManager, defaultConfig, plugin as metaPlugin } from 'vue-meta'
const metaManager = createMetaManager(false, {
    ...defaultConfig,
    meta: { tag: 'meta', nameless: true },
});

and in your component use the meta name below

metaInfo() {
    return {
        meta: [
            {'name' : 'author', 'content' : 'author'},
            { name: 'description', content: 'authors' },
        ]
    }
}

dominagy On 27 August 2022 at 21:47

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

**charles-allen** · Accepted Answer

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

Correct vue-meta syntax
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):

How to create custom meta tags in Vue Meta 3?

There are 3 best solutions below

Part 1: vue-meta for Vue 3

Part 2: SSR

Related Questions in VUE.JS

Related Questions in VUEJS3

Related Questions in VUE-META

Trending Questions

Popular # Hahtags

Popular Questions