Case study

ListingOK v2 — marketing site

Second version of listingok.com: full redesign of the public site as an acquisition asset. Per-market programmatic SEO, bilingual editorial content and a conversion funnel measured button by button.

Screenshot of ListingOK v2 marketing site

At a glance

ClientListingOK
Project typeMarketing site redesign — second version of listingok.com
SectorB2B SaaS — revenue management for short-term rentals and hotels
Duration4 weeks
Tec2020 team1 CTO + 1 developer
TechReact · Vite · TypeScript · Node.js · Express · EN/ES hreflang · per-language sitemaps · per-market programmatic SEO · GA4 · Google Tag Manager
Client websitelistingok.com

The challenge

The first version of listingok.com was the front door to the app: home, login, and not much more. Enough for the first customers — not enough to grow through organic. The site didn’t tell the story, didn’t segment by user type (property manager vs. hotel vs. independent host), and the entire SEO effort sat on a handful of static pages that competed against each other.

The brief for v2 was to treat the site as an acquisition product, not a landing page. That meant three things: (1) a living editorial layer — blog, resources, case studies — to give people reasons to return and to link; (2) per-market programmatic pages to cover the long tail of "Airbnb occupancy {city}" in EN and ES; and (3) a measurable funnel from first visit to signup, with different CTAs for each segment and each block.

What we built

  • Full redesign of the public site: new home, capability pages (pricing, channel manager, market insights, analyzer), segment pages (property managers, hotels, partners) and a reusable component system that lets us assemble new landings in hours.
  • Per-market programmatic SEO: auto-generated pages with occupancy, ADR and RevPAR by city, fed by the same pipelines that supply the in-app product. One base per language, indexable and linked from the blog.
  • Bilingual editorial hub: blog and resources in EN and ES with separate routes (/en/..., /es/...), full hreflang and per-language sitemaps (sitemap-en.xml, sitemap-es.xml) — not machine translation, content localised per market.
  • Analyzer as the front door: the free tool placed in the hero and in the footer of the site, with its own measured funnel — from click to result to signup.
  • CTAs instrumented from day one: every button carries data-event and data-source attributes to distinguish "signup from hero", "signup from pricing" and "signup from use case". Marketing decides where to put the next euro using data, not intuition.
  • Public pricing and comparison pages: deliberate policy to shorten the sales cycle — the lead arriving on a call has already seen the ranges.
  • Schema.org and metadata consistent across each template (SoftwareApplication, Article, FAQPage where applicable) to feed rich results.

Technical decisions that mattered

1. React SPA with real SEO, not "SPA and pray"

We kept the app’s technical base (React + Vite, served by Express) but treated the public site as a separate use case: pre-rendered routes for indexable content, index fallback for deep links, and a separate build that doesn’t drag the app bundle along. Result: Google’s bot sees full HTML, the user only loads what they need.

2. Programmatic SEO sharing data with the product

The per-city market pages aren’t a marketing verticalisation: they use the same ingestion pipelines that feed the Market Insights dashboard inside the app. One source of truth, two consumers. When a new market is added to the product, the site gains indexable pages for free.

3. Bilingual for real, not Google Translate

Each page lives in EN and ES with localised URLs (/es/precios/ vs. /en/pricing-revenue-management-software/), reciprocal hreflang and separate sitemaps. The blog and resources are written — not translated — for each market. Consequence: each article doubles the SEO surface without doubling the content team.

4. CTAs as a first-class metric, not an afterthought

Every "Start free", "See pricing", "Try the Analyzer" button carries data-event="cta_signup" / data-source="hero_home". That answers the question that matters — which block on which page is converting each euro of traffic? — without reconstructing it later from heatmaps. Rule: if a metric drives the roadmap, you measure it from version one.

5. A component system for scaling landings

Hero, capability card, testimonial block, comparison, FAQ, CTA strip — all encapsulated. A new landing (a use case, a partner, a campaign) gets built in hours, not days, while keeping the same typography, spacing and CTAs as the rest of the site. Visual consistency stops depending on the discipline of whoever assembles the page.

Outcome

v2 of listingok.com stops being a door and becomes an acquisition engine: the site publishes editorial content every week, the per-market long tail enters Google with pages competitors don’t have, and the funnel from first visit to signup is measured button by button. Internally, building a new landing is a matter of composing existing components — the marginal cost of testing a new message is low, which is why more get tested.

The most underrated decision in hindsight: sharing data between product and SEO. The market pages aren’t a marketing layer bolted on top — they’re the same layer that already feeds the user’s dashboard. That single decision turns every product improvement into an SEO improvement at no extra cost.

Need a SaaS site that also captures? Let’s talk.

If you have an idea or a stuck technical project, the first call is free and lasts thirty minutes. Maybe something comes of it, maybe not — but you’ll know more by the time we hang up.

Let’s talk
[email protected] · Madrid, Spain