feat(seo): Phase 2 — route-level metadata service and JSON-LD structured data
CI Pipeline / backend-test (push) Successful in 5m16s
CI Pipeline / backend-test (pull_request) Successful in 5m5s
CI Pipeline / frontend-test (pull_request) Successful in 27s
CI Pipeline / frontend-build (pull_request) Failing after 29s
CI Pipeline / backend-lint (pull_request) Successful in 8s
CI Pipeline / quality-gate (push) Successful in 2s
CI Pipeline / frontend-test (push) Successful in 28s
CI Pipeline / frontend-build (push) Failing after 29s
CI Pipeline / backend-lint (push) Successful in 8s
CI Pipeline / quality-gate (pull_request) Successful in 2s

Add SeoService for dynamic metadata management:
- Per-route document titles (e.g., 'KMountain Flower Radio — About')
- Meta descriptions from station config per route
- Canonical URLs, Open Graph tags, Twitter Card tags
- Input sanitization (HTML stripping, URL validation, attribute escaping)
- noindex robots directives for /login and /admin routes
- Centralized router watcher (zero per-component boilerplate)

Add StructuredDataService + StructuredDataComponent for JSON-LD:
- Organization schema (NCBOrganization) site-wide with contact info
- WebSite schema with publisher info
- WebPage schema per-route with breadcrumbs
- Dynamic Event schema on /events page
- RadioSeason schema on /schedule page

Wire up SeoService.watchRouter() in app-root ngOnInit.
Wire up StructuredDataComponent in app-root template.
Wire up EventsComponent and ScheduleComponent to feed data to
StructuredDataService for dynamic schema injection.

Includes full test suite for SeoService (22 tests).
This commit is contained in:
robot committed 2026-08-05 10:12:55 +00:00
1 parent 2716765223
commit 58267e8f59
10 files changed
+1194 -8

No files matched your search

+10 -6
View File
@@ -1,21 +1,22 @@
import { Component, computed, effect, inject, OnInit, OnDestroy } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { RouterOutlet } from '@angular/router';
import { NavbarComponent } from './navbar/navbar.component';
import { MediaPlayerComponent } from './media-player/media-player.component';
import { FooterComponent } from './footer/footer.component';
import { StructuredDataComponent } from './structured-data/structured-data.component';
import { StationConfigService } from './services/station-config.service';
import { SeoService } from './services/seo.service';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, NavbarComponent, MediaPlayerComponent, FooterComponent],
imports: [RouterOutlet, NavbarComponent, MediaPlayerComponent, FooterComponent, StructuredDataComponent],
templateUrl: './app.html',
styleUrl: './app.scss',
})
export class App implements OnInit, OnDestroy {
private titleService = inject(Title);
private stationConfig = inject(StationConfigService);
private seoService = inject(SeoService);
readonly hasStream = computed(() => {
const cfg = this.stationConfig.config();
@@ -26,11 +27,9 @@ export class App implements OnInit, OnDestroy {
private resizeObserver: ResizeObserver | null = null;
constructor() {
// Update favicon when station config changes.
effect(() => {
const config = this.stationConfig.config();
const fullName = `${config.name_primary} ${config.name_secondary}`.trim();
this.titleService.setTitle(fullName);
const faviconEl = document.querySelector('link[rel="icon"]') as HTMLLinkElement | null;
if (faviconEl && config.logo_url) {
faviconEl.href = config.logo_url;
@@ -47,6 +46,11 @@ export class App implements OnInit, OnDestroy {
}
ngOnInit(): void {
// Start watching router for automatic SEO metadata updates per route.
this.seoService.watchRouter();
// Handle the initial route (NavigationEnd already fired before ngOnInit).
this.seoService.resetToDefaults();
// Defer until the navbar is rendered in the DOM.
queueMicrotask(() => {
this.navbarEl = document.querySelector('app-navbar');