diff --git a/website/src/.vitepress/config/hooks/generateOgImages.ts b/website/src/.vitepress/config/hooks/generateOgImages.ts
index a5fd3321..de058125 100644
--- a/website/src/.vitepress/config/hooks/generateOgImages.ts
+++ b/website/src/.vitepress/config/hooks/generateOgImages.ts
@@ -61,6 +61,18 @@ interface GenerateImagesOptions {
 	fonts: SatoriOptions["fonts"]
 }
 
+function getDir(url: string) {
+	if (url.startsWith("/docs/faq/")) {
+		return "FAQ"
+	} else if (url.startsWith("/docs/guides/")) {
+		return "Guide"
+	} else if (url.startsWith("/news/") && url !== "/news/") {
+		return "News"
+	}
+
+	return undefined
+}
+
 async function generateImage({ page, template, outDir, fonts }: GenerateImagesOptions) {
 	const { frontmatter, url } = page
 
@@ -77,7 +89,7 @@ async function generateImage({ page, template, outDir, fonts }: GenerateImagesOp
 				frontmatter.layout === "home"
 					? frontmatter.hero.tagline ?? frontmatter.description
 					: frontmatter.description,
-			dir: url.startsWith("/docs/faq/") ? "FAQ" : url.startsWith("/docs/guides/") ? "Guide" : undefined,
+			dir: getDir(url),
 		},
 	}
 
diff --git a/website/src/.vitepress/theme/components/OgImageTemplate.vue b/website/src/.vitepress/theme/components/OgImageTemplate.vue
index d9f38f98..efa2d07e 100644
--- a/website/src/.vitepress/theme/components/OgImageTemplate.vue
+++ b/website/src/.vitepress/theme/components/OgImageTemplate.vue
@@ -16,20 +16,15 @@ defineProps<{ title: string; description?: string; dir?: string }>()
 					</div>
 				</div>
 				<div v-if="dir" tw="flex items-center text-slate-600">
-					<div v-if="dir" tw="text-4xl font-semibold mr-2">
-						{{ dir }}
-					</div>
+					<div v-if="dir" tw="text-4xl font-semibold mr-2" v-html="dir" />
 					<svg v-if="dir === 'FAQ'" width="48" height="48" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" fill="currentColor"><path d="M18,15H6L2,19V3A1,1 0 0,1 3,2H18A1,1 0 0,1 19,3V14A1,1 0 0,1 18,15M23,9V23L19,19H8A1,1 0 0,1 7,18V17H21V8H22A1,1 0 0,1 23,9M8.19,4C7.32,4 6.62,4.2 6.08,4.59C5.56,5 5.3,5.57 5.31,6.36L5.32,6.39H7.25C7.26,6.09 7.35,5.86 7.53,5.7C7.71,5.55 7.93,5.47 8.19,5.47C8.5,5.47 8.76,5.57 8.94,5.75C9.12,5.94 9.2,6.2 9.2,6.5C9.2,6.82 9.13,7.09 8.97,7.32C8.83,7.55 8.62,7.75 8.36,7.91C7.85,8.25 7.5,8.55 7.31,8.82C7.11,9.08 7,9.5 7,10H9C9,9.69 9.04,9.44 9.13,9.26C9.22,9.08 9.39,8.9 9.64,8.74C10.09,8.5 10.46,8.21 10.75,7.81C11.04,7.41 11.19,7 11.19,6.5C11.19,5.74 10.92,5.13 10.38,4.68C9.85,4.23 9.12,4 8.19,4M7,11V13H9V11H7M13,13H15V11H13V13M13,4V10H15V4H13Z" /></svg>
 					<svg v-else-if="dir === 'Guide'" width="48" height="48" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" fill="currentColor"><path d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z" /></svg>
+					<svg v-else-if="dir === 'News'" width="48" height="48" viewBox="0 0 24 24"><path fill="currentColor" d="M20 11H4V8h16m0 7h-7v-2h7m0 6h-7v-2h7m-9 2H4v-6h7m9.33-8.33L18.67 3L17 4.67L15.33 3l-1.66 1.67L12 3l-1.67 1.67L8.67 3L7 4.67L5.33 3L3.67 4.67L2 3v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V3l-1.67 1.67Z" /></svg>
 				</div>
 			</div>
 			<div tw="w-full pr-56 flex flex-col items-start justify-end">
-				<div tw="text-6xl font-bold text-slate-900">
-					{{ title }}
-				</div>
-				<div v-if="description" tw="mt-2 text-4xl text-slate-600">
-					{{ description }}
-				</div>
+				<div tw="text-6xl font-bold text-slate-900" v-html="title" />
+				<div v-if="description" tw="mt-2 text-4xl text-slate-600" v-html="description" />
 			</div>
 		</div>
 		<div tw="shrink-0 h-2 w-full flex" style="background-color: #8995ff;" />