Location-Based Service Pages
Relevant source files
The following files were used as context for generating this wiki page:
- sunrise-angular/src/app/pages/locations/local-landing/local-landing.component.ts
- sunrise-angular/src/app/core/constants/locations-data.ts
- sunrise-angular/src/app/core/services/seo.service.ts
- sunrise-angular/src/app/pages/locations/local-landing/local-landing.component.html
- sunrise-angular/src/app/core/constants/seo-data.ts
- context/gbp.md
Location-Based Service Pages, also known as Local Landing or Geo Silo pages, provide localized content for specific geographic regions served by Sunrise Communication. These pages aggregate service information, local case studies, and micro-market data to improve local search visibility and provide relevant context to users in specific areas like Thane, Mumbai, and Navi Mumbai.
The system utilizes a data-driven approach where a central component, LocalLandingComponent, dynamically renders content based on location-specific data structures. This architecture supports specialized SEO strategies, including local business schema injection and localized FAQ sets to target high-intent local queries.
Architecture and Data Flow
The Location-Based Service Page system follows a reactive pattern using Angular Signals. The LocalLandingComponent retrieves data for a specific region and triggers SEO updates to ensure the page is optimized for local search engines.
This diagram shows the flow from route activation to the final rendering of localized content and SEO metadata.
Sources: sunrise-angular/src/app/pages/locations/local-landing/local-landing.component.ts, sunrise-angular/src/app/core/services/seo.service.ts:314-315
Data Structures
The system relies on the LocalLandingData interface to define the structure for each geographic silo. Key fields include localized metadata, micro-market lists, and hardware-specific case studies.
| Field | Type | Description |
|---|---|---|
regionName | string | The display name of the area (e.g., "Thane West"). |
localMicroMarkets | string[] | Specific localities within the region for MEO optimization. |
featuredServices | Array | Service objects containing titles, descriptions, and internal routes. |
localCaseStudy | Object | Details of a completed project in that specific region. |
localFaqs | Array | Region-specific questions and answers for AEO. |
Sources: sunrise-angular/src/app/core/services/seo.service.ts:314-385, sunrise-angular/src/app/pages/locations/local-landing/local-landing.component.html:27-32
Localized SEO Implementation
The SeoService handles the generation of an integrated @graph schema specifically for local landing pages. This schema combines LocalBusiness, Service, FAQPage, and BreadcrumbList nodes to provide search engines with a comprehensive understanding of the business's local relevance.
Schema Injection Logic
When a local landing page loads, the updateForLocalLanding method performs the following actions:
- Meta Tag Update: Sets the
metaTitle,metaDescription, andmetaKeywordsspecific to the location. - LocalBusiness Node: Injects the base business identity, including the Charai, Thane West address and geo-coordinates (
19.1868, 72.9757). - Localized Service Node: Maps the
localMicroMarketstoareaServedproperties usingPlacetypes. - FAQPage Node: Transforms the
localFaqsarray into a structured schema node for "Zero-Click" search results.
The relationship between the SEO service and the data structure used to generate localized metadata.
Sources: sunrise-angular/src/app/core/services/seo.service.ts:314-385, context/gbp.md:14-16
UI Components and Interaction
The frontend implementation utilizes several interactive elements to engage local users and drive conversions via WhatsApp.
Local Case Study Showcase
The local-landing.component.html includes a dedicated section for regional case studies. It highlights technical challenges and engineered solutions specific to the locality, such as turnkey installations for housing societies.
<!-- Verified Case Study Section -->
<div class="casestudy-card">
<span class="badge">Verified {{ loc.regionName }} Case Study</span>
<h3>{{ loc.localCaseStudy.title }}</h3>
<div class="hardware-list">
@for (item of loc.localCaseStudy.hardwareInstalled; track item) {
<li>{{ item }}</li>
}
</div>
</div>
Sources: sunrise-angular/src/app/pages/locations/local-landing/local-landing.component.html:84-118
Conversion Mechanisms
Each page features a local-quick-contact-card designed to provide immediate access to technical experts.
- WhatsApp Integration: Generates a direct URL for inquiries.
- Society Audit Form: Embeds an
app-society-audit-formfor booking free site inspections in the specific region. - Direct Dial: Links the primary phone number (
+91 93238 48622) fromSITE_DATA.
Sources: sunrise-angular/src/app/pages/locations/local-landing/local-landing.component.html:43-60, context/gbp.md:10
Service Coverage areas
The project maintains a ground truth for service territories in gbp.md and seo-data.ts. These areas are used to populate the areaServed field in the Knowledge Graph and the locality pills in the UI.
| Region | Primary Hub | Key Localities |
|---|---|---|
| Thane | Charai (HQ) | Naupada, Ghodbunder Road, Wagle Estate, Majiwada |
| Mumbai | BKC / Dadar | Mulund, Powai, Andheri, Bandra, Ghatkopar |
| Navi Mumbai | Mahape | Vashi, Airoli, Nerul, Belapur, Panvel |
Sources: context/gbp.md:25-29, sunrise-angular/src/app/core/constants/seo-data.ts:98-125
Location-Based Service Pages function as the primary localized entry points for the Sunrise Communication platform. By combining structured data, regional case studies, and deep SEO integration, these pages ensure technical services are visible to high-intent users across the Mumbai Metropolitan Region.