diff --git a/astro.config.mjs b/astro.config.mjs
index 38f36c1..69be7e3 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -5,6 +5,10 @@ export default defineConfig({
 	site: 'https://shaders.properties',
 	integrations: [
 		starlight({
+			components: {
+				// Relative path to the custom component.
+				Head: './src/components/Head.astro',
+			},
 			title: 'Iris Docs',
 			logo: {
 				src: '/src/assets/iris.webp',
diff --git a/package.json b/package.json
index f57830a..1bfde69 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,12 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/check": "^0.5.10",
     "@astrojs/starlight": "^0.21.5",
     "astro": "^4.3.5",
+    "astro-og-canvas": "^0.5.0",
+    "canvaskit-wasm": "^0.39.1",
     "sharp": "^0.32.5",
-    "@astrojs/check": "^0.5.10",
     "typescript": "^5.4.5"
   }
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0791fb2..2d1ebd2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,12 @@ dependencies:
   astro:
     specifier: ^4.3.5
     version: 4.7.0(typescript@5.4.5)
+  astro-og-canvas:
+    specifier: ^0.5.0
+    version: 0.5.0(astro@4.7.0)
+  canvaskit-wasm:
+    specifier: ^0.39.1
+    version: 0.39.1
   sharp:
     specifier: ^0.32.5
     version: 0.32.6
@@ -1334,6 +1340,10 @@ packages:
     resolution: {integrity: sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ==}
     dev: false
 
+  /@webgpu/types@0.1.21:
+    resolution: {integrity: sha512-pUrWq3V5PiSGFLeLxoGqReTZmiiXwY3jRkIG5sLLKjyqNxrwm/04b4nw7LSmGWJcKk59XOM/YRTUwOzo4MMlow==}
+    dev: false
+
   /acorn-jsx@5.3.2(acorn@8.11.3):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1430,6 +1440,18 @@ packages:
       remark-expressive-code: 0.33.5
     dev: false
 
+  /astro-og-canvas@0.5.0(astro@4.7.0):
+    resolution: {integrity: sha512-nrwZpFL9d6tVJRKV5OLZa3xSSh+Cbaaoay/R9jAgHCrJ79WNyN2rgRT/+wtP1O/bCQ+wVP3GC3mBQN7vogImvg==}
+    engines: {node: '>=18.14.1'}
+    peerDependencies:
+      astro: ^3.0.0 || ^4.0.0
+    dependencies:
+      astro: 4.7.0(typescript@5.4.5)
+      canvaskit-wasm: 0.39.1
+      deterministic-object-hash: 2.0.2
+      entities: 4.5.0
+    dev: false
+
   /astro@4.7.0(typescript@5.4.5):
     resolution: {integrity: sha512-YC24nK6/UNelVob+4RoJPDgZJdpaJarIU85D/UxCrlsYJlLqrW8hXq7A9T6BXNs+puF9pJrYlqaJNCRO+928XA==}
     engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
@@ -1649,6 +1671,12 @@ packages:
     resolution: {integrity: sha512-jmZQ1VpmlRwHgdP1/uiKzgiAuGOfLEJsYFP4+GBou/QQ4U6IOJCB4NP1c+1p9RGLpwObcT94jA5/uO+F1vBbog==}
     dev: false
 
+  /canvaskit-wasm@0.39.1:
+    resolution: {integrity: sha512-Gy3lCmhUdKq+8bvDrs9t8+qf7RvcjuQn+we7vTVVyqgOVO1UVfHpsnBxkTZw+R4ApEJ3D5fKySl9TU11hmjl/A==}
+    dependencies:
+      '@webgpu/types': 0.1.21
+    dev: false
+
   /ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
     dev: false
diff --git a/src/components/Head.astro b/src/components/Head.astro
new file mode 100644
index 0000000..9ef72fc
--- /dev/null
+++ b/src/components/Head.astro
@@ -0,0 +1,14 @@
+---
+import type { Props } from '@astrojs/starlight/props'
+import Default from '@astrojs/starlight/components/Head.astro'
+
+const ogImageUrl = new URL(
+    `/og/${Astro.props.id.replace(/\.\w+$/, '.png')}`,
+    Astro.site,
+)
+---
+
+<Default {...Astro.props}><slot /></Default>
+
+<meta property="og:image" content={ogImageUrl} />
+<meta name="twitter:image" content={ogImageUrl} />
\ No newline at end of file
diff --git a/src/pages/og/[...slug].ts b/src/pages/og/[...slug].ts
new file mode 100644
index 0000000..fe3bc8f
--- /dev/null
+++ b/src/pages/og/[...slug].ts
@@ -0,0 +1,28 @@
+import { getCollection } from 'astro:content'
+import { OGImageRoute } from 'astro-og-canvas'
+
+// Get all entries from the `docs` content collection.
+const entries = await getCollection('docs')
+
+// Map the entry array to an object with the page ID as key and the
+// frontmatter data as value.
+const pages = Object.fromEntries(entries.map(({ data, id }) => [id, { data }]))
+
+export const { getStaticPaths, GET } = OGImageRoute({
+    pages,
+    param: 'slug',
+    getImageOptions: (_path, page: (typeof pages)[number]) => {
+        return {
+            title: page.data.title,
+            description: page.data.description,
+            // Specify the path to your background image.
+            backgroundImage: '/assets/banner.png',
+            // Add a semi-transparent background color on top of the image.
+            // The color is specified in RGB format, and the alpha channel (opacity) is set to 0.4.
+            backgroundColor: [24, 24, 27, 0.4],
+            bgGradient: [[24, 24, 27]],
+            border: { color: [63, 63, 70], width: 20 },
+            padding: 120,
+        }
+    },
+})
\ No newline at end of file