docs: improve website SEO metadata

antonreshetov · antonreshetov · commit c8ba38b3b7ca · 2026-03-30T17:51:47.000+03:00
diff --git a/docs/website/.vitepress/config.mts b/docs/website/.vitepress/config.mts
@@ -1,28 +1,82 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig, type HeadConfig } from 'vitepress'
 import { version } from './_data/assets.json'
 
+const siteUrl = 'https://masscode.io'
+const siteTitle = 'massCode'
 const description = 'Free, open-source developer workspace with code snippets, markdown notes, math notebook, and built-in dev tools.'
-const ogDescription = 'Free, open-source developer workspace: code snippets, notes, math notebook, and 20+ dev tools. All data stored locally.'
-const ogImage = 'https://masscode.io/og-image.png'
-const ogTitle = 'massCode'
-const ogUrl = 'https://masscode.io'
+const ogImage = `${siteUrl}/og-image.png`
 const gsv = 'h-rU1tSutO83wOyvi4syrk_XTvgennlUPkL6fMmq5cI'
 
+function resolvePagePath(relativePath: string) {
+  if (!relativePath || relativePath === 'index.md')
+    return '/'
+
+  if (relativePath.endsWith('/index.md'))
+    return `/${relativePath.slice(0, -'index.md'.length)}`
+
+  return `/${relativePath.replace(/\.md$/, '.html')}`
+}
+
+function resolvePageUrl(relativePath: string) {
+  return new URL(resolvePagePath(relativePath), siteUrl).toString()
+}
+
+function buildSeoHead({
+  relativePath,
+  pageTitle,
+  pageDescription,
+  isNotFound,
+}: {
+  relativePath: string
+  pageTitle: string
+  pageDescription: string
+  isNotFound?: boolean
+}): HeadConfig[] {
+  if (isNotFound)
+    return [['meta', { name: 'robots', content: 'noindex, nofollow' }]]
+
+  const pageUrl = resolvePageUrl(relativePath)
+
+  return [
+    ['link', { rel: 'canonical', href: pageUrl }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:site_name', content: siteTitle }],
+    ['meta', { property: 'og:title', content: pageTitle }],
+    ['meta', { property: 'og:description', content: pageDescription }],
+    ['meta', { property: 'og:url', content: pageUrl }],
+    ['meta', { property: 'og:image', content: ogImage }],
+    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+    ['meta', { name: 'twitter:title', content: pageTitle }],
+    ['meta', { name: 'twitter:description', content: pageDescription }],
+    ['meta', { name: 'twitter:image', content: ogImage }],
+  ]
+}
+
 export default defineConfig({
-  title: 'massCode',
+  title: siteTitle,
   description,
 
+  sitemap: {
+    hostname: siteUrl,
+    transformItems(items) {
+      return items.filter(item => !item.url.endsWith('/404.html'))
+    },
+  },
+
   head: [
     ['link', { rel: 'icon', type: 'image/png', href: '/logo-64w.png' }],
-    ['meta', { property: 'og:type', content: 'website' }],
-    ['meta', { property: 'og:title', content: ogTitle }],
-    ['meta', { property: 'og:image', content: ogImage }],
-    ['meta', { property: 'og:url', content: ogUrl }],
-    ['meta', { property: 'og:description', content: ogDescription }],
-    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
     ['meta', { name: 'google-site-verification', content: gsv }],
   ],
 
+  transformHead({ pageData, title, description }) {
+    return buildSeoHead({
+      relativePath: pageData.relativePath,
+      pageTitle: title,
+      pageDescription: description,
+      isNotFound: pageData.isNotFound,
+    })
+  },
+
   themeConfig: {
     logo: '/logo-64w.png',
 
diff --git a/docs/website/documentation/code/description.md b/docs/website/documentation/code/description.md
@@ -1,3 +1,8 @@
+---
+title: Snippet Descriptions
+description: "Add descriptions to massCode snippets to store usage notes, caveats, links, and extra context next to your code."
+---
+
 # Description
 
 Descriptions give extra context when the code alone is not enough. Use them for usage notes, caveats, links, or a short explanation of what the snippet does.
diff --git a/docs/website/documentation/code/folders.md b/docs/website/documentation/code/folders.md
@@ -1,3 +1,8 @@
+---
+title: Code Folders
+description: "Organize snippets in massCode with nested folders, renaming, moving, and deletion workflows in the Code space."
+---
+
 # Folders
 
 Folders help you organize snippets by project, topic, language, or any structure that fits your workflow. When you select a folder in the sidebar, massCode shows snippets from that folder and all of its subfolders in the second column.
diff --git a/docs/website/documentation/code/fragments.md b/docs/website/documentation/code/fragments.md
@@ -1,3 +1,8 @@
+---
+title: Snippet Fragments
+description: "Use snippet fragments in massCode to keep multiple related files, languages, or versions together in one snippet."
+---
+
 # Fragments
 
 Fragments are tabs inside a snippet. Use them when one snippet needs multiple related versions, files, or languages in one place.
diff --git a/docs/website/documentation/code/library.md b/docs/website/documentation/code/library.md
@@ -1,3 +1,8 @@
+---
+title: Code Library
+description: "Browse the Code Library in massCode, including Inbox, Favorites, All Snippets, and Trash for fast snippet navigation."
+---
+
 # Library
 
 The Library is the first column in the Code space. It gives you a fast way to browse system folders and jump to the part of your snippet collection you need.
diff --git a/docs/website/documentation/code/search.md b/docs/website/documentation/code/search.md
@@ -1,3 +1,8 @@
+---
+title: Code Search
+description: "Search the entire massCode snippet library by title or content to quickly find saved code across folders."
+---
+
 # Search
 
 Search helps you find snippets by title or content across your entire library. Use it when you remember part of the code but not where you saved it.
diff --git a/docs/website/documentation/code/snippets.md b/docs/website/documentation/code/snippets.md
@@ -1,3 +1,8 @@
+---
+title: Code Snippets
+description: "Save, organize, and edit reusable code snippets in massCode with folders, languages, and searchable snippet content."
+---
+
 # Snippets
 
 Snippets are the core building blocks of the Code space. Use them to save code you reuse across projects, keep reference examples close at hand, and build your own searchable code library over time.
diff --git a/docs/website/documentation/code/tags.md b/docs/website/documentation/code/tags.md
@@ -1,3 +1,8 @@
+---
+title: Code Tags
+description: "Use tags in massCode to organize snippets across folders, add tag filters, and manage tag deletion safely."
+---
+
 # Tags
 
 Tags are a flexible way to organize snippets across folders. Unlike folders, a snippet can have multiple tags at the same time.
diff --git a/docs/website/documentation/index.md b/docs/website/documentation/index.md
@@ -1,3 +1,8 @@
+---
+title: Documentation Overview
+description: "Explore the massCode documentation for code snippets, markdown notes, math notebook, storage, sync, themes, and built-in developer tools."
+---
+
 # Overview
 
 massCode is a free and open source developer workspace for code snippets, markdown notes, calculations, and quick developer utilities. Instead of scattering everyday work across an editor, a notes app, a calculator, and a handful of websites, you keep it in four focused Spaces inside one local-first desktop app.
diff --git a/docs/website/documentation/math/index.md b/docs/website/documentation/math/index.md
@@ -1,3 +1,8 @@
+---
+title: Math Notebook
+description: "Use the massCode Math Notebook for natural-language calculations, conversions, currency rates, finance, and date math."
+---
+
 # Math Notebook
 
 <AppVersion text=">=4.6" />
diff --git a/docs/website/documentation/notes/folders.md b/docs/website/documentation/notes/folders.md
@@ -1,3 +1,8 @@
+---
+title: Notes Folders
+description: "Organize notes in massCode with hierarchical folders, drag-and-drop nesting, and folder rename or delete actions."
+---
+
 # Folders
 
 Folders help you keep notes organized by project, topic, or area of work. Notes supports hierarchical folders, so you can build a simple tree instead of keeping everything in one long list.
diff --git a/docs/website/documentation/notes/index.md b/docs/website/documentation/notes/index.md
@@ -1,3 +1,8 @@
+---
+title: Markdown Notes
+description: "Write markdown notes in massCode with live preview, a three-column layout, and features for diagrams, mind maps, and presentations."
+---
+
 # Notes
 
 <AppVersion text=">=5.0" />
diff --git a/docs/website/documentation/notes/library.md b/docs/website/documentation/notes/library.md
@@ -1,3 +1,8 @@
+---
+title: Notes Library
+description: "Navigate the Notes Library in massCode with Inbox, Favorites, All Notes, and Trash for fast note access."
+---
+
 # Library
 
 The Library is the first column in the Notes space. It helps you move quickly between system folders and the parts of your note collection you use most often.
diff --git a/docs/website/documentation/notes/mermaid.md b/docs/website/documentation/notes/mermaid.md
@@ -1,3 +1,8 @@
+---
+title: Mermaid Diagrams
+description: "Render Mermaid diagrams directly inside massCode notes for flows, timelines, architectures, and other structured visuals."
+---
+
 # Mermaid
 
 Use Mermaid when a diagram explains something faster than a paragraph. It is a good fit for flows, simple architectures, state changes, timelines, and other structured visual notes.
diff --git a/docs/website/documentation/notes/mindmap.md b/docs/website/documentation/notes/mindmap.md
@@ -1,3 +1,8 @@
+---
+title: Mind Maps
+description: "Turn markdown headings into interactive mind maps in massCode and export them as PNG or SVG."
+---
+
 # Mindmap
 
 Mindmap turns the structure of your note into a visual outline. It is most useful for planning, presenting a hierarchy, or checking whether a long note has a clear structure.
diff --git a/docs/website/documentation/notes/presentation.md b/docs/website/documentation/notes/presentation.md
@@ -1,3 +1,8 @@
+---
+title: Presentation Mode
+description: "Present markdown notes fullscreen in massCode with keyboard navigation and a built-in laser pointer."
+---
+
 # Presentation Mode
 
 Presentation Mode shows the current note in a clean fullscreen view for meetings, demos, and walkthroughs. Use it when you want to present markdown content without switching to another tool.
diff --git a/docs/website/documentation/notes/search.md b/docs/website/documentation/notes/search.md
@@ -1,3 +1,8 @@
+---
+title: Notes Search
+description: "Search note titles and content in massCode Notes to quickly find documents by topic across your library."
+---
+
 # Search
 
 Search helps you find notes by title or content across the current Notes library. Use it when you remember the topic but not the folder.
diff --git a/docs/website/documentation/notes/tags.md b/docs/website/documentation/notes/tags.md
@@ -1,3 +1,8 @@
+---
+title: Notes Tags
+description: "Use tags in massCode Notes to organize documents across folders and filter your notes by topic."
+---
+
 # Tags
 
 Tags add a second layer of organization on top of folders. Unlike folders, one note can have multiple tags.
diff --git a/docs/website/documentation/storage.md b/docs/website/documentation/storage.md
@@ -1,3 +1,8 @@
+---
+title: Markdown Vault Storage
+description: "Learn how massCode stores snippets and notes locally in a Markdown Vault with plain files, frontmatter metadata, and Git-friendly structure."
+---
+
 # Storage
 
 massCode stores your data locally on your computer. Snippets and notes live in a **Markdown Vault**, so your content stays as plain Markdown files on disk instead of being locked into a cloud service or a private database format.
diff --git a/docs/website/documentation/sync.md b/docs/website/documentation/sync.md
@@ -1,3 +1,8 @@
+---
+title: Sync Your Markdown Vault
+description: "Sync massCode across devices by pairing the Markdown Vault with iCloud, Dropbox, Google Drive, Syncthing, or Git."
+---
+
 # Sync
 
 massCode does not require a built-in cloud account or a proprietary sync service. To sync your data across devices, sync your **Markdown Vault** folder with the file service you already trust.
diff --git a/docs/website/documentation/themes.md b/docs/website/documentation/themes.md
@@ -1,3 +1,8 @@
+---
+title: Custom Themes
+description: "Create and customize massCode themes to change app colors and editor syntax highlighting with live JSON-based updates."
+---
+
 # Custom Themes
 
 <AppVersion text=">=4.5" />
diff --git a/docs/website/documentation/tools/index.md b/docs/website/documentation/tools/index.md
@@ -1,3 +1,8 @@
+---
+title: Developer Tools
+description: "Use built-in developer tools in massCode for text conversion, hashing, HMAC generation, URL parsing, and other quick tasks."
+---
+
 # Developer tools
 
 <AppVersion text=">=3.8" />
diff --git a/docs/website/donate/index.md b/docs/website/donate/index.md
@@ -1,3 +1,8 @@
+---
+title: Support massCode
+description: "Support massCode development through Open Collective, Gumroad, or crypto donations and help fund new features."
+---
+
 # Support massCode development
 
 ::: info
diff --git a/docs/website/download/index.md b/docs/website/download/index.md
@@ -1,5 +1,6 @@
 ---
-title: Download
+title: Download massCode
+description: "Download the latest massCode builds for macOS, Windows, and Linux. Free, offline-first, and no account required."
 ---
 
 # Select your platform
diff --git a/docs/website/download/latest-release.md b/docs/website/download/latest-release.md
@@ -1,5 +1,6 @@
 ---
 title: Latest Release
+description: "Read the release notes for the latest massCode update, including new features, fixes, and improvements."
 ---
 
 # v4.6.0
diff --git a/docs/website/index.md b/docs/website/index.md
@@ -1,6 +1,7 @@
 ---
 layout: home
 titleTemplate: "A free and open source developer workspace"
+description: "Free, open-source developer workspace for code snippets, markdown notes, calculations, and built-in dev tools. Works offline and stores data locally."
 hero:
   image:
     src: /logo.png
diff --git a/docs/website/public/og-image.png b/docs/website/public/og-image.png
diff --git a/docs/website/public/robots.txt b/docs/website/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://masscode.io/sitemap.xml
