SEO Improvements Design ​

Overview ​

Maximize SEO for the Aranea Development portfolio site (VitePress) by adding a build-time generated og-image, redesigning the favicon, fixing social sharing meta tags, adding font preload hints, and enhancing structured data.

1. OG Image Generation ​

Script: scripts/generate-og-image.ts using satori (declarative markup → SVG) + sharp (SVG → PNG).

Design (1200x630 PNG):

  • Dark background (#0a0a0f, matching the site)
  • Subtle radial gradient from purple (#8b5cf6) center
  • Spider icon (simplified from favicon) centered-upper area
  • "Aranea Development" in Cinzel font (from /public/fonts/)
  • Tagline "Solo developer building tools for developers" in Inter
  • Thin spider web lines as decorative elements radiating from corners

Output: public/og-image.png

2. Favicon Redesign ​

Script: scripts/generate-favicon.ts using sharp + png-to-ico.

New SVG design — a more distinctive spider icon optimized for small sizes:

  • Cleaner body shape (two overlapping circles, tuned proportions)
  • Thicker, more visible legs at small sizes (4 pairs, curved)
  • Eyes as dark circles for personality
  • Purple (#8b5cf6) on transparent background
  • Designed to read clearly at 16x16

Generated outputs (all from the single SVG source):

  • favicon.svg — the vector source
  • favicon.ico — 16x16 + 32x32 multi-size
  • favicon-192x192.png
  • favicon-512x512.png
  • apple-touch-icon.png (180x180)

3. Meta Tag Fixes & Resource Hints ​

Image meta tags added to global head in .vitepress/config.ts:

  • og:image → https://aranea-development.nl/og-image.png
  • og:image:width → 1200
  • og:image:height → 630
  • og:image:type → image/png
  • twitter:image → https://aranea-development.nl/og-image.png
  • twitter:card → changed from summary to summary_large_image

Resource hints added to global head:

  • preload for critical fonts: Cinzel and Inter (self-hosted in /public/fonts/)
  • No external preconnect needed — all resources are self-hosted

4. Structured Data Enhancements ​

Add Organization schema to the @graph array:

  • @type: Organization
  • @id: ${siteUrl}/#organization
  • name: Aranea Development
  • url: ${siteUrl}
  • logo: ${siteUrl}/favicon-512x512.png
  • image: ${siteUrl}/og-image.png
  • founder: reference to #person
  • sameAs: ['https://github.com/AraneaDev']

Enhance existing schemas:

  • WebSite.publisher → reference #organization
  • Person.worksFor → reference #organization
  • WebSite.image → ${siteUrl}/og-image.png

5. Build Integration ​

New devDependencies:

  • satori — generates SVG from declarative markup
  • sharp — SVG/PNG conversion and resizing
  • png-to-ico — generates multi-size .ico from PNG
  • tsx — runs TypeScript scripts

Package.json scripts:

  • "generate-assets" — runs scripts/generate-assets.ts
  • "build" — changed to "npm run generate-assets && vitepress build"

File structure:

scripts/
  generate-assets.ts    — entry point, runs both generators
  generate-og-image.ts  — satori + sharp → public/og-image.png
  generate-favicon.ts   — sharp + png-to-ico → all favicon variants