diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8dbcffe47..7ac6bcd5c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,6 +87,9 @@ importers:
       '@netlify/edge-functions':
         specifier: ^2.0.0
         version: 2.0.0
+      '@resvg/resvg-wasm':
+        specifier: ^2.6.0
+        version: 2.6.0
       '@types/eslint':
         specifier: ^8.44.0
         version: 8.44.0
@@ -129,6 +132,9 @@ importers:
       rehype-external-links:
         specifier: ^2.1.0
         version: 2.1.0
+      satori:
+        specifier: ^0.10.11
+        version: 0.10.11
       tailwindcss:
         specifier: ^3.3.3
         version: 3.3.3
@@ -2035,6 +2041,11 @@ packages:
     resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
     dev: true
 
+  /@resvg/resvg-wasm@2.6.0:
+    resolution: {integrity: sha512-iDkBM6Ivex8nULtBu8cX670/lfsGxq8U1cuqE+qS9xFpPQP1enPdVm/33Kq3+B+bAldA+AHNZnCgpmlHo/fZrQ==}
+    engines: {node: '>= 10'}
+    dev: true
+
   /@rollup/pluginutils@4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
@@ -2061,6 +2072,15 @@ packages:
       - zenObservable
     dev: true
 
+  /@shuding/opentype.js@1.4.0-beta.0:
+    resolution: {integrity: sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==}
+    engines: {node: '>= 8.0.0'}
+    hasBin: true
+    dependencies:
+      fflate: 0.7.4
+      string.prototype.codepointat: 0.2.1
+    dev: true
+
   /@sinclair/typebox@0.27.8:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
