From 1680bd02ad831841b5cbcd2eb155aab96cca0cc3 Mon Sep 17 00:00:00 2001
From: Vanilagy <1696106+Vanilagy@users.noreply.github.com>
Date: Sun, 3 May 2026 19:47:39 +0200
Subject: [PATCH] Holistic technical website cleanup

---
 docs/.vitepress/config.mts                 | 121 +++++++++++++++++++--
 docs/api-config.json                       |   1 +
 docs/blog.md                               |   2 +
 docs/blog/mediabunny-now-supports-hls.md   |   2 +
 docs/codec-registry/aac.md                 |   4 +
 docs/codec-registry/ac3.md                 |   4 +
 docs/codec-registry/alaw.md                |   4 +
 docs/codec-registry/av1.md                 |   4 +
 docs/codec-registry/avc.md                 |   4 +
 docs/codec-registry/eac3.md                |   4 +
 docs/codec-registry/flac.md                |   4 +
 docs/codec-registry/hevc.md                |   4 +
 docs/codec-registry/mp3.md                 |   4 +
 docs/codec-registry/opus.md                |   4 +
 docs/codec-registry/overview.md            |   4 +
 docs/codec-registry/pcm.md                 |   4 +
 docs/codec-registry/ulaw.md                |   4 +
 docs/codec-registry/vorbis.md              |   4 +
 docs/codec-registry/vp8.md                 |   4 +
 docs/codec-registry/vp9.md                 |   4 +
 docs/examples.md                           |   1 +
 docs/guide/converting-media-files.md       |   4 +
 docs/guide/extensions/aac-encoder.md       |   4 +
 docs/guide/extensions/ac3.md               |   4 +
 docs/guide/extensions/flac-encoder.md      |   4 +
 docs/guide/extensions/mp3-encoder.md       |   4 +
 docs/guide/input-formats.md                |   4 +
 docs/guide/installation.md                 |   4 +
 docs/guide/introduction.md                 |   4 +
 docs/guide/media-sinks.md                  |   4 +
 docs/guide/media-sources.md                |   4 +
 docs/guide/output-formats.md               |   4 +
 docs/guide/packets-and-samples.md          |   4 +
 docs/guide/quick-start.md                  |   4 +
 docs/guide/reading-hls.md                  |   4 +
 docs/guide/reading-media-files.md          |   4 +
 docs/guide/supported-formats-and-codecs.md |   4 +
 docs/guide/writing-hls.md                  |   1 +
 docs/guide/writing-media-files.md          |   4 +
 docs/index.md                              |  23 ++--
 docs/llms.md                               |   4 +
 examples/file-compression/index.html       |  18 ++-
 examples/hls-transcoding/index.html        |  18 ++-
 examples/live-recording/index.html         |  18 ++-
 examples/media-player/index.html           |  18 ++-
 examples/metadata-extraction/index.html    |  18 ++-
 examples/procedural-generation/index.html  |  18 ++-
 examples/thumbnail-generation/index.html   |  18 ++-
 scripts/generate-api-docs.ts               |  35 +++++-
 49 files changed, 407 insertions(+), 41 deletions(-)

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 1f87f8d..2ed0c09 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -1,3 +1,4 @@
+/* eslint-disable @stylistic/max-len */
 import { withMermaid } from 'vitepress-plugin-mermaid';
 import footnote from 'markdown-it-footnote';
 import tailwindcss from '@tailwindcss/vite';
@@ -7,9 +8,12 @@ import { HeadConfig } from 'vitepress';
 // @ts-ignore This file gets generated once docs:generate is run
 import apiRoutes from '../api/index.json';
 import m3u8Grammar from './m3u8-grammar.json' with { type: 'json' };
+import fs from 'node:fs/promises';
+import path from 'node:path';
 
 const DESCRIPTION = 'A JavaScript library for reading, writing, and converting media files. Directly in the browser,'
 	+ ' and faster than anybunny else.';
