Add Open Graph and Twitter metadata to website

website/src/components/Head.tsx

@@ -29,20 +29,6 @@ export const Head = component$(() => {
       <link rel="apple-touch-icon" sizes="180x180" href="/icon-180px.jpg" />
       <link rel="manifest" href="/manifest.json" />
 
-      <meta
-        property="og:image"
-        content={
-          location.url.pathname === '/'
-            ? '/og-image'
-            : `/og-image?title=${encodeURIComponent(
-                head.title
-              )}&description=${encodeURIComponent(
-                head.meta.find((item) => item.name === 'description')
-                  ?.content || ''
-              )}&path=${location.url.pathname.split('/')[1]}`
-        }
-      />
-
       <script
         async
         src="https://umami.valibot.dev/script.js"

website/src/routes/api/layout.tsx

@@ -1,5 +1,9 @@
 import { component$, Slot } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
 import { DocsLayout } from '~/components';
+import { addArticleMetadata } from '~/utils';
+
+export const head: DocumentHead = addArticleMetadata;
 
 export default component$(() => (
   <DocsLayout>

website/src/routes/guides/layout.tsx

@@ -1,5 +1,9 @@
 import { component$, Slot } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
 import { DocsLayout } from '~/components';
+import { addArticleMetadata } from '~/utils';
+
+export const head: DocumentHead = addArticleMetadata;
 
 export default component$(() => (
   <DocsLayout>

website/src/routes/index.tsx

@@ -11,15 +11,40 @@ import { ActionButton, ButtonGroup, Expandable, TextLink } from '~/components';
 import { PlusIcon } from '~/icons';
 import { blurredCodeDarkUrl, blurredCodeLightUrl } from '~/images';
 
-export const head: DocumentHead = {
-  title: 'Valibot: The modular and type safe schema library',
-  meta: [
-    {
-      name: 'description',
-      content:
-        'Validate unknown data with Valibot, the open source schema library with bundle size, type safety and developer experience in mind.',
-    },
-  ],
+export const head: DocumentHead = ({ url }) => {
+  const title = 'Valibot: The modular and type safe schema library';
+  const description =
+    'Validate unknown data with Valibot, the open source schema library with bundle size, type safety and developer experience in mind.';
+
+  return {
+    title,
+    meta: [
+      {
+        name: 'description',
+        content: description,
+      },
+      {
+        name: 'og:type',
+        content: 'website',
+      },
+      {
+        name: 'og:url',
+        content: url.href,
+      },
+      {
+        name: 'og:title',
+        content: title,
+      },
+      {
+        name: 'og:description',
+        content: description,
+      },
+      {
+        name: 'og:image',
+        content: `${url.origin}/og-image`,
+      },
+    ],
+  };
 };
 
 /**

website/src/utils/addArticleMetadata.ts

@@ -0,0 +1,72 @@
+import type {
+  DocumentHeadProps,
+  DocumentHeadValue,
+} from '@builder.io/qwik-city';
+
+/**
+ * Adds Open Graph and Twitter metadata to the document head.
+ *
+ * @param props The current head properties.
+ *
+ * @returns Open Graph and Twitter metadata.
+ */
+export function addArticleMetadata({
+  url,
+  head,
+}: DocumentHeadProps): DocumentHeadValue {
+  // Get description from metadata
+  const description =
+    head.meta.find((item) => item.name === 'description')?.content || '';
+
+  // Create Open Graph image URL
+  const imageUrl = `${url.origin}/og-image?title=${encodeURIComponent(
+    head.title
+  )}&description=${encodeURIComponent(description)}&path=${
+    url.pathname.split('/')[1]
+  }`;
+
+  // Return Open Graph and Twitter metadata
+  return {
+    meta: [
+      // Open Graph
+      {
+        name: 'og:type',
+        content: 'article',
+      },
+      {
+        name: 'og:url',
+        content: url.href,
+      },
+      {
+        name: 'og:title',
+        content: head.title,
+      },
+      {
+        name: 'og:description',
+        content: description,
+      },
+      {
+        name: 'og:image',
+        content: imageUrl,
+      },
+
+      // Twitter
+      {
+        name: 'twitter:card',
+        content: 'summary_large_image',
+      },
+      {
+        name: 'twitter:title',
+        content: head.title,
+      },
+      {
+        name: 'twitter:description',
+        content: description,
+      },
+      {
+        name: 'twitter:image',
+        content: imageUrl,
+      },
+    ],
+  };
+}

website/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './disableTransitions';
+export * from './addArticleMetadata';
 export * from './trackEvent';