Adventures with Nuxt3: Social Share Cards

/ 134

Here's what takes to get social sharing working with Nuxt3


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"/>