Advanced SEO

Google Sitelinks (JSON-LD)

From a simple link to a dominating search result. Learn how to help Google understand your site structure and display sitelinks.

Have you ever wondered why Amazon or Wikipedia look so massive on Google? They have 6 additional links (sitelinks) or even a search bar under the main link.

The secret is Structured Data (JSON-LD). This is invisible code written specifically for machines (Google bots). We implement a fully automated system that generates this data.

1. The Goal: Dominance in the SERPs

This is what a result looks like when JSON-LD is implemented correctly. Google recognizes the hierarchy (breadcrumbs) and important subpages.

adenui.com›Components›Button

ADEN UI - The Ultimate Component Library

Build better apps in less time. Fully accessible, SSR-ready and performant Angular components.

Components

Browse our collection of 50+ inputs...

Guides

Learn everything about SSR & SEO...

Showcase

See what others have built...

Access your dashboard and settings...

2. The Architecture: The Auto-Pilot

We don't want to manually write JSON-LD into every component. That would be unmaintainable. Instead, we build a **service** that runs in the background like a watchdog. It monitors the router and automatically generates breadcrumbs.

json-ld.service.ts

import { Injectable, inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { filter } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class JsonLdService {
  private doc = inject(DOCUMENT);
  private router = inject(Router);
  private route = inject(ActivatedRoute);
  private baseUrl = 'https://adenui.com';

  constructor() {
    // The "Auto-Pilot" starts immediately upon injection
    this.initAutoBreadcrumbs();
  }

  // 1. Automatically generate breadcrumbs on navigation
  private initAutoBreadcrumbs() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // ... Logic traverses the router tree ...
      // ... and generates JSON-LD BreadcrumbList ...
    });
  }

  // 2. Helper method for the homepage (Amazon-style)
  setWebsiteSchema() {
    const schema = {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "ADEN UI",
      "url": this.baseUrl
    };
    this.insertSchema(schema);
  }

  // 3. Injection into the <head>
  private insertSchema(schema: any) {
    let script = this.doc.querySelector('script[type="application/ld+json"]');
    if (!script) {
      script = this.doc.createElement('script');
      script.setAttribute('type', 'application/ld+json');
      this.doc.head.appendChild(script);
    }
    script.textContent = JSON.stringify(schema);
  }
}

3. Configuration in the Routes

All we need to do now is give our routes a name. We use the data object. Our service automatically reads the breadcrumb field.

app.routes.ts

// app.routes.ts
export const routes: Routes = [
  // Homepage (No breadcrumb needed)
  {
    path: '',
    component: Home
  },

  // Subpages: Just set the 'breadcrumb' property!
  {
    path: 'components',
    loadComponent: ...,
    data: {
      title: 'UI Components',
      breadcrumb: 'Components' // <--- This triggers the service
    }
  },
  {
    path: 'showcase',
    loadComponent: ...,
    data: {
      title: 'Showcase',
      breadcrumb: 'Showcase'
    }
  }
];

4. Integration (One-Time)

To start the service, we need to inject it once in the AppComponent ("wake it up"). Additionally, we set the special "WebSite" schema on the homepage (Home) so that Google recognizes our brand.

app.component.ts

// 1. app.component.ts (Activate globally)
export class AppComponent {
  // Just inject it to start the service (Constructor runs immediately)
  private jsonLd = inject(JsonLdService);
}

// 2. home.component.ts (Define the brand)
export class Home implements OnInit {
  private jsonLd = inject(JsonLdService);

  ngOnInit() {
    // Tells Google: "This is the main page of the brand"
    this.jsonLd.setWebsiteSchema();
  }
}

💡

Testing: To check if everything works, use the official validation tool. Simply paste your generated code (from View Source) there.