Setup SEO

apps/frontend/app/components/OgImage/BasicTemplate.takumi.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = withDefaults(
+	defineProps<{
+		title?: string;
+		description?: string;
+	}>(),
+	{
+		title: "Solitar",
+		description: "A minimal URL shortener and QR generator",
+	},
+);
+</script>
+
+<template>
+	<div
+		class="bg-black w-full h-full flex items-center justify-center flex-col"
+		:style="`font-family: 'Geist', sans-serif`">
+		<div class="w-full h-full p-16 flex items-start justify-center flex-col gap-28">
+			<p class="text-white text-6xl">{{ title }}</p>
+			<p class="text-[#a1a1a1] text-5xl">{{ description }}</p>
+		</div>
+	</div>
+</template>

apps/frontend/app/pages/contents.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 const route = useRoute();
 
+useHead({
+	title: "Contents",
+});
+
 const availableRoutes = new Map([
 	["terms", "Terms & Conditions"],
 	["privacy", "Privacy Policy"],

apps/frontend/app/pages/index.vue

@@ -2,6 +2,11 @@
 import { joinURL } from "ufo";
 import { ShortenUrlDisplay } from "#components";
 
+defineOgImage("BasicTemplate");
+useHead({
+	title: "URL Shortener",
+});
+
 const { r$ } = useShortenForm();
 const config = useRuntimeConfig();
 const toast = useToast();

apps/frontend/app/pages/qr.vue

@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import { QrCodeDisplay } from "#components";
 
+defineOgImage("BasicTemplate", {
+	title: "QR Code Generator",
+	description: "Generate a QR code for your URL",
+});
+
+useHead({
+	title: "QR Code Generator",
+});
+
 const { r$ } = useQrCodeForm();
 const overlay = useOverlay();
 

apps/frontend/nuxt.config.ts

@@ -1,5 +1,16 @@
 export default defineNuxtConfig({
-	modules: ["@nuxt/ui", "@regle/nuxt", "@vueuse/nuxt", "@nuxt/image", "@nuxt/test-utils/module"],
+	modules: [
+		"@nuxt/ui",
+		"@nuxt/fonts",
+		"@regle/nuxt",
+		"@vueuse/nuxt",
+		"@nuxt/image",
+		"@nuxt/test-utils/module",
+		"nuxt-og-image",
+		"@nuxtjs/robots",
+		"@nuxtjs/sitemap",
+		"nuxt-seo-utils",
+	],
 	compatibilityDate: "2025-07-15",
 	devtools: { enabled: true },
 	css: ["~/assets/css/global.css"],
@@ -12,22 +23,13 @@ export default defineNuxtConfig({
 	},
 	app: {
 		head: {
-			title: "Solitär",
+			titleTemplate: "%s %separator %siteName",
+			templateParams: {
+				separator: "|",
+				siteName: "Solitar",
+			},
+			title: "Solitar",
 			meta: [{ name: "description", content: "A minimal URL shortener and QR generator" }],
-			link: [
-				{
-					rel: "icon",
-					type: "image/svg+xml",
-					href: "/favicon-light.svg",
-					media: "(prefers-color-scheme: light)",
-				},
-				{
-					rel: "icon",
-					type: "image/svg+xml",
-					href: "/favicon-dark.svg",
-					media: "(prefers-color-scheme: dark)",
-				},
-			],
 		},
 	},
 	nitro: {
@@ -39,4 +41,34 @@ export default defineNuxtConfig({
 			nodeCompat: true,
 		},
 	},
+	fonts: {
+		families: [
+			{
+				name: "Geist",
+				provider: "google",
+				global: true,
+			},
+		],
+	},
+	ui: {
+		fonts: false,
+	},
+	site: {
+		name: "Solitar",
+	},
+	robots: {
+		blockAiBots: true,
+		blockNonSeoBots: true,
+	},
+	ogImage: {
+		buildCache: true,
+		compatibility: {
+			runtime: {
+				takumi: "wasm",
+			},
+		},
+	},
+	seo: {
+		fallbackTitle: false,
+	},
 });

apps/frontend/package.json

@@ -13,8 +13,11 @@
 		"test": "vitest run"
 	},
 	"dependencies": {
+		"@nuxt/fonts": "^0.14.0",
 		"@nuxt/image": "2.0.0",
 		"@nuxt/ui": "^4.4.0",
+		"@nuxtjs/robots": "^5.7.0",
+		"@nuxtjs/sitemap": "^7.6.0",
 		"@regle/core": "^1.18.3",
 		"@regle/nuxt": "^1.18.3",
 		"@regle/rules": "^1.18.3",
@@ -23,6 +26,7 @@
 		"@vueuse/nuxt": "^14.2.1",
 		"dayjs": "^1.11.19",
 		"nuxt": "^4.3.1",
+		"nuxt-seo-utils": "^7.0.19",
 		"qrcode": "^1.5.4",
 		"tailwindcss": "^4.1.18",
 		"ufo": "^1.6.3",
@@ -31,8 +35,11 @@
 	},
 	"devDependencies": {
 		"@nuxt/test-utils": "^4.0.0",
+		"@takumi-rs/core": "^0.68.8",
+		"@takumi-rs/wasm": "^0.68.8",
 		"@vue/test-utils": "^2.4.6",
 		"happy-dom": "^20.6.1",
+		"nuxt-og-image": "6.0.0-beta.34",
 		"oxlint": "^1.43.0",
 		"oxlint-tsgolint": "^0.11.5",
 		"playwright-core": "^1.58.2",