Video-first content pages are an SEO weapon hiding in plain sight. A page with a MUX-hosted video hero, crawlable transcript below, and written content underneath hits three ranking signals simultaneously: dwell time (video), content depth (article), and keyword density (transcript). This post covers the full technical implementation at Esy.

The Architecture

The content platform runs on Next.js 15 with static generation. Each video page is a statically generated route that includes:

• A MUX video player at the hero position
• A collapsible transcript toggle below the player
• A full written article underneath
• Related content in a sticky sidebar

The data model for each video lives in a TypeScript data file — not a CMS. This keeps the build pipeline simple and the content version-controlled.

MUX Integration

MUX handles video hosting, adaptive bitrate streaming, and thumbnail generation. The integration is minimal:

• Upload a video to MUX, get a playback ID
• Use @mux/mux-player-react in a client component
• Generate thumbnails via https://image.mux.com/{playbackId}/thumbnail.jpg

The player is configured for on-demand streaming with custom brand colors, playback rate controls, and keyboard shortcuts.

The SEO Play

The transcript is the key. MUX can generate transcripts automatically, but even a manually written transcript serves the same purpose: it puts the video's spoken content into crawlable HTML. A 10-minute video about "building agentic workflows with Claude Code" produces 2,000+ words of keyword-rich content that Google indexes immediately.

Combined with the written article below the video, each page targets long-tail keywords with very low competition. "How to build multi-agent workflows" has almost no SEO competition right now. In 12 months, it will.

Build-Time Generation

Every video page uses generateStaticParams to produce static HTML at build time. No server-side rendering, no edge functions, no API calls at request time. The page loads instantly from a CDN. MUX handles the video streaming separately.