How I Built a 170-Page Game Database with Vanilla HTML, CSS, and Structured Data

#seo #html #css

How I Built a 170-Page Wuthering Waves Database with Vanilla HTML, CSS, and Structured Data

No frameworks. No build step. No CMS. Here's the architecture behind WutZone — a statically-generated game database that competes with wiki sites for Google rankings.

The Problem

Wuthering Waves has dozens of characters, weapons, and Echoes. Each one deserves its own page. That's 170+ pages of structured data — character stats, weapon rankings, team synergies, upgrade materials.

Game wiki sites (Fandom, game8, Prydwen) dominate the search results. To compete, you need:

Fast load times — Google ranks on Core Web Vitals
Rich structured data — Schema.org markup for rich snippets
Entity relationships — internal links that form a knowledge graph
Content that answers real search queries — not just data dumps

Here's how I built the Rover character page as a case study.

The Stack (It's Simple)

HTML            —  static pages, one per entity
CSS             —  shared.css + per-page overrides
JavaScript      —  nav, theme toggle, GA4, Clarity
JSON-LD         —  Schema.org structured data
Cloudflare Pages — auto-deploy from GitHub main branch

No React. No Astro. No Hugo. When every page follows the same template pattern, a static HTML approach works fine — and ships zero JavaScript overhead to the client for content rendering.

Design System: Color-Coded by Element

Each character has an element (Havoc, Spectro, Glacio, Fusion, Aero, Electro). Rather than a flat design, the Rover page uses element-specific accent colors:

/* Havoc = purple, Spectro = gold */
:root {
  --havoc: #a855f7;
  --spectro: #facc15;
}

.cd-section.havoc { border-left: 3px solid #a855f7; }
.cd-section.spectro { border-left: 3px solid #facc15; }

The comparison table between Havoc and Spectro forms uses column headers with matching colors — users visually know which column they're reading without checking the label.

This pattern scales to all 57 character pages: swap the accent color variable, and the entire page themes itself.

The "Quick Reference" Pattern

Most users don't read a build page. They scan for answers:

Best Form? → Havoc
Best Weapon? → Emerald of Genesis
Best Echo? → Dreamless

Instead of a wall of text, we put three highlight cards at the top:

<div class="qr-grid">
  <div class="qr-card primary">Best Form → Havoc Rover</div>
  <div class="qr-card">Best Weapon → Emerald of Genesis</div>
  <div class="qr-card">Best Echo → Dreamless</div>
</div>

Each card answers one question. No scrolling required. Google also extracts this for featured snippets when the data is well-structured.

Structured Data: Beyond Basic SEO

Every page has two JSON-LD blocks:

FAQ Schema — Google shows these as expandable Q&As in search results:

{
  "@type": "FAQPage",
  "mainEntity": [
    {"@type": "Question", "name": "Is Rover worth building?"},
    {"@type": "Question", "name": "Male or Female Rover — what's the difference?"}
  ]
}

BreadcrumbList Schema — helps Google understand site hierarchy:

{
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"name": "WutZone", "item": "https://wutzone.com/"},
    {"name": "Characters", "item": "https://wutzone.com/characters/"},
    {"name": "Rover"}
  ]
}

The combination of both schemas on a single page significantly improves the SERP appearance — breadcrumbs show the navigation path, and FAQ accordions push competitors further down the page.

Internal Linking as a Knowledge Graph

Each character page links to:

Their weapons (/weapons/emerald-of-genesis/)
Their Echoes (/echos/dreamless/)
Their teammates (/characters/sanhua/)
Database indexes (/weapons/, /echos/, /items/)

This creates a web of entity relationships that Google treats as a knowledge graph. A user who lands on the Rover page can navigate to every related entity without hitting the navigation bar.

From an SEO perspective, internal links distribute PageRank across the site — the tier list page linking to Rover, Rover linking to weapons, weapons linking back to other characters. It's a self-reinforcing structure.

The Keyword Strategy

Rather than stuffing exact-match keywords, the page answers the questions people actually type into Google:

Search Intent	How the Page Answers
"rover best weapon"	FAQ: "What is Rover's best weapon?" + ranked weapon table
"rover havoc vs spectro"	Dedicated comparison section with table
"rover s6 free"	FAQ: "How do I get Rover's S6 for free?"
"rover male or female"	FAQ: "Male or Female Rover — what's the difference?"

Each FAQ question is a real search query with volume behind it (sourced from Reddit trending topics and Google Trends data). Schema markup ensures Google can surface these as Featured Snippets.

Mobile-First Details

FAQ accordions use native <details> elements — zero JavaScript, works on every browser
Echo Cost visualization uses colored chips (4→3→3→1→1) instead of a text description — scannable at a glance
Team cards collapse to a single column on mobile via CSS Grid auto-fit

No media query hacks. No separate mobile templates.