Skip to content

Add comprehensive meta tags, sitemap, robots.txt, and structured data for SEO #20

@anurag629

Description

@anurag629

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/sitemap

Then 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.xml exists
  • dist/sitemap-0.xml lists 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.svg at 180x180 with a solid background (use #6366f1 indigo 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/sitemap installed and sitemap-index.xml generated at build time
  • robots.txt exists in public folder with sitemap reference
  • og:site_name set to "ChatCops" on all pages
  • og:locale set to "en_US" on all pages
  • twitter:site set to "@codercops" on all pages
  • theme-color meta tag set to #6366f1 on all pages
  • JSON-LD structured data present on homepage with WebSite + SoftwareApplication schemas
  • apple-touch-icon.png exists 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-color via head config
  • Lighthouse SEO score is 90+ (ideally 100)
  • All existing meta tags remain intact (no regressions)
  • Build succeeds without errors

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureNew feature or capabilitygood first issueGood for newcomerspriority: highHigh priority itemseoSearch engine optimizationwebsiteAffects the marketing/docs website

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions