SEO & Public Assets
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The SEO and public assets of the SuperClaude Website encompass the static configurations and metadata required to ensure discoverability, accessibility, and platform integration for the SuperClaude Framework's web presence. This system manages how the application is perceived by search engines and how it behaves when installed on client devices or shared across social platforms.
The scope of these assets includes the base HTML template, Progressive Web App (PWA) manifests, favicon sets, and the automated generation of documentation maps to support dynamic content discovery. These elements work in tandem with the React-based frontend to provide a cohesive and professional entry point for the framework.
Public Web Metadata
The core SEO configuration is managed within the entry HTML file, which defines the document structure and essential metadata for search engine crawlers and browser behavior.
Meta Configuration
The application uses standard HTML5 meta tags to define character encoding, viewport behavior, and descriptive content.
| Tag | Purpose | Configuration |
|---|---|---|
charset | Character Encoding | UTF-8 |
viewport | Mobile responsiveness | width=device-width, initial-scale=1 |
theme-color | Browser UI color | #000000 |
description | Search engine snippet | "SuperClaude Framework - A meta-programming configuration framework for Claude Code." |
Sources: public/index.html:4-13
Assets and Preconnections
To optimize performance and visual identity, the site utilizes preconnection hints for external font providers and defines icons for various device ecosystems.
- Fonts: Preconnects to
fonts.googleapis.comandfonts.gstatic.comto reduce latency for the Inter and JetBrains Mono font families. - Touch Icons: Specifies an Apple Touch Icon (
logo192.png) for iOS device compatibility.
Sources: public/index.html:14-20
Progressive Web App & Manifest
The manifest.json file serves as the primary metadata source for web app installation and platform-level integration.
Manifest Configuration
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{ "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" },
{ "src": "logo192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "logo512.png", "type": "image/png", "sizes": "512x512" }
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Sources: public/manifest.json:1-25
Relationship Flow
The following diagram illustrates how the public assets are linked and utilized by the client browser:
Documentation Mapping & Automation
To facilitate SEO and internal navigation for the documentation suite, the project employs an automated build-time script that generates a map of all available Markdown files.
Automation Logic
The generate-docs-map.js script processes files within public/docs/ and structures them based on a predefined categoryOrder.
- Discovery: Identifies directories (categories) and
.mdfiles. - Sorting: Orders categories by: Getting-Started, User-Guide, Reference, Developer-Guide, and Templates.
- Title Extraction: Parses the first H1 header in each file to use as the display title.
- Export: Writes the resulting array to
src/docs-map.jsonfor consumption by the React application.
Sources: scripts/generate-docs-map.js:1-51
Documentation Map Generation Flow
Hosting & Redirects
The site's public accessibility is managed via Netlify configuration, ensuring that the Single Page Application (SPA) routing does not interfere with asset delivery or SEO.
Redirect Rules
A global redirect rule ensures that all paths point to index.html, allowing React Router to handle deep-linked URLs for documentation and sub-pages.
| Directive | Value | Description |
|---|---|---|
from | /* | Captures all requests |
to | /index.html | Forwards to main entry |
status | 200 | Maintains URL in browser |
Sources: netlify.toml:8-11
Conclusion
The SEO and public assets of the SuperClaude Website provide the structural foundation for its discoverability and cross-platform behavior. Through a combination of static metadata in index.html, standardized PWA manifests, and automated documentation mapping, the project ensures that both users and automated crawlers can efficiently navigate and interact with the framework's documentation and resources.