Loading...
Loading...
Implement GEO in Angular with server-side rendering and API endpoints
Angular provides good support for GEO implementation with its server-side rendering and API capabilities
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.
Set up the AI crawler permissions endpoint
1import { Injectable } from '@angular/core';2import { HttpClient } from '@angular/common/http';3import { Observable } from 'rxjs';45@Injectable({6 providedIn: 'root'7})8export class GeoService {9 constructor(private http: HttpClient) {}1011 getAiTxt(): Observable<string> {12 return this.http.get('/.well-known/ai.txt', { responseType: 'text' });13 }14}1516// In your server.ts or main.ts17app.get('/.well-known/ai.txt', (req, res) => {18 const aiTxt = `# AI.txt for yoursite.com19# This file specifies which JSON endpoints are accessible to AI crawlers2021User-agent: *22Allow: /ai/faq.json23Allow: /ai/service.json24Allow: /ai/summary.json2526# Last updated: ${new Date().toISOString().split('T')[0]}`;2728 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});
Implement the AI summary endpoint with your site information
1// In your server.ts or main.ts2app.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 };2627 res.setHeader('Content-Type', 'application/json');28 res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');29 res.json(summary);30});3132// In your Angular service33@Injectable({34 providedIn: 'root'35})36export class GeoService {37 constructor(private http: HttpClient) {}3839 getSummary(): Observable<any> {40 return this.http.get('/ai/summary.json');41 }42}
Add frequently asked questions for AI systems
1// In your server.ts or main.ts2app.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 };2122 res.setHeader('Content-Type', 'application/json');23 res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');24 res.json(faq);25});2627// In your Angular service28@Injectable({29 providedIn: 'root'30})31export class GeoService {32 constructor(private http: HttpClient) {}3334 getFaq(): Observable<any> {35 return this.http.get('/ai/faq.json');36 }37}
Define your service capabilities and endpoints
1// In your server.ts or main.ts2app.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 };3233 res.setHeader('Content-Type', 'application/json');34 res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');35 res.json(service);36});3738// In your Angular service39@Injectable({40 providedIn: 'root'41})42export class GeoService {43 constructor(private http: HttpClient) {}4445 getService(): Observable<any> {46 return this.http.get('/ai/service.json');47 }48}
Set up general crawler permissions and AI crawler access
1// In your server.ts or main.ts2app.get('/robots.txt', (req, res) => {3 const robots = `# Allow legitimate search engines and AI crawlers4User-agent: Googlebot5Allow: /67User-agent: Bingbot8Allow: /910User-agent: Slurp11Allow: /1213User-agent: DuckDuckBot14Allow: /1516User-agent: Baiduspider17Allow: /1819User-agent: YandexBot20Allow: /2122# Allow AI crawlers for GEO content23User-agent: GPTBot24Allow: /2526User-agent: ChatGPT-User27Allow: /2829User-agent: CCBot30Allow: /3132User-agent: anthropic-ai33Allow: /3435User-agent: Claude-Web36Allow: /3738# Allow social media crawlers39User-agent: facebookexternalhit40Allow: /4142User-agent: Twitterbot43Allow: /4445User-agent: LinkedInBot46Allow: /4748# Block suspicious bots and scrapers49User-agent: *50Disallow: /api/51Disallow: /assets/52Disallow: /admin/53Disallow: /private/54Disallow: /*.json$55Disallow: /*?*5657# Block common bad bots58User-agent: AhrefsBot59Disallow: /6061User-agent: MJ12bot62Disallow: /6364User-agent: DotBot65Disallow: /6667User-agent: SemrushBot68Disallow: /6970User-agent: BLEXBot71Disallow: /7273User-agent: DataForSeoBot74Disallow: /7576User-agent: MegaIndex77Disallow: /7879User-agent: PetalBot80Disallow: /8182User-agent: AspiegelBot83Disallow: /8485User-agent: SeoCheckBot86Disallow: /8788User-agent: SeoBot89Disallow: /9091User-agent: SeobilityBot92Disallow: /9394User-agent: SiteAuditBot95Disallow: /9697User-agent: Siteimprove98Disallow: /99100User-agent: SiteLockSpider101Disallow: /102103User-agent: SiteSucker104Disallow: /105106User-agent: Sogou107Disallow: /108109User-agent: spbot110Disallow: /111112User-agent: SurveyBot113Disallow: /114115User-agent: TurnitinBot116Disallow: /117118User-agent: Vagabondo119Disallow: /120121User-agent: VelenPublicWebCrawler122Disallow: /123124User-agent: WebDataStats125Disallow: /126127User-agent: WebEnhancer128Disallow: /129130User-agent: WebStripper131Disallow: /132133User-agent: WebSauger134Disallow: /135136User-agent: WebZIP137Disallow: /138139User-agent: WotBox140Disallow: /141142User-agent: Wprecon143Disallow: /144145User-agent: Xaldon_WebSpider146Disallow: /147148Sitemap: https://yoursite.com/sitemap-llm.xml`;149150 res.setHeader('Content-Type', 'text/plain');151 res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');152 res.send(robots);153});154155// In your Angular service156@Injectable({157 providedIn: 'root'158})159export class GeoService {160 constructor(private http: HttpClient) {}161162 getRobots(): Observable<string> {163 return this.http.get('/robots.txt', { responseType: 'text' });164 }165}
Create an LLM-optimized sitemap that includes all GEO endpoints
1// In your server.ts or main.ts2app.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>1213 <!-- 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>3839 <!-- 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>`;4748 res.setHeader('Content-Type', 'application/xml');49 res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');50 res.send(sitemap);51});5253// In your Angular service54@Injectable({55 providedIn: 'root'56})57export class GeoService {58 constructor(private http: HttpClient) {}5960 getSitemap(): Observable<string> {61 return this.http.get('/sitemap-llm.xml', { responseType: 'text' });62 }63}
Complete your GEO implementation and test it