Adventures with Nuxt3: Social Share Cards - BLOG

Set up your default head content / meta in your nuxt.config.js, I am using constant variables across the different meta tags in order to be able to re-use the variables for the different networks (twitter, facebook)

const siteTitle = "My Site's Title"
const siteDescription = "Lorem ipsum my site description"
const shareImage = "https://l422y.com/images/share.png"
export default defineNuxtConfig({
    app: {
        head: {
            title: siteTitle,
            meta: [
                {name: 'viewport', content: 'width=device-width, initial-scale=1'},
                {name: 'description', content: siteDescription},
                {property: "og:description", content: siteDescription},
                {property: "og:title", content: siteTitle},
                {property: "og:image", content: shareImage},
                {name: "twitter:title", content: siteTitle},
                {name: "twitter:image", content: shareImage},
                {name: "twitter:card", content: "summary_large_image"},
                {name: "twitter:description", content: siteDescription},
            ],
            link: [
                {rel: 'stylesheet', href: 'https://use.typekit.net/gvd7pel.css'},
                {rel: "icon", href: "/images/favicon.png", id: "light-scheme-icon"},
                {rel: "icon", href: "/images/favicon-white.png", id: "dark-scheme-icon"},
                {rel: "manifest", href: "/site.webmanifest"}],
            script: [
                // google analytics
                {async: true, src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"}
            ],
            noscript: []
        }
    }
})

This will get your basic social share cards set up, then you can utilize useHead in your per page setup:

<script setup>
useHead({
  title: 'My App',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { children: 'console.log(\'Hello world\')' } ]
})
</script>

or, you can use the nifty components that will plug the appropriate values into your head.

    <Title>{{ post.title}}</Title>
    <Meta :content="post.description" name="description"/>