prismic icon indicating copy to clipboard operation
prismic copied to clipboard

UsePrismicSeoMeta

Open luca-smartpricing opened this issue 1 year ago • 0 comments

Is your feature request related to a problem? Please describe.

No, but Prismic come with an auto-generated SEO metadata tabs for page types. So, why don't create a SEO compostable that get data from useAsyncData and safely inject in useSeoMeta()?

In the slicemachine page snippet your code is:

useHead({
  title: page.value?.data.meta_title,
  meta: [
    {
      name: 'description',
      content: page.value?.data.meta_description,
    },
  ],
})

but you don't use meta_image and the correct compostable: useSeoMeta. Having a pre made compostable wrapper would be very handy.

Something like this:

export default function ({
  metatitle,
  metadescription,
  socialtitle,
  socialdescription,
  socialimage,
}: {
  metatitle: KeyTextField
  metadescription: KeyTextField
  socialtitle: KeyTextField
  socialdescription: KeyTextField
  socialimage: LinkToMediaField
}) {
  useSeoMeta({
    title: isFilled.keyText(metatitle) ? metatitle : undefined,
    description: isFilled.keyText(metadescription)
      ? metadescription
      : undefined,
    ogTitle: isFilled.keyText(socialtitle) ? socialtitle : undefined,
    ogDescription: isFilled.keyText(socialdescription)
      ? socialdescription
      : undefined,
    twitterTitle: isFilled.keyText(socialtitle) ? socialtitle : undefined,
    twitterDescription: isFilled.keyText(socialdescription)
      ? socialdescription
      : undefined,
  })
}

luca-smartpricing avatar Oct 08 '24 11:10 luca-smartpricing