Add support for og meta tags and better SEO discovery.

package.json

@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "@eslint/js": "10.0.1",
+    "@types/node": "26.1.1",
     "eslint": "10.7.0",
     "eslint-plugin-vue": "10.10.0",
     "feed": "6.0.0",

site/.vitepress/config.ts

@@ -1,13 +1,22 @@
 import { defineConfig } from 'vitepress';
 import { genFeed } from './genFeed.js';
 
+const SITE_HOSTNAME = process.env.SITE_HOSTNAME || 'https://wrensecurity.org';
+const TWITTER_HANDLE = process.env.TWITTER_HANDLE || '@WrenSecurity';
+const GITHUB_URL = process.env.GITHUB_URL || 'https://github.com/WrenSecurity';
+const TWITTER_URL = process.env.TWITTER_URL || 'https://twitter.com/WrenSecurity';
+
 export default defineConfig({
   base: '/',
   title: 'Wren Security',
   description: 'The Wren Security Suite.',
+  sitemap: {
+    hostname: SITE_HOSTNAME,
+  },
   head: [
     ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' } ],
     ['meta', { name: 'theme-color', content: '#c12233' } ],
+    ['link', { rel: 'alternate', type: 'application/rss+xml', title: 'Wren Security Blog', href: '/feed.rss' }],
     [
       'script', {
         src: 'https://cdn.usefathom.com/script.js',
@@ -119,14 +128,33 @@ export default defineConfig({
       ],
     },
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/WrenSecurity' },
-      { icon: 'x', link: 'https://twitter.com/WrenSecurity' },
+      { icon: 'github', link: GITHUB_URL },
+      { icon: 'x', link: TWITTER_URL },
       { icon: { svg: '<svg fill="#000000" viewBox="0 0 24 24" role="img"><path d="M8.501 4.001H10.5V24H8.501V4.001zm6.999 0V24h-2V4.001h2zM3.5 0h2.001v15H3.5V0zm15 4.001h2V15h-2V4.001z"/></svg>' }, link: 'https://gitter.im/WrenSecurity/Lobby' },
     ],
   },
   ignoreDeadLinks: [
     // Ignore all localhost links
     /^https?:\/\/localhost/,
   ],
+  transformHead({ description, page, pageData, siteData }) {
+    const image = pageData.frontmatter.image || '/wrensec-logo.png';
+    const htmlPath = page.replace(/\.md$/, '.html');
+    // The deployed site only serves clean (extensionless) URLs for index pages; other pages keep the .html extension.
+    const cleanPath = htmlPath === 'index.html' ? '' : htmlPath.replace(/index\.html$/, '');
+    const url = `${SITE_HOSTNAME}/${cleanPath}`;
+
+    return [
+      ['link', { rel: 'canonical', href: url }],
+      ['meta', { property: 'og:type', content: 'website' }],
+      ['meta', { property: 'og:url', content: url }],
+      ['meta', { property: 'og:site_name', content: siteData.title }],
+      ['meta', { property: 'og:title', content: pageData.title }],
+      ['meta', { property: 'og:description', content: description }],
+      ['meta', { property: 'og:image', content: `${SITE_HOSTNAME}${image}` }],
+      ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+      ['meta', { name: 'twitter:site', content: TWITTER_HANDLE }],
+    ];
+  },
   buildEnd: genFeed
 });

site/.vitepress/genFeed.ts

@@ -3,7 +3,7 @@ import { writeFileSync } from 'fs';
 import { Feed } from 'feed';
 import { createContentLoader, type SiteConfig } from 'vitepress';
 
-const baseUrl = `https://wrensecurity.org`;
+const baseUrl = process.env.SITE_HOSTNAME || 'https://wrensecurity.org';
 
 export async function genFeed(config: SiteConfig) {
   const feed = new Feed({
@@ -12,7 +12,7 @@ export async function genFeed(config: SiteConfig) {
     id: baseUrl,
     link: baseUrl,
     language: 'en',
-    image: 'https://wrensecurity.org/wrensec-logo.png',
+    image: `${baseUrl}/wrensec-logo.png`,
     favicon: `${baseUrl}/favicon.ico`,
     copyright:
       'Copyright © 2017-present Wren Security'
@@ -39,7 +39,7 @@ export async function genFeed(config: SiteConfig) {
       author: [
         {
           name: 'Wren Security',
-          link: 'https://wrensecurity.org'
+          link: baseUrl
         }
       ],
       date: frontmatter.date

site/index.md

@@ -1,6 +1,8 @@
 ---
 layout: home
-title: 'Home'
+title: 'Wren Security | Open-Source Identity & Access Management Platform'
+titleTemplate: false
+description: 'An open-source, enterprise-ready IAM platform designed for long-term reliability. Modular, secure by design, and built on open standards.'
 hero:
   name: Identity & Access Management
   text: Open-Source Platform

site/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://wrensecurity.org/sitemap.xml

tsconfig.json

@@ -9,7 +9,8 @@
     "allowJs": true,
     "strict": true,
     "jsx": "preserve",
-    "baseUrl": "."
+    "baseUrl": ".",
+    "types": ["node"]
   },
   "include": ["shims-vue.d.ts", "site/.vitepress/**/*"]
 }