ElMassimo / iles

🏝 The joyful site generator
https://iles.pages.dev
MIT License
1.09k stars 32 forks source link

Twitter meta tags #264

Open TechAkayy opened 1 year ago

TechAkayy commented 1 year ago

Twitter meta tags must be "name" instead of "property" in our docs - https://github.com/ElMassimo/iles/blob/main/docs/src/components/MetaTags.vue#L24

The image is not showing when sharing https://iles.pages.dev/ on twitter probably because of this. useSeoMeta can take care of adding the correct attribute-name.

  import { useSeoMeta } from 'unhead'
  useSeoMeta({
    // charset: 'utf-8',
    // author,
    // viewport: 'width=device-width, initial-scale=1',
    // keywords: route.meta.tags?.toString(),
    // title,
    description,
    ogTitle: title,
    ogDescription: description,
    ogType: 'website',
    ogImage: imgUrl,
    ogImageAlt: title,
    // og:image:width
    // og:image:height
    // og:image:alt
    // og:image: type
    // og:image: secure_url
    ogUrl: url,
    ogSiteName: title,
    // og: locale
    // og: type
    twitterTitle: title,
    twitterDescription: description,
    twitterImage: imgUrl,
    twitterImageAlt: title,
    twitterSite: '@vuedesigner',
    twitterCreator: '@techakayy',
    twitterCard: 'summary_large_image',
  })
ElMassimo commented 1 year ago

It used to display properly when I initially created the site, thanks for the heads up!

Now that @vueuse/head has been replaced by @unhead/vue, it makes sense to change the internal usages, as well as the docs site and examples.