About // WebCheck

# What is WebCheck?

WebCheck is a browser-based website audit tool that verifies if your website has essential files and configurations in place. It helps ensure your site follows web standards and best practices for SEO, security, and user experience.

# Understanding Check Results

Each check displays one of three status indicators:

✓ Pass (Green) - The file or configuration was found and is working correctly
✗ Fail (Red) - The file or configuration is missing or not working
? Warning (Amber) - Unable to verify due to browser limitations (CORS) - manual verification needed

Each check includes a "🔗 Visit" link that opens the checked resource in a new tab, allowing you to manually verify the results.

# What We Check

WebCheck validates the following critical website components:

1. HTTPS/SSL Configuration

Checks if your site uses HTTPS (secure connection)
Always shows ? status - please verify manually by clicking the link
Browser limitations prevent automatic verification
Important for: Security, SEO ranking, user trust

2. robots.txt

Location: /robots.txt
Controls search engine crawler access to your site
Important for: SEO, preventing indexing of sensitive pages

3. sitemap.xml

Location: /sitemap.xml
Helps search engines discover and index your pages
Important for: SEO, content discovery

4. security.txt

Locations checked: /.well-known/security.txt (standard) or /security.txt (alternative)
Provides security researchers with contact information
Displays which location(s) contain the file if found
Important for: Security, responsible disclosure

5. favicon.ico

Locations checked: /favicon.ico or /favicons/favicon.ico
Note: Favicons can also be defined in HTML using <link rel="icon"> tag
Website icon displayed in browser tabs and bookmarks
Displays which location(s) contain the file if found
Important for: Branding, user experience

6. 404 Error Page

Custom error page for non-existent URLs
Important for: User experience, navigation

7. site.webmanifest

Location: /site.webmanifest
Enables Progressive Web App (PWA) features
Important for: Mobile experience, app-like functionality

8. humans.txt

Location: /humans.txt
Credits the people behind the website
Important for: Transparency, team recognition

9. Meta Tags

Title, description, and other HTML meta tags
Click the "🔗 Visit" link to open the Meta Tag Viewer
The viewer displays all meta tags, link tags, and head elements
Shows formatted HTML source of the entire <head> section
Important for: SEO, social media sharing

# Current Limitations

Due to browser CORS (Cross-Origin Resource Sharing) restrictions, some checks have limitations:

HTTPS/SSL: Always shows ? status - verify manually via the provided link
File checks: May show ? if CORS prevents access (use the link to verify)
Meta Tags: Cannot be parsed automatically - use the Meta Tag Viewer (link provided)
Clickable links: All checks include links to manually verify the results

Workaround: Click the "🔗 Visit" link next to any check to manually verify the resource in your browser.

For a production version with full verification capabilities, a backend API service is needed to fetch and analyze websites server-side without CORS restrictions.

# Meta Tag Viewer

WebCheck includes a dedicated Meta Tag Viewer accessible at meta.html that displays:

Page title, description, keywords, and viewport settings
All meta tags with their attributes
All link tags (stylesheets, favicons, etc.)
Other head elements (scripts, styles)
Full formatted <head> section source code

Usage: Access via meta.html?url=example.com or click the link in the Meta Tags check results.

Note: The Meta Tag Viewer may also be subject to CORS restrictions. If blocked, a link to view the page source directly will be provided.

# Development Steps & TODO

✓ Phase 1: Core Frontend (Completed)

Create HTML structure with input fields
Design terminal-style CSS based on lebon.info
Implement basic JavaScript checks
Add visual feedback for results

⚡ Phase 2: Backend API (Planned)

Create Node.js/Python backend service
Implement server-side website fetching
Add HTML parsing for meta tags
Check HTTP headers (security headers, redirects)
Implement rate limiting and caching

⚡ Phase 3: Enhanced Checks (Planned)

SSL certificate validation and expiration
Page load speed analysis
Mobile responsiveness check
Accessibility (WCAG) validation
Social media meta tags (Open Graph, Twitter Cards)
Structured data (Schema.org) validation

⚡ Phase 4: Advanced Features (Planned)

Save and export audit reports (PDF/JSON)
Historical tracking and comparisons
Scheduled automatic audits
Email notifications for issues
API for integration with other tools
Batch processing for multiple domains

⚡ Phase 5: User Experience (Planned)

User accounts and saved websites
Customizable check configurations
Score/grade system for overall site health
Recommendations for fixing issues
Dark/light theme toggle

# Technical Stack

Current Implementation:

HTML5 for structure
Vanilla JavaScript (no frameworks)
CSS3 with custom properties (terminal theme)
Fetch API for network requests

Planned Backend:

Node.js with Express or Python with FastAPI
Puppeteer/Playwright for full page analysis
Redis for caching results
PostgreSQL for storing audit history

# How to Use

Enter one or more website domains (e.g., example.com)
Separate multiple domains with commas
Click "Run Audit" or press Enter
View results with pass (✓), fail (✗), or warning (?) status for each check
Click the "🔗 Visit" link next to any check to manually verify the resource
For meta tags, click the link to open the Meta Tag Viewer

# Best Practices

For your website to pass all checks, ensure you have:

✓ Valid SSL certificate installed (HTTPS)
✓ robots.txt file in root directory
✓ sitemap.xml file in root directory
✓ security.txt in /.well-known/ or root directory
✓ favicon.ico in root, /favicons/ directory, or defined in HTML
✓ Custom 404 error page configured
✓ site.webmanifest for PWA support
✓ humans.txt for team credits (optional but recommended)
✓ Proper meta tags (title, description) in HTML head