Adventures with Nuxt3: Social Share Cards
/ 143
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"/>