+const ORIGIN = 'https://mediabunny.dev';
 
 // https://vitepress.dev/reference/site-config
 export default withMermaid({
@@ -17,22 +21,31 @@ export default withMermaid({
 	description: DESCRIPTION,
 	cleanUrls: true,
 	sitemap: {
-		hostname: 'https://mediabunny.dev',
+		hostname: ORIGIN,
+		transformItems: async (items) => {
+			const entries = await fs.readdir('./examples');
+			for (const entry of entries) {
+				const isDirectory = await fs.stat(path.join('./examples', entry)).then(stat => stat.isDirectory());
+				if (isDirectory) {
+					items.push({
+						url: `/examples/${entry}/`, // With trailing slash
+					});
+				}
+			}
+
+			return items;
+		},
 	},
-	lastUpdated: true,
+	// lastUpdated: true,
 	head: [
 		['link', { rel: 'icon', type: 'image/png', href: '/mediabunny-logo.png' }],
 		['link', { rel: 'icon', type: 'image/svg+xml', href: '/mediabunny-logo.svg' }],
-		['meta', { property: 'og:type', content: 'website' }],
 		['meta', { property: 'og:site_name', content: 'Mediabunny' }],
-		['meta', { property: 'og:url', content: 'https://mediabunny.dev/' }],
-		['meta', { property: 'og:image', content: 'https://mediabunny.dev/mediabunny-og-image.png' }],
+		['meta', { property: 'og:image', content: `${ORIGIN}/mediabunny-og-image.png` }],
 		['meta', { property: 'og:locale', content: 'en-US' }],
-		['meta', { property: 'og:description', content: DESCRIPTION }],
-		['meta', { name: 'twitter:image', content: 'https://mediabunny.dev/mediabunny-og-image.png' }],
+		['meta', { name: 'twitter:image', content: `${ORIGIN}/mediabunny-og-image.png` }],
 		['meta', { name: 'twitter:card', content: 'summary_large_image' }],
 		['meta', { name: 'twitter:site', content: '@vanilagy' }],
-		['meta', { name: 'twitter:description', content: DESCRIPTION }],
 	],
 	themeConfig: {
 		logo: '/mediabunny-logo.svg',
@@ -40,12 +53,12 @@ export default withMermaid({
 		// https://vitepress.dev/reference/default-theme-config
 		nav: [
 			{ text: 'Guide', link: '/guide/introduction', activeMatch: '/guide' },
-			{ text: 'API', link: '/api', activeMatch: '/api' },
+			{ text: 'API', link: '/api/', activeMatch: '/api/' }, // Trailing slash because it's index.html from there
 			{ text: 'LLMs', link: '/llms', activeMatch: '/llms' },
 			{ text: 'Examples', link: '/examples', activeMatch: '/examples' },
 			{ text: 'Blog', link: '/blog', activeMatch: '/blog' },
 			{ text: 'Sponsors', link: '/#sponsors', activeMatch: '/#sponsors' },
-			{ text: 'License', link: 'https://github.com/Vanilagy/mediabunny#license' },
+			{ text: 'License', link: 'https://github.com/Vanilagy/mediabunny#license', rel: 'noopener' },
 			{
 				text: 'More',
 				items: [
@@ -186,6 +199,8 @@ export default withMermaid({
 			llmstxt({
 				ignoreFiles: [
 					'api/*',
+					'examples.md',
+					'llms.md',
 				],
 			}),
 		],
@@ -196,14 +211,96 @@ export default withMermaid({
 		if (title !== 'Mediabunny') {
 			title += ' | Mediabunny';
 		}
-		const canonicalUrl = `https://mediabunny.dev/${pageData.relativePath}`
+
+		const canonicalUrl = `${ORIGIN}/${pageData.relativePath}`
 			.replace(/index\.md$/, '')
 			.replace(/\.md$/, '');
+		const isBlogPost = canonicalUrl.includes('/blog/');
+
+		const breadcrumbs: object[] = [];
+
+		if (canonicalUrl.includes('/guide/')) {
+			breadcrumbs.push({
+				'@type': 'ListItem',
+				'position': 1,
+				'name': 'Guide',
+				'item': `${ORIGIN}/guide`,
+			}, {
+				'@type': 'ListItem',
+				'position': 2,
+				'name': pageData.title,
+			});
+		}
+
+		if (canonicalUrl.includes('/api/')) {
+			breadcrumbs.push({
+				'@type': 'ListItem',
+				'position': 1,
+				'name': 'API docs',
+				'item': `${ORIGIN}/api/`,
+			}, {
+				'@type': 'ListItem',
+				'position': 2,
+				'name': pageData.title,
+			});
+		}
+
+		if (canonicalUrl.includes('/codec-registry/')) {
+			breadcrumbs.push({
+				'@type': 'ListItem',
+				'position': 1,
+				'name': 'Codec registry',
+				'item': `${ORIGIN}/codec-registry/overview`,
+			}, {
+				'@type': 'ListItem',
+				'position': 2,
+				'name': pageData.title,
+			});
+		}
 
 		((pageData.frontmatter['head'] ??= []) as HeadConfig[]).push(
+			['meta', { property: 'og:type', content: isBlogPost ? 'article' : 'website' }],
 			['meta', { property: 'og:title', content: title }],
-			['meta', { property: 'twitter:title', content: title }],
+			['meta', { property: 'og:description', content: pageData.description || DESCRIPTION }],
+			['meta', { property: 'og:url', content: canonicalUrl }],
+			['meta', { name: 'twitter:title', content: title }],
+			['meta', { name: 'twitter:description', content: pageData.description || DESCRIPTION }],
 			['link', { rel: 'canonical', href: canonicalUrl }],
 		);
+
+		if (isBlogPost) {
+			((pageData.frontmatter['head'] ??= []) as HeadConfig[]).push(
+				['meta', { property: 'article:published_time', content: String(pageData.frontmatter['publishedOnIso']) }],
+				['meta', { property: 'article:author', content: String(pageData.frontmatter['author']) }],
+			);
+
+			breadcrumbs.push({
+				'@type': 'ListItem',
+				'position': 1,
+				'name': 'Blog posts',
+				'item': `${ORIGIN}/blog`,
+			}, {
+				'@type': 'ListItem',
+				'position': 2,
+				'name': pageData.title,
+			});
+		}
+
+		if (breadcrumbs.length > 0) {
+			((pageData.frontmatter['head'] ??= []) as HeadConfig[]).push(
+				['script', { type: 'application/ld+json' }, JSON.stringify({
+					'@context': 'https://schema.org',
+					'@type': 'BreadcrumbList',
+					'itemListElement': breadcrumbs,
+				})],
+			);
+		}
+	},
+	buildEnd: async () => {
+		const files = await fs.readdir('./docs/api');
+
+		for (const file of files) {
+			await fs.copyFile('./docs/api/' + file, './dist-docs/api/' + file);
+		}
 	},
 });
diff --git a/docs/api-config.json b/docs/api-config.json
index e17a21a..07644e2 100644
--- a/docs/api-config.json
+++ b/docs/api-config.json
@@ -1,6 +1,7 @@
 {
     "heading": "Mediabunny API reference",
     "intro": "Here you can find detailed documentation for all classes, functions, constants and types exposed by Mediabunny's public API.",
+	"description": "Detailed documentation for all classes, functions, constants and types exposed by Mediabunny's public API.",
 
     "Samples": "Raw, unencoded chunks of media data, such as video frames or sections of audio.",
     "Packets": "Chunks of encoded media data.",
diff --git a/docs/blog.md b/docs/blog.md
index 481d05b..c79f259 100644
--- a/docs/blog.md
+++ b/docs/blog.md
@@ -1,4 +1,6 @@
 ---
+title: Blog posts
+description: Announcements, news, and devblogs about Mediabunny.
 outline: false
 ---
 
diff --git a/docs/blog/mediabunny-now-supports-hls.md b/docs/blog/mediabunny-now-supports-hls.md
index b9f0d39..8701ff2 100644
--- a/docs/blog/mediabunny-now-supports-hls.md
+++ b/docs/blog/mediabunny-now-supports-hls.md
@@ -1,6 +1,8 @@
 ---
 title: Mediabunny now supports HLS!
+description: Mediabunny v1.42.0 adds read/write support for HTTP Live Streaming (HLS), pushing the frontier of fully client-side media processing.
 publishedOn: April 24, 2026
+publishedOnIso: "2026-04-24"
 author: Vanilagy
 authorImage: /vani.png
 authorLink: https://github.com/Vanilagy
diff --git a/docs/codec-registry/aac.md b/docs/codec-registry/aac.md
index 5d8be50..e53b0ab 100644
--- a/docs/codec-registry/aac.md
+++ b/docs/codec-registry/aac.md
@@ -1,3 +1,7 @@
+---
+description: Advanced Audio Coding (AAC) audio codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/ac3.md b/docs/codec-registry/ac3.md
index ea0ea54..08f97ba 100644
--- a/docs/codec-registry/ac3.md
+++ b/docs/codec-registry/ac3.md
@@ -1,3 +1,7 @@
+---
+description: Dolby Digital (AC-3) audio codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/alaw.md b/docs/codec-registry/alaw.md
index 40a5f3d..29a32f4 100644
--- a/docs/codec-registry/alaw.md
+++ b/docs/codec-registry/alaw.md
@@ -1,3 +1,7 @@
+---
+description: A-law companded PCM audio codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/av1.md b/docs/codec-registry/av1.md
index a0fa961..95a4b36 100644
--- a/docs/codec-registry/av1.md
+++ b/docs/codec-registry/av1.md
@@ -1,3 +1,7 @@
+---
+description: AOMedia Video 1 (AV1) video codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/avc.md b/docs/codec-registry/avc.md
index 620be2e..3bef0c7 100644
--- a/docs/codec-registry/avc.md
+++ b/docs/codec-registry/avc.md
@@ -1,3 +1,7 @@
+---
+description: Advanced Video Coding (H.264) video codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/eac3.md b/docs/codec-registry/eac3.md
index b2910e9..6d94d1b 100644
--- a/docs/codec-registry/eac3.md
+++ b/docs/codec-registry/eac3.md
@@ -1,3 +1,7 @@
+---
+description: Dolby Digital Plus (E-AC-3) audio codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/flac.md b/docs/codec-registry/flac.md
index f6ee25c..41daf9d 100644
--- a/docs/codec-registry/flac.md
+++ b/docs/codec-registry/flac.md
@@ -1,3 +1,7 @@
+---
+description: Free Lossless Audio Codec (FLAC) audio codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/hevc.md b/docs/codec-registry/hevc.md
index 901f2c5..5d3111c 100644
--- a/docs/codec-registry/hevc.md
+++ b/docs/codec-registry/hevc.md
@@ -1,3 +1,7 @@
+---
+description: High Efficiency Video Coding (H.265) video codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/mp3.md b/docs/codec-registry/mp3.md
index 1f74a09..c4ef452 100644
--- a/docs/codec-registry/mp3.md
+++ b/docs/codec-registry/mp3.md
@@ -1,3 +1,7 @@
+---
+description: MP3 (MPEG-1/2 Audio Layer III) audio codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/opus.md b/docs/codec-registry/opus.md
index a091b9f..45f5da2 100644
--- a/docs/codec-registry/opus.md
+++ b/docs/codec-registry/opus.md
@@ -1,3 +1,7 @@
+---
+description: Opus audio codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/overview.md b/docs/codec-registry/overview.md
index 691a8a9..cee3639 100644
--- a/docs/codec-registry/overview.md
+++ b/docs/codec-registry/overview.md
@@ -1,3 +1,7 @@
+---
+description: The Mediabunny Codec Registry formalizes the precise definitions of all video and audio codecs supported by Mediabunny, like expected codec string and packet data format.
+---
+
 # Mediabunny Codec Registry
 
 The Mediabunny Codec Registry formalizes the precise definitions of all video and audio codecs supported by Mediabunny. More specifically, for any given codec, it describes the format that `EncodedPacket`, `VideoDecoderConfig` and `AudioDecoderConfig` must adhere to. All packets coming out of or going into Mediabunny are expected to adhere to this registry.
diff --git a/docs/codec-registry/pcm.md b/docs/codec-registry/pcm.md
index a06a9b5..dc6b28e 100644
--- a/docs/codec-registry/pcm.md
+++ b/docs/codec-registry/pcm.md
@@ -1,3 +1,7 @@
+---
+description: PCM audio codec definitions, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/ulaw.md b/docs/codec-registry/ulaw.md
index beb1146..d95a8b7 100644
--- a/docs/codec-registry/ulaw.md
+++ b/docs/codec-registry/ulaw.md
@@ -1,3 +1,7 @@
+---
+description: μ-law companded PCM audio codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/vorbis.md b/docs/codec-registry/vorbis.md
index 9867d9c..65252ad 100644
--- a/docs/codec-registry/vorbis.md
+++ b/docs/codec-registry/vorbis.md
@@ -1,3 +1,7 @@
+---
+description: Vorbis audio codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/vp8.md b/docs/codec-registry/vp8.md
index 13e8c90..5847833 100644
--- a/docs/codec-registry/vp8.md
+++ b/docs/codec-registry/vp8.md
@@ -1,3 +1,7 @@
+---
+description: VP8 video codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/codec-registry/vp9.md b/docs/codec-registry/vp9.md
index e3d98b9..ca51fe4 100644
--- a/docs/codec-registry/vp9.md
+++ b/docs/codec-registry/vp9.md
@@ -1,3 +1,7 @@
+---
+description: VP9 video codec definition, defining legal codec strings, decoder configs, and packet data formats.
+---
+
 <script setup>
 import { VPBadge } from 'vitepress/theme'
 </script>
diff --git a/docs/examples.md b/docs/examples.md
index 42f4b61..9b8cf34 100644
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -1,4 +1,5 @@
 ---
+description: "Demos showcasing the various features of Mediabunny: metadata extraction, thumbnail generation, compression, media playback, live streaming, and more."
 layout: home
 title: Examples
 
diff --git a/docs/guide/converting-media-files.md b/docs/guide/converting-media-files.md
index 05c894e..4067d29 100644
--- a/docs/guide/converting-media-files.md
+++ b/docs/guide/converting-media-files.md
@@ -1,3 +1,7 @@
+---
+description: Efficiently convert any media file to any format, directly in the browser. Optionally apply trimming, video resizing, rotation, custom overlays, and more.
+---
+
 # Converting media files
 
 The [reading](./reading-media-files) and [writing](./writing-media-files) primitives in Mediabunny provide everything you need to convert media files. However, since this is such a common operation and the details can be tricky, Mediabunny ships with a built-in file conversion abstraction.
diff --git a/docs/guide/extensions/aac-encoder.md b/docs/guide/extensions/aac-encoder.md
index a8b3488..5bc3237 100644
--- a/docs/guide/extensions/aac-encoder.md
+++ b/docs/guide/extensions/aac-encoder.md
@@ -1,3 +1,7 @@
+---
+description: The @mediabunny/aac-encoder extension provides a fast AAC encoder polyfill for use in the browser and on the server.
+---
+
 # @mediabunny/aac-encoder
 
 Some browsers lack support for AAC encoding in their WebCodecs implementations. This extension package provides a reliable AAC-LC encoder for use with Mediabunny. It is implemented using Mediabunny's [custom coder API](../supported-formats-and-codecs#custom-coders) and uses a fast, size-optimized WASM build of [FFmpeg](https://ffmpeg.org/)'s AAC encoder under the hood.
diff --git a/docs/guide/extensions/ac3.md b/docs/guide/extensions/ac3.md
index e3167e5..35bfad0 100644
--- a/docs/guide/extensions/ac3.md
+++ b/docs/guide/extensions/ac3.md
@@ -1,3 +1,7 @@
+---
+description: The @mediabunny/ac3 extension provides fast AC-3 and E-AC-3 decoders and encoders for both browser and server environments.
+---
+
 # @mediabunny/ac3
 
 Browsers have no support for AC-3 (Dolby Digital) or E-AC-3 (Dolby Digital Plus) in their WebCodecs implementations. This extension package provides both a decoder and encoder for use with Mediabunny, allowing you to decode and encode these codecs directly in the browser. It is implemented using Mediabunny's [custom coder API](../supported-formats-and-codecs#custom-coders) and uses a fast, size-optimized WASM build of [FFmpeg](https://ffmpeg.org/)'s AC-3 and E-AC-3 coders under the hood.
diff --git a/docs/guide/extensions/flac-encoder.md b/docs/guide/extensions/flac-encoder.md
index 34ae4d7..c36af5d 100644
--- a/docs/guide/extensions/flac-encoder.md
+++ b/docs/guide/extensions/flac-encoder.md
@@ -1,3 +1,7 @@
+---
+description: The @mediabunny/flac-encoder extension provides a highly-performant FLAC encoder polyfill for use in the browser and on the server.
+---
+
 # @mediabunny/flac-encoder
 
 No browser currently supports FLAC encoding in their WebCodecs implementations. This extension package provides a reliable FLAC encoder for use with Mediabunny. It is implemented using Mediabunny's [custom coder API](../supported-formats-and-codecs#custom-coders) and uses a fast, size-optimized WASM build of [libFLAC](https://github.com/xiph/flac) under the hood.
diff --git a/docs/guide/extensions/mp3-encoder.md b/docs/guide/extensions/mp3-encoder.md
index 64a32b4..6965c56 100644
--- a/docs/guide/extensions/mp3-encoder.md
+++ b/docs/guide/extensions/mp3-encoder.md
@@ -1,3 +1,7 @@
+---
+description: The @mediabunny/mp3-encoder extension provides a highly-performant MP3 encoder polyfill for use in the browser and on the server.
+---
+
 # @mediabunny/mp3-encoder
 
 Browsers typically have no support for MP3 encoding in their WebCodecs implementations. Given the ubiquity of the format, this extension package provides an MP3 encoder for use with Mediabunny. It is implemented using Mediabunny's [custom coder API](../supported-formats-and-codecs#custom-coders) and uses a highly-performant WASM build of the [LAME MP3 Encoder](https://lame.sourceforge.io/) under the hood.
diff --git a/docs/guide/input-formats.md b/docs/guide/input-formats.md
index 149f8a9..fc47e3e 100644
--- a/docs/guide/input-formats.md
+++ b/docs/guide/input-formats.md
@@ -1,3 +1,7 @@
+---
+description: Mediabunny supports a wide range of media input formats, such as MP4, WebM, MP3, HLS, and many more.
+---
+
 # Input formats
 
 Mediabunny supports a wide variety of commonly used container formats for reading input files. These *input formats* are used in two ways:
diff --git a/docs/guide/installation.md b/docs/guide/installation.md
index fb08176..67abf2a 100644
--- a/docs/guide/installation.md
+++ b/docs/guide/installation.md
@@ -1,3 +1,7 @@
+---
+description: Install Mediabunny using npm (or your favorite package manager), or include it directly as a <script> tag.
+---
+
 # Installation
 
 Install Mediabunny using your favorite package manager:
diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md
index 7723a70..797db50 100644
--- a/docs/guide/introduction.md
+++ b/docs/guide/introduction.md
@@ -1,3 +1,7 @@
+---
+description: Mediabunny is a zero-dependency, tree-shakable TypeScript library for reading, writing and converting media files in the browser. Like FFmpeg, but for the web.
+---
+
 # Introduction
 
 Mediabunny is a JavaScript library for reading, writing, and converting media files (like MP4 or WebM), directly in the browser. It aims to be a complete toolkit for high-performance media operations on the web. It's written from scratch in pure TypeScript, has zero dependencies, and is extremely tree-shakable, meaning you only include what you use. You can think of it a bit like [FFmpeg](https://ffmpeg.org/), but built for the web's needs.
diff --git a/docs/guide/media-sinks.md b/docs/guide/media-sinks.md
index d7ed205..aed2ce2 100644
--- a/docs/guide/media-sinks.md
+++ b/docs/guide/media-sinks.md
@@ -1,3 +1,7 @@
+---
+description: Media sinks enable different ways to extract video and audio data from files, from built-in decoding to manual per-packet control.
+---
+
 # Media sinks
 
 ## Introduction
diff --git a/docs/guide/media-sources.md b/docs/guide/media-sources.md
index 15bf045..7949261 100644
--- a/docs/guide/media-sources.md
+++ b/docs/guide/media-sources.md
@@ -1,3 +1,7 @@
+---
+description: Media sources enable multiple ways to add media data to new media files, from built-in encoding to manual per-packet control.
+---
+
 # Media sources
 
 ## Introduction
diff --git a/docs/guide/output-formats.md b/docs/guide/output-formats.md
index 17cd23e..b305528 100644
--- a/docs/guide/output-formats.md
+++ b/docs/guide/output-formats.md
@@ -1,3 +1,7 @@
+---
+description: Mediabunny can write a wide range of media output formats, including MP4, WebM, MP3, HLS, and many more.
+---
+
 # Output formats
 
 ## Introduction
diff --git a/docs/guide/packets-and-samples.md b/docs/guide/packets-and-samples.md
index 85247ee..167218d 100644
--- a/docs/guide/packets-and-samples.md
+++ b/docs/guide/packets-and-samples.md
@@ -1,3 +1,7 @@
+---
+description: Learn about how packets carry encoded media data, samples carry raw decoded media data, and the operations you can perform on them.
+---
+
 # Packets & samples
 
 ## Introduction
diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md
index 18cd962..cfd85ee 100644
--- a/docs/guide/quick-start.md
+++ b/docs/guide/quick-start.md
@@ -1,3 +1,7 @@
+---
+description: A collection of short code snippets that showcase the most common operations that Mediabunny can do.
+---
+
 # Quick start
 
 This page is a collection of short code snippets that showcase the most common operations you may use this library for.
diff --git a/docs/guide/reading-hls.md b/docs/guide/reading-hls.md
index 440b440..76a3988 100644
--- a/docs/guide/reading-hls.md
+++ b/docs/guide/reading-hls.md
@@ -1,3 +1,7 @@
+---
+description: Use Mediabunny to read HLS (.m3u8) playlists, both VOD and live. Extract tracks, metadata, and media data efficiently and with precise control.
+---
+
 # Reading HLS
 
 Mediabunny has full support for reading HLS (.m3u8) playlists, both VOD and live. This page will go into HLS-specific behavior and advice. For general information about how to read any media file (including HLS) in Mediabunny, refer to [Reading media files](./reading-media-files).
diff --git a/docs/guide/reading-media-files.md b/docs/guide/reading-media-files.md
index 590f235..3c44b80 100644
--- a/docs/guide/reading-media-files.md
+++ b/docs/guide/reading-media-files.md
@@ -1,3 +1,7 @@
+---
+description: Efficiently extract metadata, video frames, and audio samples from any media file, such as MP4 or WebM.
+---
+
 # Reading media files
 
 Mediabunny allows you to read media files with great control and efficiency. You can use it to extract metadata (such as duration or resolution), as well as to read actual media data from video and audio tracks with frame-accurate timing. Many commonly used [input file formats](./input-formats) are supported. Using [input sources](#input-sources), data can be read from multiple sources, such as directly from memory, from the user's disk, or even over the network.
diff --git a/docs/guide/supported-formats-and-codecs.md b/docs/guide/supported-formats-and-codecs.md
index cb825f3..1ce556d 100644
--- a/docs/guide/supported-formats-and-codecs.md
+++ b/docs/guide/supported-formats-and-codecs.md
@@ -1,3 +1,7 @@
+---
+description: Mediabunny supports a wide range of media container formats (.mp4, .webm, .mp3, .wav, .m3u8, ...) and video/audio codecs (H.264, HEVC, VP9, AV1, AAC, Opus, FLAC, ...).
+---
+
 # Supported formats & codecs
  
 ## Container formats
diff --git a/docs/guide/writing-hls.md b/docs/guide/writing-hls.md
index 5a2dc9f..e9a8659 100644
--- a/docs/guide/writing-hls.md
+++ b/docs/guide/writing-hls.md
@@ -1,4 +1,5 @@
 ---
+description: Mediabunny can create new HLS (.m3u8) playlists directly in the browser, both VOD and live. Define tracks, add media data, and upload directly to a server.
 outline: [2, 4]
 ---
 
diff --git a/docs/guide/writing-media-files.md b/docs/guide/writing-media-files.md
index 9cbbdea..97f5097 100644
--- a/docs/guide/writing-media-files.md
+++ b/docs/guide/writing-media-files.md
@@ -1,3 +1,7 @@
+---
+description: Use Mediabunny to create new video and audio files of any size directly in the browser, and with full control over frame timing, tracks, and more.
+---
+
 # Writing media files
 
 Mediabunny enables you to create media files with very fine levels of control. You can add an arbitrary number of video, audio and subtitle tracks to a media file, and precisely control the timing of media data. This library supports [many output file formats](./output-formats). Using [output targets](#output-targets), you can decide if you want to build up the entire file in memory or stream it out in chunks as it's being created - allowing you to create very large files.
diff --git a/docs/index.md b/docs/index.md
index d26a421..94351ff 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,7 +1,8 @@
 ---
 layout: home
 
-title: Mediabunny
+title: Mediabunny — A complete JavaScript media toolkit for the browser
+titleTemplate: false
 
 hero:
     name: Mediabunny
@@ -155,7 +156,7 @@ const sponsors = {
 		<p class="!my-0 flex-1 text-sm !leading-6">{{ quote.quote }}</p>
 		<div class="shrink-0 flex gap-2 items-center mt-1.5">
 			<a :href="quote.url" target="_blank">
-				<img :src="quote.image" class="size-8 rounded-full shrink-0" alt="Author image">
+				<img :src="quote.image" class="size-8 rounded-full shrink-0" :alt="quote.author">
 			</a>
 			<p class="!my-0 flex-1 text-xs font-medium">{{ quote.author }}</p>
 		</div>
@@ -173,7 +174,7 @@ npm install mediabunny
 <div class="space-y-16 mt-18">
 <div class="flex flex-col lg:flex-row lg:gap-20 lg:items-center">
 <div class="flex-1 min-w-0">
-<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Read any media file, efficiently</h1>
+<h2 class="inline-block !text-[32px] !border-0 !m-0 !p-0 !leading-[40px]" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Read any media file, efficiently</h2>
 <p class="text-lg">Mediabunny allows you efficiently read data from any video or audio file, no matter the size: duration, resolution, rotation, tracks, codecs and other metadata, as well as raw or decoded media data from anywhere in the file. Load only what you need.</p>
 <a class="!no-underline inline-flex items-center gap-1.5" :no-icon="true" href="/guide/reading-media-files">
 	Docs
@@ -249,7 +250,7 @@ const { buffer } = output.target; // Contains the final file
 
 </div>
 <div class="flex-1 min-w-0">
-<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Create new media files, programmatically</h1>
+<h2 class="inline-block !text-[32px] !border-0 !m-0 !p-0 !leading-[40px]" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Create new media files, programmatically</h2>
 <p class="text-lg">Generate new media files (such as MP4 or WebM) directly on the client, and as fast as the hardware allows. Add multiple video, audio, or subtitle tracks, and have precise control down to the microsecond.</p>
 <a class="!no-underline inline-flex items-center gap-1.5" :no-icon="true" href="/guide/writing-media-files">
 	Docs
@@ -260,7 +261,7 @@ const { buffer } = output.target; // Contains the final file
 
 <div class="flex flex-col lg:flex-row lg:gap-20 lg:items-center">
 <div class="flex-1 min-w-0">
-<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Hopping-fast file conversion</h1>
+<h2 class="inline-block !text-[32px] !border-0 !m-0 !p-0 !leading-[40px]" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Hopping-fast file conversion</h2>
 <p class="text-lg">Use the Conversion API to transform any media file into any other media file: perform transmuxing, transcoding, resizing, rotation, audio resampling, trimming, and more.</p>
 <a class="!no-underline inline-flex items-center gap-1.5" :no-icon="true" href="/guide/converting-media-files">
 	Docs
@@ -296,14 +297,14 @@ await conversion.execute();
 <img class="relative" src="./assets/inspiring-io.svg">
 </div>
 <div class="flex-1 min-w-0">
-<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Universal I/O</h1>
+<h2 class="inline-block !text-[32px] !border-0 !m-0 !p-0 !leading-[40px]" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Universal I/O</h2>
 <p class="text-lg">Read and write files from and to memory, disk, or the network. Create files for offline use, or live-stream them as they're being created. Inject media data from a canvas, webcam, screen, microphone, audio buffer, your own encoding stack, or whatever. It's all up to you.</p>
 </div>
 </div>
 
 <div class="flex flex-col lg:flex-row gap-4 lg:gap-20 lg:items-center">
 <div class="flex-1 min-w-0">
-<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Wide container & codec support</h1>
+<h2 class="inline-block !text-[32px] !border-0 !m-0 !p-0 !leading-[40px]" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Wide container & codec support</h2>
 <p class="text-lg">Mediabunny supports many commonly used container formats and a wide variety of video and audio codecs. And all of them bidirectionally, too! (that means for reading and writing)</p>
 <a class="!no-underline inline-flex items-center gap-1.5" :no-icon="true" href="/guide/supported-formats-and-codecs">
 	See full list
@@ -329,14 +330,14 @@ await conversion.execute();
 	<p class="!my-0 text-center text-[10px] opacity-50 !leading-4">Reading BigBuckBunny1080pH264.mov (691 MiB) from disk<br>Ryzen 7600X, RTX 4070, NVMe SSD, measured 2025-06-22</p>
 </div>
 <div class="flex-1 min-w-0">
-<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">High performance</h1>
+<h2 class="inline-block !text-[32px] !border-0 !m-0 !p-0 !leading-[40px]" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">High performance</h2>
 <p class="text-lg">By reading only what you need, writing progressively, utilizing hardware-accelerated encoding and decoding via the WebCodecs API, and using a pipelined design, Mediabunny is able to get the job done fast.</p>
 </div>
 </div>
 
 <div class="flex flex-col lg:flex-row gap-4 lg:gap-20 lg:items-center">
 <div class="flex-1 min-w-0">
-<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Built from scratch, for the web</h1>
+<h2 class="inline-block !text-[32px] !border-0 !m-0 !p-0 !leading-[40px]" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Built from scratch, for the web</h2>
 <p class="text-lg">Mediabunny is 100% implemented in TypeScript and has zero dependencies. Its API was designed to be highly tree-shakable, meaning you only include what you use.</p>
 </div>
 <div class="space-y-2 flex-1 min-w-0">
@@ -369,10 +370,10 @@ await conversion.execute();
 <hr class="!my-16" />
 
 <div class="flex flex-col items-center">
-	<h1 id="sponsors" class="flex items-center gap-4" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">
+	<h2 id="sponsors" class="flex items-center gap-4 !text-[32px] !border-0 !m-0 !p-0 !leading-[40px]" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">
 		Made possible by you
 		<img class="size-8" src="./assets/fluent-emoji--heart-suit.svg">
-	</h1>
+	</h2>
 	<p class="max-w-2xl">Mediabunny is an open-source project released under the <a href="https://choosealicense.com/licenses/mpl-2.0/" target="_blank">MPL-2.0</a> and is therefore free to use for any purpose, including closed-source commercial use. A permissive license is essential for a foundational library like this to truly thrive. That said, this project requires an immense amount of work and care. This is made possible by the generous financial backing of these awesome sponsors:</p>
 	<template v-if="sponsors.gold.length > 0">
 		<h3 class="!text-3xl">Gold sponsors</h3>
diff --git a/docs/llms.md b/docs/llms.md
index c01c4d2..a64716d 100644
--- a/docs/llms.md
+++ b/docs/llms.md
@@ -1,3 +1,7 @@
+---
+description: Teach Claude Code, Codex, Cursor, Copilot or any other AI coding agent how to make full use of Mediabunny.
+---
+
 # Mediabunny and LLMs
 
 <div class="grid place-items-center my-14">
diff --git a/examples/file-compression/index.html b/examples/file-compression/index.html
index 43a5ec3..5725b57 100644
--- a/examples/file-compression/index.html
+++ b/examples/file-compression/index.html
@@ -1,15 +1,29 @@
 <!DOCTYPE html>
-<html lang="en" translate="no">
+<html lang="en-US" translate="no">
 	<head>
-		<meta charset="UTF-8">
+		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>File compression example | Mediabunny</title>
+		<meta name="description" content="Select or drop a media file, and Mediabunny will convert it to a heavily-compressed MP4 file.">
 		<script type="module" src="../base.ts"></script>
 		<script type="module" src="./file-compression.ts"></script>
 		<link rel="stylesheet" href="../base.css">
 		<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
 		<link rel="canonical" href="https://mediabunny.dev/examples/file-compression/">
+		<meta property="og:site_name" content="Mediabunny">
+		<meta property="og:type" content="website">
+		<meta property="og:title" content="File compression example | Mediabunny">
+		<meta property="og:description" content="Select or drop a media file, and Mediabunny will convert it to a heavily-compressed MP4 file.">
+		<meta property="og:url" content="https://mediabunny.dev/examples/file-compression/">
+		<meta property="og:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<meta property="og:locale" content="en-US">
+		<meta name="twitter:card" content="summary_large_image">
+		<meta name="twitter:site" content="@vanilagy">
+		<meta name="twitter:title" content="File compression example | Mediabunny">
+		<meta name="twitter:description" content="Select or drop a media file, and Mediabunny will convert it to a heavily-compressed MP4 file.">
+		<meta name="twitter:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Examples","item":"https://mediabunny.dev/examples"},{"@type":"ListItem","position":2,"name":"File compression"}]}</script>
 	</head>
 
 	<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
diff --git a/examples/hls-transcoding/index.html b/examples/hls-transcoding/index.html
index 0187730..0cc49f0 100644
--- a/examples/hls-transcoding/index.html
+++ b/examples/hls-transcoding/index.html
@@ -1,15 +1,29 @@
 <!DOCTYPE html>
-<html lang="en" translate="no">
+<html lang="en-US" translate="no">
 	<head>
-		<meta charset="UTF-8">
+		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>HLS transcoding example | Mediabunny</title>
+		<meta name="description" content="Select a directory, then a video. Mediabunny will create a complete HLS VOD package with five video renditions and one audio track.">
 		<script type="module" src="../base.ts"></script>
 		<script type="module" src="./hls-transcoding.ts"></script>
 		<link rel="stylesheet" href="../base.css">
 		<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
 		<link rel="canonical" href="https://mediabunny.dev/examples/hls-transcoding/">
+		<meta property="og:site_name" content="Mediabunny">
+		<meta property="og:type" content="website">
+		<meta property="og:title" content="HLS transcoding example | Mediabunny">
+		<meta property="og:description" content="Select a directory, then a video. Mediabunny will create a complete HLS VOD package with five video renditions and one audio track.">
+		<meta property="og:url" content="https://mediabunny.dev/examples/hls-transcoding/">
+		<meta property="og:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<meta property="og:locale" content="en-US">
+		<meta name="twitter:card" content="summary_large_image">
+		<meta name="twitter:site" content="@vanilagy">
+		<meta name="twitter:title" content="HLS transcoding example | Mediabunny">
+		<meta name="twitter:description" content="Select a directory, then a video. Mediabunny will create a complete HLS VOD package with five video renditions and one audio track.">
+		<meta name="twitter:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Examples","item":"https://mediabunny.dev/examples"},{"@type":"ListItem","position":2,"name":"HLS transcoding"}]}</script>
 	</head>
 
 	<body class="flex flex-col items-center bg-zinc-50 px-2 py-10 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200">
diff --git a/examples/live-recording/index.html b/examples/live-recording/index.html
index d550fdf..103abb9 100644
--- a/examples/live-recording/index.html
+++ b/examples/live-recording/index.html
@@ -1,15 +1,29 @@
 <!DOCTYPE html>
-<html lang="en" translate="no">
+<html lang="en-US" translate="no">
 	<head>
-		<meta charset="UTF-8">
+		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>Live recording & streaming example | Mediabunny</title>
+		<meta name="description" content="The live canvas state and your microphone input will be written into a fragmented MP4 file and live-streamed to a &lt;video&gt; element.">
 		<script type="module" src="../base.ts"></script>
 		<script type="module" src="./live-recording.ts"></script>
 		<link rel="stylesheet" href="../base.css">
 		<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
 		<link rel="canonical" href="https://mediabunny.dev/examples/live-recording/">
+		<meta property="og:site_name" content="Mediabunny">
+		<meta property="og:type" content="website">
+		<meta property="og:title" content="Live recording & streaming example | Mediabunny">
+		<meta property="og:description" content="The live canvas state and your microphone input will be written into a fragmented MP4 file and live-streamed to a &lt;video&gt; element.">
+		<meta property="og:url" content="https://mediabunny.dev/examples/live-recording/">
+		<meta property="og:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<meta property="og:locale" content="en-US">
+		<meta name="twitter:card" content="summary_large_image">
+		<meta name="twitter:site" content="@vanilagy">
+		<meta name="twitter:title" content="Live recording & streaming example | Mediabunny">
+		<meta name="twitter:description" content="The live canvas state and your microphone input will be written into a fragmented MP4 file and live-streamed to a &lt;video&gt; element.">
+		<meta name="twitter:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Examples","item":"https://mediabunny.dev/examples"},{"@type":"ListItem","position":2,"name":"Live recording & streaming"}]}</script>
 	</head>
 
 	<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
diff --git a/examples/media-player/index.html b/examples/media-player/index.html
index e025918..563c286 100644
--- a/examples/media-player/index.html
+++ b/examples/media-player/index.html
@@ -1,15 +1,29 @@
 <!DOCTYPE html>
-<html lang="en" translate="no">
+<html lang="en-US" translate="no">
 	<head>
-		<meta charset="UTF-8">
+		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>Media player example | Mediabunny</title>
+		<meta name="description" content="Select or drop a media file, and a fully custom, Mediabunny-powered player will appear.">
 		<script type="module" src="../base.ts"></script>
 		<script type="module" src="./media-player.ts"></script>
 		<link rel="stylesheet" href="../base.css">
 		<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
 		<link rel="canonical" href="https://mediabunny.dev/examples/media-player/">
+		<meta property="og:site_name" content="Mediabunny">
+		<meta property="og:type" content="website">
+		<meta property="og:title" content="Media player example | Mediabunny">
+		<meta property="og:description" content="Select or drop a media file, and a fully custom, Mediabunny-powered player will appear.">
+		<meta property="og:url" content="https://mediabunny.dev/examples/media-player/">
+		<meta property="og:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<meta property="og:locale" content="en-US">
+		<meta name="twitter:card" content="summary_large_image">
+		<meta name="twitter:site" content="@vanilagy">
+		<meta name="twitter:title" content="Media player example | Mediabunny">
+		<meta name="twitter:description" content="Select or drop a media file, and a fully custom, Mediabunny-powered player will appear.">
+		<meta name="twitter:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Examples","item":"https://mediabunny.dev/examples"},{"@type":"ListItem","position":2,"name":"Media player"}]}</script>
 	</head>
 
 	<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2 h-svh">
diff --git a/examples/metadata-extraction/index.html b/examples/metadata-extraction/index.html
index 94b9bb7..b6a772e 100644
--- a/examples/metadata-extraction/index.html
+++ b/examples/metadata-extraction/index.html
@@ -1,15 +1,29 @@
 <!DOCTYPE html>
-<html lang="en" translate="no">
+<html lang="en-US" translate="no">
 	<head>
-		<meta charset="UTF-8">
+		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>Metadata extraction example | Mediabunny</title>
+		<meta name="description" content="Select or drop a media file, and Mediabunny will start extracting various metadata about that file.">
 		<script type="module" src="../base.ts"></script>
 		<script type="module" src="./metadata-extraction.ts"></script>
 		<link rel="stylesheet" href="../base.css">
 		<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
 		<link rel="canonical" href="https://mediabunny.dev/examples/metadata-extraction/">
+		<meta property="og:site_name" content="Mediabunny">
+		<meta property="og:type" content="website">
+		<meta property="og:title" content="Metadata extraction example | Mediabunny">
+		<meta property="og:description" content="Select or drop a media file, and Mediabunny will start extracting various metadata about that file.">
+		<meta property="og:url" content="https://mediabunny.dev/examples/metadata-extraction/">
+		<meta property="og:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<meta property="og:locale" content="en-US">
+		<meta name="twitter:card" content="summary_large_image">
+		<meta name="twitter:site" content="@vanilagy">
+		<meta name="twitter:title" content="Metadata extraction example | Mediabunny">
+		<meta name="twitter:description" content="Select or drop a media file, and Mediabunny will start extracting various metadata about that file.">
+		<meta name="twitter:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Examples","item":"https://mediabunny.dev/examples"},{"@type":"ListItem","position":2,"name":"Metadata extraction"}]}</script>
 	</head>
 
 	<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
