Medium Implementation

Angular Implementation

Implement GEO in Angular with server-side rendering and API endpoints

Implementation Overview

Angular provides good support for GEO implementation with its server-side rendering and API capabilities

Medium
Implementation
4-6
Hours
6
Steps

Angular's server-side rendering and API capabilities make it possible to implement all GEO endpoints. The framework's enterprise-grade features ensure robust implementation.

Step 1: Create AI.txt Endpoint

Set up the AI crawler permissions endpoint

src/app/services/geo.service.tstypescript🔴 Angular
1import { Injectable } from '@angular/core';
2import { HttpClient } from '@angular/common/http';
3import { Observable } from 'rxjs';
4
5@Injectable({
6 providedIn: 'root'
7})
8export class GeoService {
9 constructor(private http: HttpClient) {}
10
11 getAiTxt(): Observable<string> {
12 return this.http.get('/.well-known/ai.txt', { responseType: 'text' });
13 }
14}
15
16// In your server.ts or main.ts
17app.get('/.well-known/ai.txt', (req, res) => {
18 const aiTxt = `# AI.txt for yoursite.com
19# This file specifies which JSON endpoints are accessible to AI crawlers
20
21User-agent: *
22Allow: /ai/faq.json
23Allow: /ai/service.json
24Allow: /ai/summary.json
25
26# Last updated: ${new Date().toISOString().split('T')[0]}`;
27
28 res.setHeader('Content-Type', 'text/plain; charset=utf-8');
29 res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');
30 res.send(aiTxt);
31});

Step 2: Create AI Summary Endpoint

Implement the AI summary endpoint with your site information

src/app/services/geo.service.tstypescript🔴 Angular
1// In your server.ts or main.ts
2app.get('/ai/summary.json', (req, res) => {
3 const summary = {
4 version: "1.0",
5 lastModified: new Date().toISOString(),
6 summary: "Your Angular app provides [services] to [audience] with [benefits]. Built with Angular for optimal performance and SEO.",
7 keyFeatures: [
8 "Angular framework",
9 "TypeScript support",
10 "Server-side rendering",
11 "Dependency injection",
12 "Reactive programming"
13 ],
14 targetAudience: [
15 "Enterprise developers",
16 "Full-stack developers",
17 "TypeScript developers"
18 ],
19 primaryUseCases: [
20 "Enterprise applications",
21 "Progressive web apps",
22 "Single page applications",
23 "E-commerce"
24 ]
25 };
26
27 res.setHeader('Content-Type', 'application/json');
28 res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');
29 res.json(summary);
30});
31
32// In your Angular service
33@Injectable({
34 providedIn: 'root'
35})
36export class GeoService {
37 constructor(private http: HttpClient) {}
38
39 getSummary(): Observable<any> {
40 return this.http.get('/ai/summary.json');
41 }
42}

Step 3: Create FAQ Endpoint

Add frequently asked questions for AI systems

src/app/services/geo.service.tstypescript🔴 Angular
1// In your server.ts or main.ts
2app.get('/ai/faq.json', (req, res) => {
3 const faq = {
4 version: "1.0",
5 lastModified: new Date().toISOString(),
6 faqs: [
7 {
8 question: "What is this Angular app about?",
9 answer: "This is a [service type] built with Angular that helps [audience] with [benefits]."
10 },
11 {
12 question: "What technologies are used?",
13 answer: "This app is built with Angular, TypeScript, and modern web standards."
14 },
15 {
16 question: "How can I get started?",
17 answer: "Visit our documentation or contact us for more information about our services."
18 }
19 ]
20 };
21
22 res.setHeader('Content-Type', 'application/json');
23 res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');
24 res.json(faq);
25});
26
27// In your Angular service
28@Injectable({
29 providedIn: 'root'
30})
31export class GeoService {
32 constructor(private http: HttpClient) {}
33
34 getFaq(): Observable<any> {
35 return this.http.get('/ai/faq.json');
36 }
37}

Step 4: Create Service Endpoint

Define your service capabilities and endpoints

src/app/services/geo.service.tstypescript🔴 Angular
1// In your server.ts or main.ts
2app.get('/ai/service.json', (req, res) => {
3 const service = {
4 version: "1.0",
5 lastModified: new Date().toISOString(),
6 service: {
7 name: "Your Angular App",
8 type: "web-application",
9 description: "A modern web application built with Angular",
10 url: "https://yoursite.com",
11 capabilities: [
12 "Server-side rendering",
13 "Progressive web app",
14 "TypeScript support",
15 "Dependency injection"
16 ],
17 endpoints: {
18 "home": "/",
19 "about": "/about",
20 "contact": "/contact",
21 "api": "/api"
22 },
23 supportedFrameworks: ["Angular", "TypeScript", "RxJS"],
24 contact: {
25 "email": "contact@yoursite.com",
26 "documentation": "https://yoursite.com/docs"
27 },
28 pricing: "free",
29 availability: "24/7"
30 }
31 };
32
33 res.setHeader('Content-Type', 'application/json');
34 res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');
35 res.json(service);
36});
37
38// In your Angular service
39@Injectable({
40 providedIn: 'root'
41})
42export class GeoService {
43 constructor(private http: HttpClient) {}
44
45 getService(): Observable<any> {
46 return this.http.get('/ai/service.json');
47 }
48}

Step 5: Create Robots.txt Endpoint

Set up general crawler permissions and AI crawler access

src/app/services/geo.service.tstypescript🔴 Angular
1// In your server.ts or main.ts
2app.get('/robots.txt', (req, res) => {
3 const robots = `# Allow legitimate search engines and AI crawlers
4User-agent: Googlebot
5Allow: /
6
7User-agent: Bingbot
8Allow: /
9
10User-agent: Slurp
11Allow: /
12
13User-agent: DuckDuckBot
14Allow: /
15
16User-agent: Baiduspider
17Allow: /
18
19User-agent: YandexBot
20Allow: /
21
22# Allow AI crawlers for GEO content
23User-agent: GPTBot
24Allow: /
25
26User-agent: ChatGPT-User
27Allow: /
28
29User-agent: CCBot
30Allow: /
31
32User-agent: anthropic-ai
33Allow: /
34
35User-agent: Claude-Web
36Allow: /
37
38# Allow social media crawlers
39User-agent: facebookexternalhit
40Allow: /
41
42User-agent: Twitterbot
43Allow: /
44
45User-agent: LinkedInBot
46Allow: /
47
48# Block suspicious bots and scrapers
49User-agent: *
50Disallow: /api/
51Disallow: /assets/
52Disallow: /admin/
53Disallow: /private/
54Disallow: /*.json$
55Disallow: /*?*
56
57# Block common bad bots
58User-agent: AhrefsBot
59Disallow: /
60
61User-agent: MJ12bot
62Disallow: /
63
64User-agent: DotBot
65Disallow: /
66
67User-agent: SemrushBot
68Disallow: /
69
70User-agent: BLEXBot
71Disallow: /
72
73User-agent: DataForSeoBot
74Disallow: /
75
76User-agent: MegaIndex
77Disallow: /
78
79User-agent: PetalBot
80Disallow: /
81
82User-agent: AspiegelBot
83Disallow: /
84
85User-agent: SeoCheckBot
86Disallow: /
87
88User-agent: SeoBot
89Disallow: /
90
91User-agent: SeobilityBot
92Disallow: /
93
94User-agent: SiteAuditBot
95Disallow: /
96
97User-agent: Siteimprove
98Disallow: /
99
100User-agent: SiteLockSpider
101Disallow: /
102
103User-agent: SiteSucker
104Disallow: /
105
106User-agent: Sogou
107Disallow: /
108
109User-agent: spbot
110Disallow: /
111
112User-agent: SurveyBot
113Disallow: /
114
115User-agent: TurnitinBot
116Disallow: /
117
118User-agent: Vagabondo
119Disallow: /
120
121User-agent: VelenPublicWebCrawler
122Disallow: /
123
124User-agent: WebDataStats
125Disallow: /
126
127User-agent: WebEnhancer
128Disallow: /
129
130User-agent: WebStripper
131Disallow: /
132
133User-agent: WebSauger
134Disallow: /
135
136User-agent: WebZIP
137Disallow: /
138
139User-agent: WotBox
140Disallow: /
141
142User-agent: Wprecon
143Disallow: /
144
145User-agent: Xaldon_WebSpider
146Disallow: /
147
148Sitemap: https://yoursite.com/sitemap-llm.xml`;
149
150 res.setHeader('Content-Type', 'text/plain');
151 res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');
152 res.send(robots);
153});
154
155// In your Angular service
156@Injectable({
157 providedIn: 'root'
158})
159export class GeoService {
160 constructor(private http: HttpClient) {}
161
162 getRobots(): Observable<string> {
163 return this.http.get('/robots.txt', { responseType: 'text' });
164 }
165}

Step 6: Create Sitemap-LLM.xml Endpoint

Create an LLM-optimized sitemap that includes all GEO endpoints

src/app/services/geo.service.tstypescript🔴 Angular
1// In your server.ts or main.ts
2app.get('/sitemap-llm.xml', (req, res) => {
3 const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
4<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
5 <!-- Main site pages -->
6 <url>
7 <loc>https://yoursite.com/</loc>
8 <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
9 <changefreq>weekly</changefreq>
10 <priority>1.0</priority>
11 </url>
12
13 <!-- GEO Contract Endpoints -->
14 <url>
15 <loc>https://yoursite.com/.well-known/ai.txt</loc>
16 <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
17 <changefreq>monthly</changefreq>
18 <priority>0.8</priority>
19 </url>
20 <url>
21 <loc>https://yoursite.com/ai/summary.json</loc>
22 <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
23 <changefreq>weekly</changefreq>
24 <priority>0.8</priority>
25 </url>
26 <url>
27 <loc>https://yoursite.com/ai/faq.json</loc>
28 <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
29 <changefreq>monthly</changefreq>
30 <priority>0.7</priority>
31 </url>
32 <url>
33 <loc>https://yoursite.com/ai/service.json</loc>
34 <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
35 <changefreq>monthly</changefreq>
36 <priority>0.7</priority>
37 </url>
38
39 <!-- Other site pages -->
40 <url>
41 <loc>https://yoursite.com/docs</loc>
42 <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
43 <changefreq>weekly</changefreq>
44 <priority>0.9</priority>
45 </url>
46</urlset>`;
47
48 res.setHeader('Content-Type', 'application/xml');
49 res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');
50 res.send(sitemap);
51});
52
53// In your Angular service
54@Injectable({
55 providedIn: 'root'
56})
57export class GeoService {
58 constructor(private http: HttpClient) {}
59
60 getSitemap(): Observable<string> {
61 return this.http.get('/sitemap-llm.xml', { responseType: 'text' });
62 }
63}