Question 301616 in Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Facebook api – How to add dynamic opengraph meta data to page in NuxtJS

I am using NuxtJS with Nuxt3 and in my component, I want to update the head of the page with dynamic opengraph meta data. In my component, I am showing a gallery and for that I am fetching the data from an asynchronus API. Since I am facing data from API, so it is taking a little time to to mount the data in the component.

But, in the nuxt.config.ts file I have already defined the meta tags with hasd coded data for the website landing page or anyother page where I dont need to show dynamic opengraph meta data –

export default defineNuxtConfig({
  //SEO
  app: {
    head: {
      title: 'Talking Lands',
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',

      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: '' },
        { hid: 'og-title', property: 'og:title', content: 'Vuetify + Nuxt'},
        { hid: 'og-type', property: 'og:type', content: 'website' },
        { hid: 'twitter-card', property: 'twitter:card', content: '' },
        { hid: 'og-image', property: 'og:image', content: 'https://new.example.com/static-assests/images/TLlogo_Dark.svg'},
        { hid: 'og-description', property: 'og:description', content: 'This is amazing example of opengaph protocols made using Nuxt and Vuetify'},
        { name: 'format-detection', content: 'telephone=no' }
      ],
    },
    pageTransition: { name: 'page', mode: 'out-in' },
  },
// ... other configurations

In the component I am using script setup and there I am updating the head with useHead property of NuxtJS like this –

<script setup>
// ... other code
useHead({
    title: projName,
    meta: [
        { hid: 'og-title', property: 'og:title', content: projName },
        { hid: 'og-image', property: 'og:image', content: projImage || 'loading-image-url' },
        { hid: 'og-description', property: 'og:description', content: projDescription }
    ],
})
// ...other code and api calls
<script>

projName, projDescription and projImage I am getting from API call and updating these in the useHead portion of the code. In the browser when I am running locally, the title in the browser tab is changing dynamically, but when I am inspecting elements in the browser og:title, og:image, ig:description is missing.

** And even is going missing sometimes –

<title></title>
<meta name="description" content>
<meta property="og:title" content="Vuetify + Nuxt">
<meta property="og:type" content="website">
<meta property="twitter:card" content>
<meta property="og:image" content="https://new.example.com/static-assests/images/TLlogo_Dark.svg">
<meta property="og:description" content="This is amazing example of opengaph protocols made using Nuxt and Vuetify">

It is not getting overridden with the updated dynamic meta data and here it is showing the meta data from nuxt.config.ts file only

I want it to update the html structure once i fetch the data from API and hence when sharing on facebook for different projects there should be dynamic different og meta data.

In what possible way I can manage to update the html structure so that open-graph can read the updated tags

Tags:

2

Answers


  1. 0

    pass a computed() to the useHead instead of a static value

    in you Nuxt-Page-Component setup

    const projName = ref('my project name') // your projName `Ref`

const computedPageMeta = computed(() => {
    return {
        title: projName.value,
        meta: [
            { hid: 'og-title', property: 'og:title', content: projName.value },
            ...
        ]
    };
});

useHead(computedPageMeta);

    read the useHead document for more detail

    Login or Signup to reply.
  2. 0

    useSeoMeta() composable is highly recommended for seo setting. If the meta tags are reactive, use the computed getter syntax () => value.

    useSeoMeta({
  ogTitle: () => projName,
  ogImage: () => projImage,
  ogDescription: () => projDescription,
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search