diff --git a/examples/procedural-generation/index.html b/examples/procedural-generation/index.html
index b749050..62ac8c0 100644
--- a/examples/procedural-generation/index.html
+++ b/examples/procedural-generation/index.html
@@ -1,15 +1,29 @@
 <!DOCTYPE html>
-<html lang="en" translate="no">
+<html lang="en-US" translate="no">
 	<head>
-		<meta charset="UTF-8">
+		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>Procedural Generation example | Mediabunny</title>
+		<meta name="description" content="Using Mediabunny, this page will procedurally generate a video of musical bouncing balls as fast as possible.">
 		<script type="module" src="../base.ts"></script>
 		<script type="module" src="./procedural-generation.ts"></script>
 		<link rel="stylesheet" href="../base.css">
 		<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
 		<link rel="canonical" href="https://mediabunny.dev/examples/procedural-generation/">
+		<meta property="og:site_name" content="Mediabunny">
+		<meta property="og:type" content="website">
+		<meta property="og:title" content="Procedural Generation example | Mediabunny">
+		<meta property="og:description" content="Using Mediabunny, this page will procedurally generate a video of musical bouncing balls as fast as possible.">
+		<meta property="og:url" content="https://mediabunny.dev/examples/procedural-generation/">
+		<meta property="og:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<meta property="og:locale" content="en-US">
+		<meta name="twitter:card" content="summary_large_image">
+		<meta name="twitter:site" content="@vanilagy">
+		<meta name="twitter:title" content="Procedural Generation example | Mediabunny">
+		<meta name="twitter:description" content="Using Mediabunny, this page will procedurally generate a video of musical bouncing balls as fast as possible.">
+		<meta name="twitter:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Examples","item":"https://mediabunny.dev/examples"},{"@type":"ListItem","position":2,"name":"Procedural generation"}]}</script>
 	</head>
 
 	<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
