-
Notifications
You must be signed in to change notification settings - Fork 1
Description
Summary
The ChatCops website is missing several critical SEO fundamentals: no sitemap.xml, no robots.txt, incomplete meta tags, no structured data (Schema.org JSON-LD), and no theme-color. These gaps hurt search discoverability and social sharing appearance.
This issue covers all the missing SEO pieces in one go. Each step is independent, so you can tackle them in any order.
Current State Audit
What exists (website/src/layouts/Landing.astro lines 20-38):
- ✅
<meta charset>,<meta viewport> - ✅
<title>,<meta name="description"> - ✅
<link rel="canonical"> - ✅
og:type,og:title,og:description,og:url - ✅
twitter:card,twitter:title,twitter:description - ✅
<link rel="icon">(favicon.svg)
What's missing:
- ❌ sitemap.xml — no sitemap integration in
astro.config.mjs - ❌ robots.txt — no file in
website/public/, no package - ❌
og:site_name— site name not declared - ❌
og:locale— language not declared in OG - ❌
twitter:site/twitter:creator** — no Twitter handle - ❌
theme-color— browser chrome color not set - ❌ Structured data (JSON-LD) — no Schema.org markup
- ❌
apple-touch-icon— no icon for iOS bookmarks - ❌
og:image— tracked in issue Add OG images to website using OGCOPS (og.codercops.com) #19, not this issue
Implementation Steps
1. Add Sitemap Generation
File: website/astro.config.mjs
Astro has a built-in sitemap integration. Install and configure it:
cd website && pnpm add @astrojs/sitemapThen update astro.config.mjs:
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://chat.codercops.com', // already set
integrations: [
react(),
sitemap(), // ADD THIS — generates sitemap.xml at build time
starlight({ /* ... */ }),
],
});This will auto-generate /sitemap-index.xml and /sitemap-0.xml at build time, including all static pages and Starlight docs pages.
Verify after build:
dist/sitemap-index.xmlexistsdist/sitemap-0.xmllists all pages (homepage + 19 docs pages)
2. Add robots.txt
New file: website/public/robots.txt
User-agent: *
Allow: /
Sitemap: https://chat.codercops.com/sitemap-index.xml
This tells search engines to crawl everything and points them to the sitemap.
3. Complete Meta Tags in Landing Layout
File: website/src/layouts/Landing.astro
Add the missing meta tags inside <head> (after line 38):
<!-- Site identity -->
<meta property="og:site_name" content="ChatCops" />
<meta property="og:locale" content="en_US" />
<!-- Twitter -->
<meta name="twitter:site" content="@codercops" />
<!-- Theme color (matches accent #6366f1) -->
<meta name="theme-color" content="#6366f1" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a" />
<!-- Apple -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />Also update the existing <html> tag (line 19) to include dir:
<html lang="en" dir="ltr">4. Add Apple Touch Icon
Create a 180x180 PNG icon for iOS. You can generate one from the existing favicon.svg:
File: website/public/apple-touch-icon.png
Options:
- Export from
favicon.svgat 180x180 with a solid background (use#6366f1indigo as background, white icon) - Or use a tool like https://realfavicongenerator.net with the existing SVG
5. Add Starlight Head Meta Tags
File: website/astro.config.mjs
Add missing meta tags to Starlight's head config (lines 25-38):
head: [
// ... existing widget script tag ...
{
tag: 'meta',
attrs: { property: 'og:site_name', content: 'ChatCops' },
},
{
tag: 'meta',
attrs: { property: 'og:locale', content: 'en_US' },
},
{
tag: 'meta',
attrs: { name: 'twitter:site', content: '@codercops' },
},
{
tag: 'meta',
attrs: { name: 'theme-color', content: '#6366f1' },
},
],6. Add Structured Data (JSON-LD) to Homepage
File: website/src/layouts/Landing.astro
Add Schema.org JSON-LD in the <head>. This helps Google understand the site and can produce rich search results:
<!-- Structured Data -->
<script type="application/ld+json" set:html={JSON.stringify({
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebSite",
"name": "ChatCops",
"url": "https://chat.codercops.com",
"description": description,
"publisher": {
"@type": "Organization",
"name": "CoderCops",
"url": "https://codercops.com"
}
},
{
"@type": "SoftwareApplication",
"name": "ChatCops",
"applicationCategory": "DeveloperApplication",
"operatingSystem": "Any",
"description": description,
"url": "https://chat.codercops.com",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"license": "https://opensource.org/licenses/MIT",
"programmingLanguage": ["TypeScript", "JavaScript"],
"codeRepository": "https://github.com/codercops/chatcops"
}
]
})} />7. Add BreadcrumbList Schema for Docs (Optional Enhancement)
Starlight already generates breadcrumbs visually. Adding the JSON-LD version helps Google show breadcrumb trails in search results. This can be done via Starlight's head config or a custom HeadConfig component.
For now, the Starlight default SEO is sufficient — just ensure steps 1-6 are done.
Files Summary
| File | Change |
|---|---|
website/astro.config.mjs |
Add @astrojs/sitemap integration, add meta tags to Starlight head |
website/src/layouts/Landing.astro |
Add og:site_name, og:locale, twitter:site, theme-color, structured data JSON-LD, apple-touch-icon link |
website/public/robots.txt |
New file — crawling rules + sitemap reference |
website/public/apple-touch-icon.png |
New file — 180x180 icon for iOS |
website/package.json |
Add @astrojs/sitemap dependency |
Verification Checklist
After deploying, validate with:
- OGCOPS Preview: https://og.codercops.com/preview — enter the page URL to verify all OG/meta tags are rendering correctly
- Google Rich Results Test: https://search.google.com/test/rich-results — should show SoftwareApplication schema
- Lighthouse SEO Audit: Run Chrome DevTools → Lighthouse → SEO — should score 100
- Sitemap: Visit
https://chat.codercops.com/sitemap-index.xml— should list all pages - Robots.txt: Visit
https://chat.codercops.com/robots.txt— should show the rules
Acceptance Criteria
-
@astrojs/sitemapinstalled andsitemap-index.xmlgenerated at build time -
robots.txtexists in public folder with sitemap reference -
og:site_nameset to "ChatCops" on all pages -
og:localeset to "en_US" on all pages -
twitter:siteset to "@codercops" on all pages -
theme-colormeta tag set to#6366f1on all pages - JSON-LD structured data present on homepage with
WebSite+SoftwareApplicationschemas -
apple-touch-icon.pngexists and is linked in<head> -
<html lang="en" dir="ltr">set on landing layout - Starlight docs pages inherit
og:site_name,og:locale,twitter:site,theme-colorvia head config - Lighthouse SEO score is 90+ (ideally 100)
- All existing meta tags remain intact (no regressions)
- Build succeeds without errors