Just want to ask, the best way to add condition, to generate an Og-image or just specify an image cover.

[JenuelDev]

Details

I am working on a blog site, I created an island component for my OG, and currently, I am using v-if in the component. But is there a better way to add a conditional? or I am doing it right?

[harlan-zw]

Yup, that sounds right, you just call the component or add the component on whatever page you want the og image to be generated.

If you provide a code sample I can provide further guidance.

[JenuelDev]

I did it like this. So basically in the useHead method,,, I added a condition to check if cover image is defined, if not use og image as default meta og image.

useHead({
    ...setMeta({
        title: data.value.title,
        description: data.value.summary,
        path: `/blog/${data.value.slug}`,
        keywords: data.value.keywords,
        lang: "en",
        ...(coverImageLink.value
            ? {
                  image: coverImageLink.value,
              }
            : {}),
    }),
});

And then I added a condition like the code bellow that way, if cover image is defined the cover image will be used as og image.. and if no cover image defined, it will use the OgImageStatic component to create default og image.

<OgImageStatic
        v-if="!coverImageLink"
        component="DefaultOgImage"
        :path="route.path"
        :title="data.title"
        :description="data.summary"
        appName="www.BroJenuel.com"
    />

[harlan-zw]

This is how I would do it :+1: Feel free to re-open if you need anymore guidance