diff --git a/examples/thumbnail-generation/index.html b/examples/thumbnail-generation/index.html
index 80b7eb1..d007e6f 100644
--- a/examples/thumbnail-generation/index.html
+++ b/examples/thumbnail-generation/index.html
@@ -1,15 +1,29 @@
 <!DOCTYPE html>
-<html lang="en" translate="no">
+<html lang="en-US" translate="no">
 	<head>
-		<meta charset="UTF-8">
+		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>Thumbnail generation example | Mediabunny</title>
+		<meta name="description" content="Select or drop a media file, and Mediabunny will extract video thumbnails for it.">
 		<script type="module" src="./../base.ts"></script>
 		<script type="module" src="./thumbnail-generation.ts"></script>
 		<link rel="stylesheet" href="../base.css">
 		<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
 		<link rel="canonical" href="https://mediabunny.dev/examples/thumbnail-generation/">
+		<meta property="og:site_name" content="Mediabunny">
+		<meta property="og:type" content="website">
+		<meta property="og:title" content="Thumbnail generation example | Mediabunny">
+		<meta property="og:description" content="Select or drop a media file, and Mediabunny will extract video thumbnails for it.">
+		<meta property="og:url" content="https://mediabunny.dev/examples/thumbnail-generation/">
+		<meta property="og:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<meta property="og:locale" content="en-US">
+		<meta name="twitter:card" content="summary_large_image">
+		<meta name="twitter:site" content="@vanilagy">
+		<meta name="twitter:title" content="Thumbnail generation example | Mediabunny">
+		<meta name="twitter:description" content="Select or drop a media file, and Mediabunny will extract video thumbnails for it.">
+		<meta name="twitter:image" content="https://mediabunny.dev/mediabunny-og-image.png">
+		<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Examples","item":"https://mediabunny.dev/examples"},{"@type":"ListItem","position":2,"name":"Thumbnail generation"}]}</script>
 	</head>
 
 	<body class="flex flex-col items-center py-10 bg-gray-50 text-gray-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
