Add Open Graph and Twitter Card social preview support

site/app/composables/usePageSeo.ts

@@ -0,0 +1,37 @@
+const DEFAULT_DESCRIPTION =
+  'AutoFixture makes unit tests more productive by creating anonymous test data for .NET.'
+
+const DEFAULT_OG_IMAGE = '/og-image.png'
+
+type PageSeoOptions = {
+  title?: MaybeRefOrGetter<string | undefined>
+  description?: MaybeRefOrGetter<string | undefined>
+  image?: MaybeRefOrGetter<string | undefined>
+}
+
+export function usePageSeo(options: PageSeoOptions = {}) {
+  const route = useRoute()
+  const { public: { siteUrl } } = useRuntimeConfig()
+
+  const title = computed(() => toValue(options.title) ?? 'AutoFixture')
+  const description = computed(() => toValue(options.description) ?? DEFAULT_DESCRIPTION)
+  const image = computed(() => `${siteUrl}${toValue(options.image) ?? DEFAULT_OG_IMAGE}`)
+  const url = computed(() => `${siteUrl}${route.path}`)
+
+  useHead({
+    title,
+    meta: computed(() => [
+      { name: 'description', content: description.value },
+      { property: 'og:title', content: title.value },
+      { property: 'og:description', content: description.value },
+      { property: 'og:image', content: image.value },
+      { property: 'og:url', content: url.value },
+      { property: 'og:type', content: 'website' },
+      { property: 'og:site_name', content: 'AutoFixture' },
+      { name: 'twitter:card', content: 'summary_large_image' },
+      { name: 'twitter:title', content: title.value },
+      { name: 'twitter:description', content: description.value },
+      { name: 'twitter:image', content: image.value },
+    ]),
+  })
+}

site/app/pages/api/[...slug].vue

@@ -62,8 +62,9 @@ if (!page.value) {
 const pageTitle = computed(() => page.value?.title ?? 'API')
 const tocLinks = computed(() => page.value?.tocLinks ?? [])
 
-useSeoMeta({
+usePageSeo({
   title: () => pageTitle.value,
+  description: () => `AutoFixture API reference — ${pageTitle.value}`,
 })
 </script>
 

site/app/pages/docs/[...slug].vue

@@ -20,9 +20,9 @@ const { data: surround } = await useAsyncData(
   () => queryCollectionItemSurroundings('docs', docsPath.value),
 )
 
-useSeoMeta({
-  title: page.value.title,
-  description: page.value.description,
+usePageSeo({
+  title: () => page.value?.title,
+  description: () => page.value?.description,
 })
 
 const tocLinks = computed(() => page.value?.body?.toc?.links ?? [])

site/app/pages/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { defaultApiPath } = useApiCatalog()
 
-useSeoMeta({
+usePageSeo({
   title: 'AutoFixture',
   description:
     'AutoFixture makes unit tests more productive by creating anonymous test data for .NET.',

site/nuxt.config.ts

@@ -20,7 +20,17 @@ function readApiPrerenderRoutes() {
   }
 }
 
+const siteUrl = 'https://autofixture.com'
+const siteDescription =
+  'AutoFixture makes unit tests more productive by creating anonymous test data for .NET.'
+const ogImage = `${siteUrl}/og-image.png`
+
 export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      siteUrl,
+    },
+  },
   modules: [
     '@nuxt/ui',
     '@nuxt/content',
@@ -37,10 +47,17 @@ export default defineNuxtConfig({
     head: {
       title: 'AutoFixture',
       meta: [
-        {
-          name: 'description',
-          content: 'AutoFixture makes unit tests more productive by creating anonymous test data for .NET.',
-        },
+        { name: 'description', content: siteDescription },
+        { property: 'og:site_name', content: 'AutoFixture' },
+        { property: 'og:type', content: 'website' },
+        { property: 'og:title', content: 'AutoFixture' },
+        { property: 'og:description', content: siteDescription },
+        { property: 'og:image', content: ogImage },
+        { property: 'og:url', content: `${siteUrl}/` },
+        { name: 'twitter:card', content: 'summary_large_image' },
+        { name: 'twitter:title', content: 'AutoFixture' },
+        { name: 'twitter:description', content: siteDescription },
+        { name: 'twitter:image', content: ogImage },
       ],
       link: [
         { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },