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 = ""
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: ''},
{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: ""}
noscript: []

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

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

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