diff --git a/scripts/generate-api-docs.ts b/scripts/generate-api-docs.ts
index ffc50e4..6a4738c 100644
--- a/scripts/generate-api-docs.ts
+++ b/scripts/generate-api-docs.ts
@@ -49,11 +49,13 @@ const generateDocs = (entryFiles: string[], apiConfigFile: string, dry = false)
 	// Extract special fields
 	const headingText = apiConfig['heading'] || 'API Reference';
 	const introText = apiConfig['intro'];
+	const indexDescription = apiConfig['description'];
 
 	// Create a copy without the special fields for group processing
 	const groupConfig = { ...apiConfig };
 	delete groupConfig['heading'];
 	delete groupConfig['intro'];
+	delete groupConfig['description'];
 
 	// Clear and recreate output directory (skip if dry run)
 	if (!dry) {
@@ -712,7 +714,7 @@ const generateDocs = (entryFiles: string[], apiConfigFile: string, dry = false)
 						? `${variableName}(\n${params.join(',\n')},\n): ${returnType};`
 						: `${variableName}(): ${returnType};`;
 
-					let markdown = `<script setup>\nimport { VPBadge } from 'vitepress/theme'\n</script>\n\n<VPBadge type="info" text="Function" />\n\n# ${variableName}\n\n\`\`\`ts\n${functionSig}\n\`\`\`${description ? `\n\n${description}` : ''}`;
+					let markdown = `${buildFrontmatter(description)}<script setup>\nimport { VPBadge } from 'vitepress/theme'\n</script>\n\n<VPBadge type="info" text="Function" />\n\n# ${variableName}\n\n\`\`\`ts\n${functionSig}\n\`\`\`${description ? `\n\n${description}` : ''}`;
 
 					// Find referenced types in all parameters and return type
 					const allTypeStrings = params.map(p => p.replace(/\t.*?:\s*/, '')).concat([returnType]);
@@ -726,7 +728,7 @@ const generateDocs = (entryFiles: string[], apiConfigFile: string, dry = false)
 				}
 			} else {
 				// Handle regular variables
-				let markdown = `<script setup>\nimport { VPBadge } from 'vitepress/theme'\n</script>\n\n<VPBadge type="info" text="Constant" />\n\n# ${variableName}\n\n${description ? `${description}\n\n` : ''}`;
+				let markdown = `${buildFrontmatter(description)}<script setup>\nimport { VPBadge } from 'vitepress/theme'\n</script>\n\n<VPBadge type="info" text="Constant" />\n\n# ${variableName}\n\n${description ? `${description}\n\n` : ''}`;
 				const variableValue = declaration.initializer ? declaration.initializer.getText() : 'undefined';
 				const variableDefinition = `const ${variableName} = ${variableValue};`;
 				markdown += `\`\`\`ts\n${variableDefinition}\n\`\`\``;
@@ -1512,7 +1514,7 @@ const generateDocs = (entryFiles: string[], apiConfigFile: string, dry = false)
 			deprecatedProperties.sort(compareMemberNames);
 			deprecatedMethods.sort(compareMemberNames);
 
-			let markdown = '';
+			let markdown = buildFrontmatter(description);
 
 			// Add VPBadge import and badge for all types
 			markdown += `<script setup>\nimport { VPBadge } from 'vitepress/theme'\n</script>\n\n`;
@@ -1794,7 +1796,7 @@ const generateDocs = (entryFiles: string[], apiConfigFile: string, dry = false)
 		throw new Error(`Groups found in code but not in API config: ${missingGroups.join(', ')}`);
 	}
 
