feat: implement SEO enhancements with Schema.org markup and sitemap generation

Author: TechWatching

app/pages/posts/[slug].vue

@@ -22,6 +22,22 @@ useSeoMeta({
   ogDescription: description
 })
 
+// Schema.org Article markup for rich snippets
+useSchemaOrg([
+  defineArticle({
+    '@type': 'BlogPosting',
+    headline: title,
+    description,
+    datePublished: post.value.date,
+    image: post.value.image?.src,
+    author: {
+      '@type': 'Person',
+      name: 'Alexandre Nédélec',
+      url: 'https://techwatching.dev/about'
+    }
+  })
+])
+
 if (post.value.image?.src) {
   defineOgImage({
     url: post.value.image.src

nuxt.config.ts

@@ -6,7 +6,7 @@ export default defineNuxtConfig({
     '@nuxt/ui',
     '@nuxt/content',
     '@vueuse/nuxt',
-    'nuxt-og-image',
+    '@nuxtjs/seo',
     '@nuxt/hints',
     '@nuxt/scripts',
     '@stefanobartoletti/nuxt-social-share'
@@ -26,13 +26,19 @@ export default defineNuxtConfig({
 
   site: {
     url: 'https://techwatching.dev',
-    name: 'Alexandre Nédélec'
+    name: "Alexandre Nédélec's personal website",
+    description: "Alexandre Nédélec's personal website"
   },
 
   socialShare: {
     baseUrl: 'https://techwatching.dev'
   },
 
+  sitemap: {
+    sources: ['/api/__sitemap__/urls'],
+    exclude: ['/login', '/signup']
+  },
+
   runtimeConfig: {
     public: {
       submitJsonApiKey: ''

package.json

@@ -19,13 +19,13 @@
     "@nuxt/image": "^2.0.0",
     "@nuxt/scripts": "0.13.2",
     "@nuxt/ui": "^4.2.1",
+    "@nuxtjs/seo": "^3.3.0",
     "@standard-schema/spec": "^1.0.0",
     "@unhead/vue": "^2.0.19",
     "@vueuse/nuxt": "^13.9.0",
     "better-sqlite3": "^12.4.6",
     "just-kebab-case": "^4.2.0",
     "nuxt": "^4.2.2",
-    "nuxt-og-image": "^5.1.12",
     "posthog-js": "^1.310.1",
     "submitjson": "^0.13.0",
     "zod": "^4.1.13"

server/api/__sitemap__/urls.ts

@@ -0,0 +1,42 @@
+import { asSitemapUrl, defineSitemapEventHandler } from '#imports'
+import kebabCase from 'just-kebab-case'
+import type { Collections } from '@nuxt/content'
+
+const getTagSlug = (tag: string) => kebabCase(tag.toLowerCase().replace('/', ''))
+const getTagRoute = (tag: string) => `/tags/${getTagSlug(tag)}`
+
+export default defineSitemapEventHandler(async (e) => {
+  // Query all posts
+  const posts = await queryCollection(e, 'posts').all()
+
+  // Query all goodies
+  const goodies = await queryCollection(e, 'goodies').all()
+
+  // Collect unique tags from posts
+  const tags = new Set<string>()
+  posts.forEach((post: Collections['posts']) => {
+    post.tags?.forEach((tag: string) => {
+      tags.add(getTagRoute(tag))
+    })
+  })
+
+  // Generate tag URLs
+  const tagItems = [...tags].map((t) => asSitemapUrl({ loc: t }))
+
+  // Generate post URLs
+  const postItems = posts.map((post: Collections['posts']) => {
+    return asSitemapUrl({
+      loc: post.path,
+      lastmod: post.date ? new Date(post.date).toISOString() : undefined
+    })
+  })
+
+  // Generate goodie URLs
+  const goodieItems = goodies.map((goodie: Collections['goodies']) => {
+    return asSitemapUrl({
+      loc: goodie.path
+    })
+  })
+
+  return [...tagItems, ...postItems, ...goodieItems]
+})