Each URL ranks on its own.
What did this project ship?
sevenco.in is a Next.js site in front of the driver service. Home, Mumbai, and six service URLs each have to rank on their own, and the hero has to paint before the map.
- Own canonical
- Static pages
- Hourly refresh
- Hero first
- Client map
- Preview noindex
- Industry
- Mobility
- Country
- India
- Scope
- Marketing site
01
Search, then the first paint
Someone looking for a driver in Mumbai hits sevenco.in before the app. Home, /mumbai, and a page per trip type are separate URLs in one Next.js app. Each URL needs its own title, canonical, and structured data in the HTML, and the booking still has to paint before MapLibre.
02
Engineering challenges
The index, the first paint, the ring, the outline, the store link, and the city chip. Each one can send the wrong page, the wrong store, or a map that never settles on Mumbai.
- 01Several URLs, one canonical
Home, /mumbai, and six service pages can ship with the same title and the same canonical. A preview host that is indexable then ranks for “personal driver in Mumbai” ahead of sevenco.in, and Mumbai never has a URL of its own.
- 02The map holds the first paint
The cities section pulls MapLibre, the Positron style, and the overlay into the first document. That bundle sits in front of the booking still, which is the image the hero marks as priority. The service cards and the city chip wait with it.
- 03The ring the cities section is selling
app_settings key operational_geofence is a JSON string of lat and lng. A bad parse, a point with no latitude, or fewer than three points gives the cities section a shape it cannot close. With no Supabase URL the map is empty, and the page is still telling people the service area is live.
- 04The outline leaves the tiles
A polygon added as a map layer does not stay locked to OpenFreeMap Positron in this setup. Pan or zoom and the green ring leaves Mumbai, Thane, and the harbour. The area the page claims and the area on screen are no longer the same shape.
- 05One href, two stores
The rider app is com.sevenco.user on Google Play and the Sevenco listing on the App Store. Download the App, Get the app, and the rider QR share one address. An iPhone sent to Play, or an Android phone sent to the App Store, drops the install.
- 06A stored city that is not open
The chip lists Mumbai, which is available, and Navi Mumbai, which is not. localStorage key sevenco-selected-city can hold navi-mumbai, or a string that is not a city id. The chip then names a city the landing does not serve, on a page whose copy says Mumbai.
03
How we solved them
Each URL writes its own head. Preview hosts are noindex. The map loads after the hero. A ring that fails the shape check never reaches the map. The polygon is drawn on top of the tiles. /get-app sends the phone to its store. Only Mumbai is restored.
- Each URL writes its own head
Home keeps the layout title and canonical /. Mumbai sets its own title, description, and canonical /mumbai. Each service page does the same for its slug. When VERCEL_ENV is set and is not production, robots is noindex and nofollow.
- The map loads after the hero
The map is loaded with SSR off, and a pulse shows while the bundle arrives. The hero image stays in the document and is marked priority.
- A bad row never reaches the map
The read is app_settings key operational_geofence, and it is cached. The value has to be an array of at least three points, each with a numeric latitude and longitude. Anything else, a missing key, or a failed read uses the fallback ring from 28 July 2026.
- The ring is drawn on top
The tiles are OpenFreeMap Positron, and the worker loads from the site. The polygon is an SVG path projected from the map. It redraws on move, zoom, resize, and idle, one frame at a time. The ring is closed and wound, the map fits it, and the path follows the tiles.
- /get-app picks the store
The route reads the user agent and sec-ch-ua-platform on that request. An iPhone, iPad, iPod, or Mac goes to the App Store. Every other phone goes to Google Play for the rider app. Download buttons and the rider QR use that route.
- Only an open city is restored
The chip starts as Mumbai. On load it reads sevenco-selected-city and keeps the id only when that city exists and is available. Navi Mumbai stays disabled, labeled coming soon.
04
How Next.js serves the pages
Service URLs are static generation (SSG). Home and Mumbai refresh with the ring cache (ISR). The map is a client bundle, with SSR off. The head on each URL is the SEO record.
- 01Service pages are static
One-way, hourly, airport, full-day, corporate, and long-distance. generateStaticParams builds one page per slug, so those URLs are static HTML. An unknown slug is a not-found page. Privacy, terms, and account deletion are static routes beside them.
- 02Home and Mumbai are prerendered
Home and /mumbai render the same landing. The cities block is a server component: it reads the ring and passes the polygon to the map. That read sets the revalidation window, so Next.js serves the HTML and refreshes the page with the cache.
- 03The map is a client bundle
MapLibre is its own chunk. Eco fleet, the earn block, and the QR block are their own imports and still render on the server. Vercel Analytics and Speed Insights sit on the layout.
- 04One head, then the sitemap
The layout sets the home title, the description, an Open Graph image, and a large Twitter card. Home emits Organization, WebSite, LocalBusiness, Service, two SoftwareApplication nodes, and FAQPage. Mumbai adds a LocalBusiness and a breadcrumb. Each service page adds a Service node and a breadcrumb. The sitemap lists home, Mumbai, the legal routes, then the service pages. robots.txt allows / and points at that sitemap. Production is on Vercel. The apex domain redirects to www.
- 05/get-app runs on the request
The store link is a route handler. It answers that request with a redirect, so it is left out of the static build. The public pages are the prerendered documents.
05
What the site includes
What the indexed page actually shows: the hero, the six trip types, safety, the fleet numbers, the Mumbai map, then the two download cards.
- 01The front door
The header links to services, the download, safety, and cities, plus Help and Get the app. The hero reads “Your personal driver, on demand,” with Download the App and Explore services, and a still of the booking screen.
- 02The trip types
Six cards: one-way, hourly or round trip, airport, full-day, corporate, and long-distance. Each card opens its own page.
- 03How it works, then safety
Three steps: book the driver, meet the driver, enjoy the journey. Safety lists verified drivers, live trip tracking, incident support, and the published policies.
- 04The fleet section and the numbers
Eco-friendly fleet covers vetted drivers, zero-emission options, and faster urban matching. The strip under it reads 24/7, 100% background-checked drivers, and live trip tracking.
- 05The city and the map
The cities block says available in Mumbai and draws the live service area across Greater Mumbai. The chip under the hero opens the city dialog.
- 06Earn, download, questions
The earn block covers more trips, a chosen schedule, and weekly pay. Two QR cards follow: the rider app, and the driver app on Google Play with no App Store badge. Rider and driver questions sit under the article cards. The footer repeats the services, Mumbai, the phone number, and the legal links.
06
What we built
We shipped sevenco.in on Next.js. Service pages are static, home and Mumbai are prerendered and refresh with the ring cache, and each URL has its own canonical and structured data. The map is a client bundle, and /get-app answers on the request.
07
Runtime
Counts and clocks from sevenco.in.
URLs in the sitemap
Service pages with their own canonical
Legal URLs on the sitemap
JSON-LD nodes on the home page
JSON-LD nodes on Mumbai and on each service page
FAQ answers in the home schema
Open Graph image width
Open Graph image height
Widest slot for the priority hero image
Sections in their own bundles
Before home and Mumbai render again
Redirect from sevenco.in to www
08
What we delivered
- Sevenco site at sevenco.in
- Home page with the hero, city chip, and booking still
- Mumbai page with its own hero
- Six service pages
- How it works, safety, eco-friendly fleet, and the stats strip
- Mumbai service-area map
- City picker for Mumbai, with Navi Mumbai marked coming soon
- Earn section
- Rider and driver download QR cards
- /get-app store redirect
- Four article cards
- Rider and driver FAQ
- Privacy policy, terms, and account deletion
- Sitemap, robots rules, and page structured data
- Production hosting on Vercel
- Domain sevenco.in, with the apex redirected to www
09
Technology
- Next.js
- React
- TypeScript
- Supabase
- MapLibre
- Tailwind CSS
Live product
In production.
The site is live at sevenco.in.