CASEProgrammatic SEO · pelatihandansertifikasi.com

15,754 programs, one design system

pelatihandansertifikasi.com is the second training brand of PT Gerbang Akselerasi Sukses, built to be found: a catalogue of more than fifteen thousand training and BNSP certification programs, each with its own page, schedule and structured data, on a site that still feels hand-made.

pelatihandansertifikasi.com Program catalogue

Role: Designer, full stack engineer and SEO
Period: 2026 - now
Platform: Web

pelatihandansertifikasi.com home page — Home: a full-bleed photo hero that cross-fades like footage, with no video or libraries.

Home: a full-bleed photo hero that cross-fades like footage, with no video or libraries.

15,754: program pages live, each with its own schedule and metadata
~600: newest pages prerendered at build; the rest render on demand and cache
30: schema.org types, from Course and Offer to EducationalOccupationalCredential
0: UI libraries: hand-written CSS tokens, light and dark themes

01The problem

Ranking for thousands of searches

Companies search for one specific course at a time: a K3 certificate, an audit method, a data tool. A brochure site with ten pages cannot answer that, but thousands of pages are slow to build, slow to deploy and easy to get wrong.

The goal was a catalogue as large as the market, where every page is useful, fast and correctly marked up, without the build or the design collapsing under the volume.

02Product

What I built

01 · Typed content model
One TypeScript file per program with outline, audience, methods, facilities, schedule, FAQs and testimonials, checked by the compiler.
02 · Generation pipeline
Scripts own the structure and an LLM drafts the prose, with taxonomy matching so new categories converge instead of multiplying.
03 · Scalable rendering
Only the newest pages prerender; the rest use incremental static regeneration, and scheduled pages appear without a redeploy.
04 · Catalogue & search
Filters by field and topic tags across the whole catalogue, plus site search with an API route.
05 · Schedules
A monthly timeline of open batches in hotels across six cities, online and in-house.
06 · Split sitemaps
Sitemaps generated in chunks so search engines can crawl tens of thousands of URLs.

Hard parts

What made it difficult

Builds that don’t explode
Prerendering fifteen thousand pages and their social images would take hours, so the build renders a recent slice and the rest are generated on first visit and cached.
Quality at volume
Generated text is constrained by code: fixed sections, validated fields, and a shared vocabulary of categories, so pages stay consistent and useful.
A brand distinct from its sibling
It shares a company with geraks.id but needed its own identity: warm editorial design, a single green accent, and different copy throughout.

Outcome

Who it helps

For the business
A page for nearly every training a company might search for, bringing in organic inquiries.
For buyers
Clear outlines, dates, cities and prices before they ever call sales.
For operations
New programs and batches go live from data, without touching the design.

04Skills · What it took

The craft behind it

SEO

Programmatic, but useful

JSON-LD in 30 schema.org types: Course, CourseInstance, Offer, EducationalOccupationalCredential, FAQPage, HowTo, Review, BreadcrumbList and more.
Chunked sitemaps, generated Open Graph images per program, canonical URLs and per-page metadata for the whole catalogue.
Taxonomy and internal links that turn fifteen thousand pages into navigable topic clusters.

Design

Warm editorial

Off-white ground, near-black ink, one green accent and bold display type; pill buttons and crisp bordered cards.
A home hero that cross-fades still photos with a Ken Burns move and a progress ring, and a dotted map of Indonesia drawn from TopoJSON.

Engineering

Static where possible

Next.js 16 with the React Compiler, incremental static regeneration and time-based publishing.
Content generation scripts in TypeScript on OpenRouter, run with tsx.