#Setting ogImage meta using data from Directus api response

3 messages · Page 1 of 1 (latest)

sharp loom
#

Howdy folks. I'm busy with a new Nuxt 3 site using Directus as the content backend and struggling to set the ogImage using the dynamic data set in Directus. The title, description work fine, but the image id is being set as undefined, even though it works fine if i add it in the template code.

Here is my script block (set in the default layout):

  const { getSingletonItem } = useDirectusItems()
    const global = await getSingletonItem({ 
    collection: 'global',
    params: {
      fields: [
        'seo_title',
        'seo_description',
        'seo_image',
        'favicon'
      ],
    }
  })
  const { getThumbnail: img } = useDirectusFiles()
  useSeoMeta({
    title: global.seo_title,
    ogTitle: global.seo_title,
    description: global.seo_description,
    ogDescription: global.seo_description,
    ogImage: img(global.seo_image)
  })
  useHead({
    link: [{ rel: 'icon', type: 'image/png', href: img(global.favicon) }],
  })
</script>```

and the code in my template:

```<template>
  <div class="p:0 m:0">
    <!-- <pre>{{ global }}</pre>
    {
      "seo_title": "Nieke Munning",
      "seo_description": "Hello, I'm Nieke - a natural health consultant combining bioresonance therapy, nutrition and reflexology, now in the Garden Route, South Africa.",
      "seo_image": "a264a30d-abea-4f1b-9b36-074586b459b6",
      "favicon": "1a89c7cf-6220-4097-b193-027a95a5f461"
    }
    <h1 v-html="global.seo_title" />
    <img :src="img(global.seo_image)" />
    <img :src="img(global.favicon)" /> -->

    <LayoutHeader />
    <slot></slot>
    <LayoutFooter />
  </div>
</template>```

I tried useSeoMeta, but get the same output.  This is what is outputted in the head:

```<link rel="icon" type="image/png" href="https://cms.site.com/assets/undefined?access_token=tokenhere">```

Both the title and description are set correctly, but I can't for the life of me get the seo image to work.

Any idea what I'm missing? 

TIA,
Chris
mental elk
#

Hey @sharp loom, I'm facing this same problem and it just doesn't seem to work. Did you manage to get it sorted?

#

My problem is not exactly the same, similar...I'm trying to set the path to my favicon dynamically, using seoMeta (I've tried useServerSeo and useHead too). I can get my title to set, but the favicon just doesn't update 🤷‍♂️