@@ -3224,6 +3244,11 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
+  /base64-js@0.0.8:
+    resolution: {integrity: sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
   /base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: true
@@ -3616,6 +3641,10 @@ packages:
     engines: {node: '>=14.16'}
     dev: true
 
+  /camelize@1.0.1:
+    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
+    dev: true
+
   /caniuse-lite@1.0.30001517:
     resolution: {integrity: sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==}
     dev: true
@@ -4256,6 +4285,27 @@ packages:
       type-fest: 1.4.0
     dev: true
 
+  /css-background-parser@0.1.0:
+    resolution: {integrity: sha512-2EZLisiZQ+7m4wwur/qiYJRniHX4K5Tc9w93MT3AS0WS1u5kaZ4FKXlOTBhOjc+CgEgPiGY+fX1yWD8UwpEqUA==}
+    dev: true
+
+  /css-box-shadow@1.0.0-3:
+    resolution: {integrity: sha512-9jaqR6e7Ohds+aWwmhe6wILJ99xYQbfmK9QQB9CcMjDbTxPZjwEmUQpU91OG05Xgm8BahT5fW+svbsQGjS/zPg==}
+    dev: true
+
+  /css-color-keywords@1.0.0:
+    resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /css-to-react-native@3.2.0:
+    resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
+    dependencies:
+      camelize: 1.0.1
+      css-color-keywords: 1.0.0
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -4751,6 +4801,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /emoji-regex@10.3.0:
+    resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
+    dev: true
+
   /emoji-regex@7.0.3:
     resolution: {integrity: sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==}
     dev: true
@@ -5875,6 +5929,10 @@ packages:
       is-plain-obj: 4.1.0
     dev: true
 
+  /fflate@0.7.4:
+    resolution: {integrity: sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==}
+    dev: true
+
   /figures@1.7.0:
     resolution: {integrity: sha512-UxKlfCRuCBxSXU4C6t9scbDyWZ4VlaFFdojKtzJuSkuOBQ5CNFum+zZXFwHjo+CxBC1t6zlYPgHIgFjL8ggoEQ==}
     engines: {node: '>=0.10.0'}
@@ -6787,6 +6845,11 @@ packages:
       space-separated-tokens: 1.1.5
     dev: true
 
+  /hex-rgb@4.3.0:
+    resolution: {integrity: sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==}
+    engines: {node: '>=6'}
+    dev: true
+
   /hexer@1.5.0:
     resolution: {integrity: sha512-dyrPC8KzBzUJ19QTIo1gXNqIISRXQ0NwteW6OeQHRN4ZuZeHkdODfj0zHBdOlHbRY8GqbqK57C9oWSvQZizFsg==}
     engines: {node: '>= 0.10.x'}
@@ -8016,6 +8079,13 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /linebreak@1.1.0:
+    resolution: {integrity: sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==}
+    dependencies:
+      base64-js: 0.0.8
+      unicode-trie: 2.0.0
+    dev: true
+
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: true
@@ -9880,6 +9950,10 @@ packages:
       semver: 7.5.4
     dev: true
 
+  /pako@0.2.9:
+    resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
+    dev: true
+
   /parallel-transform@1.2.0:
     resolution: {integrity: sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==}
     dependencies:
@@ -9895,6 +9969,13 @@ packages:
       callsites: 3.1.0
     dev: true
 
+  /parse-css-color@0.2.1:
+    resolution: {integrity: sha512-bwS/GGIFV3b6KS4uwpzCFj4w297Yl3uqnSgIPsoQkx7GMLROXfMnWvxfNkL0oh8HVhZA4hvJoEoEIqonfJ3BWg==}
+    dependencies:
+      color-name: 1.1.4
+      hex-rgb: 4.3.0
+    dev: true
+
   /parse-entities@2.0.0:
     resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
     dependencies:
@@ -11078,6 +11159,22 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
+  /satori@0.10.11:
+    resolution: {integrity: sha512-yLm1xPRPZUaKcBZJ6nmezoJjHB4MqV8x7Mu0PyZUJodRWRDD27UbeMwzuY9LEGG57WYLO4CQsGPlbHWV1Ex9TQ==}
+    engines: {node: '>=16'}
+    dependencies:
+      '@shuding/opentype.js': 1.4.0-beta.0
+      css-background-parser: 0.1.0
+      css-box-shadow: 1.0.0-3
+      css-to-react-native: 3.2.0
+      emoji-regex: 10.3.0
+      escape-html: 1.0.3
+      linebreak: 1.1.0
+      parse-css-color: 0.2.1
+      postcss-value-parser: 4.2.0
+      yoga-wasm-web: 0.3.3
+    dev: true
+
   /saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
@@ -11583,6 +11680,10 @@ packages:
       strip-ansi: 7.1.0
     dev: true
 
+  /string.prototype.codepointat@0.2.1:
+    resolution: {integrity: sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==}
+    dev: true
+
   /string.prototype.trim@1.2.7:
     resolution: {integrity: sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==}
     engines: {node: '>= 0.4'}
@@ -11987,6 +12088,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /tiny-inflate@1.0.3:
+    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
+    dev: true
+
   /tiny-lru@11.0.1:
     resolution: {integrity: sha512-iNgFugVuQgBKrqeO/mpiTTgmBsTP0WL6yeuLfLs/Ctf0pI/ixGqIRm8sDCwMcXGe9WWvt2sGXI5mNqZbValmJg==}
     engines: {node: '>=12'}
@@ -12410,6 +12515,13 @@ packages:
       busboy: 1.6.0
     dev: true
 
+  /unicode-trie@2.0.0:
+    resolution: {integrity: sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==}
+    dependencies:
+      pako: 0.2.9
+      tiny-inflate: 1.0.3
+    dev: true
+
   /unified@10.1.2:
     resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
     dependencies:
@@ -13336,6 +13448,10 @@ packages:
     engines: {node: '>=12.20'}
     dev: true
 
+  /yoga-wasm-web@0.3.3:
+    resolution: {integrity: sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==}
+    dev: true
+
   /zip-stream@4.1.0:
     resolution: {integrity: sha512-zshzwQW7gG7hjpBlgeQP9RuyPGNxvJdzR8SUM3QhxCnLjWN2E7j3dOvpeDcQoETfHx0urRS7EtmVToql7YpU4A==}
     engines: {node: '>= 10'}
diff --git a/website/package.json b/website/package.json
index 433ce0246..85039b869 100644
--- a/website/package.json
+++ b/website/package.json
@@ -34,6 +34,7 @@
     "@builder.io/qwik-city": "1.1.5",
     "@mapbox/rehype-prism": "^0.8.0",
     "@netlify/edge-functions": "^2.0.0",
+    "@resvg/resvg-wasm": "^2.6.0",
     "@types/eslint": "^8.44.0",
     "@types/mapbox__rehype-prism": "^0.8.0",
     "@types/node": "^20.4.2",
@@ -48,6 +49,7 @@
     "postcss": "^8.4.27",
     "prettier": "2.8.8",
     "rehype-external-links": "^2.1.0",
+    "satori": "^0.10.11",
     "tailwindcss": "^3.3.3",
     "tsm": "^2.3.0",
     "typescript": "^5.3.3",
diff --git a/website/src/components/Head.tsx b/website/src/components/Head.tsx
index 8278c30a0..151860bc2 100644
--- a/website/src/components/Head.tsx
+++ b/website/src/components/Head.tsx
@@ -12,7 +12,9 @@ export const Head = component$(() => {
 
   return (
     <head>
-      <title>{head.title}</title>
+      <title>
+        {location.url.pathname === '/' ? head.title : `${head.title} | Valibot`}
+      </title>
 
       <meta charSet="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -27,6 +29,20 @@ 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 || ''
+              )}`
+        }
+      />
+
       <script
         async
         src="https://umami.valibot.dev/script.js"
@@ -41,20 +57,8 @@ export const Head = component$(() => {
         <script dangerouslySetInnerHTML="document.documentElement.classList.remove('dark')" />
       )}
 
-      {[...head.meta, ...(head.frontmatter.meta || [])].map(
-        ({ key, ...props }) => (
-          <meta key={key} {...props} />
-        )
-      )}
-
-      {/* TODO: Check if we really need this code */}
-      {head.links.map(({ key, ...props }) => (
-        <link key={key} {...props} />
-      ))}
-
-      {/* TODO: Check if we really need this code */}
-      {head.styles.map(({ key, style, ...props }) => (
-        <style key={key} {...props} dangerouslySetInnerHTML={style} />
+      {head.meta.map(({ key, ...props }) => (
+        <meta key={key} {...props} />
       ))}
     </head>
   );
diff --git a/website/src/routes/layout.tsx b/website/src/routes/layout.tsx
index a1f6d3100..7c2b91915 100644
--- a/website/src/routes/layout.tsx
+++ b/website/src/routes/layout.tsx
@@ -1,15 +1,6 @@
 import { component$, Slot, useSignal } from '@builder.io/qwik';
-import { type DocumentHead } from '@builder.io/qwik-city';
 import { DocSearch, Footer, Header, RoutingIndicator } from '~/components';
 
-export const head: DocumentHead = (request) => ({
-  // Add name of site to title of subpages
-  title:
-    request.url.pathname === '/'
-      ? request.head.title
-      : `${request.head.title} | Valibot`,
-});
-
 export default component$(() => {
   // Use search open signal
   const searchOpen = useSignal(false);
diff --git a/website/src/routes/og-image/index.ts b/website/src/routes/og-image/index.ts
new file mode 100644
index 000000000..9a8044d23
--- /dev/null
+++ b/website/src/routes/og-image/index.ts
@@ -0,0 +1,170 @@
+import type { RequestHandler } from '@builder.io/qwik-city';
+import { Resvg, initWasm } from '@resvg/resvg-wasm';
+import satori from 'satori';
+
+let wasmPromise: Promise<void> | undefined;
+
+async function getFontData(fileName: string) {
+  const resposne = await fetch(
+    `${import.meta.env.PUBLIC_WEBSITE_URL}/fonts/${fileName}`
+  );
+  return resposne.arrayBuffer();
+}
+
+export const onGet: RequestHandler = async ({ send, url }) => {
+  // Get title and description from search params
+  const title = url.searchParams.get('title');
+  const description = url.searchParams.get('description') || 'valibot.dev';
+
+  // Create Lexend 400 font object
+  const lexend400 = {
+    name: 'Lexend',
+    data: await getFontData('lexend-400.ttf'),
+    style: 'normal',
+    weight: 400,
+  } as const;
+
+  // Create Lexend 500 font object
+  const lexend500 = {
+    name: 'Lexend',
+    data: await getFontData('lexend-500.ttf'),
+    style: 'normal',
+    weight: 500,
+  } as const;
+
+  // Create Lexend Exa 500 font object
+  const lexendExa500 = {
+    name: 'Lexend Exa',
+    data: await getFontData('lexend-exa-500.ttf'),
+    style: 'normal',
+    weight: 500,
+  } as const;
+
+  // Generate SVG string using Satori
+  const svg = title
+    ? // If title is available, return SVG with text
+      await satori(
+        {
+          type: 'div',
+          props: {
+            tw: 'flex h-full w-full flex-col justify-between bg-gray-900 p-16',
+            style: { fontFamily: 'Lexend' },
+            children: [
+              {
+                type: 'div',
+                props: {
+                  tw: 'flex items-center',
+                  children: [
+                    {
+                      type: 'img',
+                      props: {
+                        tw: 'w-16 h-16',
+                        src: `${
+                          import.meta.env.PUBLIC_WEBSITE_URL
+                        }/icon-192px.png`,
+                      },
+                    },
+                    {
+                      type: 'div',
+                      props: {
+                        tw: 'text-4xl font-medium text-slate-300 ml-4',
+                        style: { fontFamily: 'Lexend Exa' },
+                        children: 'Valibot',
+                      },
+                    },
+                  ],
+                },
+              },
+              {
+                type: 'div',
+                props: {
+                  tw: 'flex flex-col',
+                  children: [
+                    {
+                      type: 'h1',
+                      props: {
+                        tw: 'max-w-[80%] text-6xl font-medium leading-normal text-slate-200',
+                        style: {
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        },
+                        children: title,
+                      },
+                    },
+                    {
+                      type: 'p',
+                      props: {
+                        tw: 'text-4xl text-slate-400 leading-loose',
+                        children:
+                          description.length > 110
+                            ? description.slice(0, 110).trimEnd() + '...'
+                            : description,
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+        {
+          width: 1200,
+          height: 630,
+          fonts: [lexend400, lexend500, lexendExa500],
+        }
+      )
+    : // Otherwise, return SVG with logo
+      await satori(
+        {
+          type: 'div',
+          props: {
+            tw: 'flex h-full w-full items-center justify-center bg-gray-900',
+            style: { fontFamily: 'Lexend Exa' },
+            children: {
+              type: 'div',
+              props: {
+                tw: 'flex items-center',
+                children: [
+                  {
+                    type: 'img',
+                    props: {
+                      tw: 'w-36 h-36',
+                      src: `${
+                        import.meta.env.PUBLIC_WEBSITE_URL
+                      }/icon-192px.png`,
+                    },
+                  },
+                  {
+                    type: 'div',
+                    props: {
+                      tw: 'text-8xl font-medium text-slate-300 ml-10',
+                      children: 'Valibot',
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        },
+        {
+          width: 1200,
+          height: 630,
+          fonts: [lexendExa500],
+        }
+      );
+
+  // Lazy initialize WebAssembly module
+  if (!wasmPromise) {
+    wasmPromise = initWasm(
+      fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm')
+    );
+  }
+  await wasmPromise;
+
+  // Convert SVG string to PNG image
+  const image = new Resvg(svg).render().asPng();
+
+  // Send PNG image as response
+  send(new Response(image, { headers: { 'content-type': 'image/png' } }));
+};