Put the content in the first-load HTML

Situation

Goodpods is a podcast discovery platform, and organic search was meant to be a major way people found podcast and episode pages. Our client engaged an SEO optimising team, and they recommended structured data and better inter-linking of pages to help us rank. At the time we were getting only a few dozen clicks a week from search.

Task

The recommendation came from the SEO team, but working out how to implement it in our Next.js webapp was my job.

Action

The core principle I worked to was that everything a crawler needs has to be in the server-rendered HTML, not hydrated in by JavaScript afterwards. I moved our JSON-LD structured data, the machine-readable page metadata search engines use for rich results, so it was rendered directly into the HTML on the server instead of injected client-side. I built out breadcrumb schema for podcasts and episodes, making sure the name attributes were present and every page type was handled. I also updated the sitemap settings so crawlers could find the pages in the first place.

Then I went after the actual content. Transcripts, AI summaries, questions and podcast descriptions were forced into the first-load SSR payload so search engines index real content. Transcripts are large, so shipping them whole would have blown out page weight and fought the site speed work we had also been doing. My solution was to load only the first few lines of the transcript by requesting it with a byte limit, then fetch the rest only when the user clicks to expand, with a preload on hover so the expansion feels instant. We did a lot of preloading work like that to keep the site snappy after first load.

Result

Organic search traffic increased drastically. We went from a few dozen clicks a week to over 1000 clicks per week.