-	let indexMarkdown = `# ${headingText}\n\n`;
+	let indexMarkdown = `${buildFrontmatter(indexDescription ?? '')}# ${headingText}\n\n`;
 
 	// Add intro text if provided
 	if (introText) {
@@ -1913,6 +1915,31 @@ const getFullJSDocDescription = (node: ts.Node): string => {
 	return extractJsDocDescription(node, { tagHandling: 'stopAtFirst' });
 };
 
+// Convert a markdown description (possibly multi-paragraph, with **bold**, `code`,
+// and [text](link) from processed @link tags) into a single-line plain-text string
+// suitable for the `description` field in YAML frontmatter.
+const descriptionToFrontmatter = (description: string): string => {
+	return description
+		.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+		.replace(/\*\*([^*]+)\*\*/g, '$1')
+		.replace(/__([^_]+)__/g, '$1')
+		.replace(/`([^`]+)`/g, '$1')
+		.replace(/\s+/g, ' ')
+		.trim();
+};
+
+const buildFrontmatter = (description: string): string => {
+	if (!description) {
+		return '';
+	}
+	const cleaned = descriptionToFrontmatter(description);
+	if (!cleaned) {
+		return '';
+	}
+	const yamlValue = `"${cleaned.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`;
+	return `---\ndescription: ${yamlValue}\n---\n\n`;
+};
+
 const main = () => {
 	const args = process.argv.slice(2);