feat: add dynamic Open Graph tags from frontmatter

[Cinzya]

Summary

Implements dynamic Open Graph and Twitter Card meta tags using VitePress's transformPageData hook. Each documentation page now generates custom social media previews based on its frontmatter metadata.

Changes

Added

• transformPageData hook in config.mts that:
  • Extracts title, description, and optional image from page frontmatter
  • Converts relative image paths to absolute URLs (required by Open Graph spec)
  • Dynamically injects Open Graph and Twitter Card meta tags per-page
  • Implements comprehensive fallback chain for missing values

Removed

• Static duplicate Open Graph tags from global head array:
  • og:title, og:description, og:url, og:image
  • twitter:title, twitter:description, twitter:url, twitter:image
• Kept static tags: og:type, twitter:site, twitter:card

Features

✅ Rich Social Media Previews - Unique titles/descriptions for Twitter, Discord, LinkedIn, Slack
✅ Optional Custom Images - Add image field to frontmatter for page-specific preview images
✅ Backward Compatible - All existing pages work without modification (uses fallbacks)
✅ SEO Improvement - Each page gets unique, descriptive meta tags

Usage Examples

Basic (works with existing frontmatter)

---
title: "Pterodactyl Panel"
description: "Host game servers on Coolify with Pterodactyl panel..."
---

Result: Social preview shows "Pterodactyl Panel" with custom description

With Custom Image (optional enhancement)

---
title: "Pterodactyl Panel"
description: "Host game servers..."
image: /docs/images/services/pterodactyl_logo_transparent.png
---

Result: Social preview shows the logo image instead of default OG image

Fallback Logic

• Title: frontmatter.title → pageData.title → 'Coolify Docs'
• Description: frontmatter.description → site description
• Image: frontmatter.image → default OG image (https://coolcdn.b-cdn.net/assets/coolify/og-image-docs.png)

Testing

Tested with VitePress build system. The transformPageData hook runs during SSG and correctly:

• Generates unique meta tags for each page
• Handles missing frontmatter gracefully
• Converts relative paths to absolute URLs
• Maintains backward compatibility

Related Issues

🤖 Generated with Claude Code