feat(frontend): add per-page SEO, 404 page, OG tags, and sitemap updates #4

Merged

starkSV merged 1 commit from feat/seo-improvements into main

2026-05-12 20:40:24 +05:30

starkSV commented

2026-05-12 20:39:34 +05:30

(Migrated from github.com)

Summary

Replace react-helmet-async (incompatible with React 19) with React 19's native document metadata hoisting — <title>, <meta>, <link> rendered directly in JSX are auto-hoisted to <head>, no library needed
Add per-page <title>, <meta name="description">, <link rel="canonical">, and Open Graph tags to all 6 pages
Add JSON-LD SoftwareApplication schema on HomePage and BreadcrumbList on ProductDetailPage
Add 404 NotFoundPage with noindex meta
Extend index.html with og:site_name, og:image, og:type, and Twitter card tags as static pre-JS fallbacks; remove duplicate static canonical (each page sets its own)
Update sitemap.xml with product IDs 3321 and 3324 and <lastmod> dates
Add product screenshots to README

Test plan

Navigate between all routes — browser tab title updates correctly on each page
Check DevTools → Elements → <head> on /products and /product/3113 — correct <title>, <meta name="description">, and <link rel="canonical"> per page
Visit a non-existent product ID — 404 page shown, noindex in head
Share a product URL — OG preview uses page-specific title/description

Summary by CodeRabbit

Documentation
- Added screenshots section to README with four thumbnail images showcasing homepage, releases, product details, and download links.
New Features
- Implemented dedicated 404 error page with navigation back to home.
Chores
- Enhanced social media metadata with Open Graph and Twitter card tags.
- Added JSON-LD structured data across pages.
- Updated sitemap with modification dates and new product URLs.

## Summary - Replace `react-helmet-async` (incompatible with React 19) with React 19's native document metadata hoisting — `<title>`, `<meta>`, `<link>` rendered directly in JSX are auto-hoisted to `<head>`, no library needed - Add per-page `<title>`, `<meta name="description">`, `<link rel="canonical">`, and Open Graph tags to all 6 pages - Add JSON-LD `SoftwareApplication` schema on HomePage and `BreadcrumbList` on ProductDetailPage - Add 404 `NotFoundPage` with `noindex` meta - Extend `index.html` with `og:site_name`, `og:image`, `og:type`, and Twitter card tags as static pre-JS fallbacks; remove duplicate static canonical (each page sets its own) - Update `sitemap.xml` with product IDs 3321 and 3324 and `<lastmod>` dates - Add product screenshots to README ## Test plan - [x] Navigate between all routes — browser tab title updates correctly on each page - [x] Check DevTools → Elements → `<head>` on `/products` and `/product/3113` — correct `<title>`, `<meta name="description">`, and `<link rel="canonical">` per page - [x] Visit a non-existent product ID — 404 page shown, `noindex` in head - [x] Share a product URL — OG preview uses page-specific title/description  ## Summary by CodeRabbit * **Documentation** * Added screenshots section to README with four thumbnail images showcasing homepage, releases, product details, and download links. * **New Features** * Implemented dedicated 404 error page with navigation back to home. * **Chores** * Enhanced social media metadata with Open Graph and Twitter card tags. * Added JSON-LD structured data across pages. * Updated sitemap with modification dates and new product URLs. [![Review Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/starkSV/windows-iso-downloader/pull/4)

coderabbitai[bot] commented

2026-05-12 20:40:29 +05:30

(Migrated from github.com)

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 2b331dbe-911e-4856-845a-76a0c472fc44

📥 Commits

Reviewing files that changed from the base of the PR and between d0a70496da and 86da27cb8c.

⛔ Files ignored due to path filters (5)

frontend/public/og-image.png is excluded by !**/*.png
frontend/public/screenshots/msdl-1.jpg is excluded by !**/*.jpg
frontend/public/screenshots/msdl-2.jpg is excluded by !**/*.jpg
frontend/public/screenshots/msdl-3.jpg is excluded by !**/*.jpg
frontend/public/screenshots/msdl-4.jpg is excluded by !**/*.jpg

📒 Files selected for processing (11)

README.md
frontend/index.html
frontend/public/sitemap.xml
frontend/src/App.tsx
frontend/src/pages/AboutPage.tsx
frontend/src/pages/DisclaimerPage.tsx
frontend/src/pages/HomePage.tsx
frontend/src/pages/NotFoundPage.tsx
frontend/src/pages/PrivacyPolicyPage.tsx
frontend/src/pages/ProductDetailPage.tsx
frontend/src/pages/ProductsPage.tsx

📝 Walkthrough

Walkthrough

The PR migrates document metadata management from imperative useEffect-based DOM updates to declarative JSX-rendered head elements across all page components. Static SEO assets are updated, 404 handling is extracted into a dedicated component, and all page components adopt a consistent pattern for rendering title, description, canonical, and OpenGraph metadata inline.

Changes

SEO Metadata and Head Tag Architecture

Layer / File(s)	Summary
Static SEO assets and metadata `README.md`, `frontend/index.html`, `frontend/public/sitemap.xml`	README adds dedicated Screenshots section with four thumbnail images; sitemap.xml gains `lastmod` timestamps for static pages and product URLs, with two new product entries; index.html `<head>` expands with Open Graph (`og:site_name`, `og:url`, `og:image`) and Twitter card tags.
404 routing and NotFoundPage `frontend/src/App.tsx`, `frontend/src/pages/NotFoundPage.tsx`	App.tsx routing delegates catch-all paths to a new `NotFoundPage` component instead of inline 404 JSX; NotFoundPage renders 404 UI with document metadata and home navigation link, scrolling to top on mount.
HomePage head tag refactor with JSON-LD `frontend/src/pages/HomePage.tsx`	HomePage introduces `SITE_URL` constant and SoftwareApplication JSON-LD schema; useEffect removes title/meta DOM updates while retaining data fetch; component now renders inline `<title>`, description meta, canonical link, OpenGraph tags, and JSON-LD `<script>` before existing hero and content sections.
Simple page head tags (About, Disclaimer, Privacy) `frontend/src/pages/AboutPage.tsx`, `frontend/src/pages/DisclaimerPage.tsx`, `frontend/src/pages/PrivacyPolicyPage.tsx`	All three pages follow the same pattern: replace `useEffect` title/meta updates with `SITE_URL` constant and render inline head elements (title, description, canonical, OpenGraph) in a fragment alongside existing animated content.
Product page head tags (Products and ProductDetail) `frontend/src/pages/ProductsPage.tsx`, `frontend/src/pages/ProductDetailPage.tsx`	ProductsPage adds `SITE_URL` and inline head rendering, removes useEffect title/meta side effects, and updates header text. ProductDetailPage derives dynamic SEO values (`pageTitle`, `pageDescription`, `canonicalUrl`, `breadcrumbJsonLd`) from component state, removes direct DOM updates from fetch effect, renders conditional breadcrumb JSON-LD and noindex robots meta for not-found states, and adds `aria-hidden="true"` to WinLogo.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A page's breath now flows through JSX,
No useEffect shadows flickering in flux,
Metadata declared where markup lives,
Four pages dance, one pattern gives!
And 404 finds its own cozy nest. 🏠

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/seo-improvements

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

> [!CAUTION] > ## Review failed > > The pull request is closed.  <details> <summary>ℹ️ Recent review info</summary> <details> <summary>⚙️ Run configuration</summary> **Configuration used**: defaults **Review profile**: CHILL **Plan**: Pro Plus **Run ID**: `2b331dbe-911e-4856-845a-76a0c472fc44` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between d0a70496da63e230e4b7fb1faa638a1b8baf42e8 and 86da27cb8ceed8f19ce59745238e812b43feeb45. </details> <details> <summary>⛔ Files ignored due to path filters (5)</summary> * `frontend/public/og-image.png` is excluded by `!**/*.png` * `frontend/public/screenshots/msdl-1.jpg` is excluded by `!**/*.jpg` * `frontend/public/screenshots/msdl-2.jpg` is excluded by `!**/*.jpg` * `frontend/public/screenshots/msdl-3.jpg` is excluded by `!**/*.jpg` * `frontend/public/screenshots/msdl-4.jpg` is excluded by `!**/*.jpg` </details> <details> <summary>📒 Files selected for processing (11)</summary> * `README.md` * `frontend/index.html` * `frontend/public/sitemap.xml` * `frontend/src/App.tsx` * `frontend/src/pages/AboutPage.tsx` * `frontend/src/pages/DisclaimerPage.tsx` * `frontend/src/pages/HomePage.tsx` * `frontend/src/pages/NotFoundPage.tsx` * `frontend/src/pages/PrivacyPolicyPage.tsx` * `frontend/src/pages/ProductDetailPage.tsx` * `frontend/src/pages/ProductsPage.tsx` </details> </details> ---  <details> <summary>📝 Walkthrough</summary> ## Walkthrough The PR migrates document metadata management from imperative `useEffect`-based DOM updates to declarative JSX-rendered head elements across all page components. Static SEO assets are updated, 404 handling is extracted into a dedicated component, and all page components adopt a consistent pattern for rendering title, description, canonical, and OpenGraph metadata inline. ## Changes **SEO Metadata and Head Tag Architecture** | Layer / File(s) | Summary | |---|---| | **Static SEO assets and metadata** `README.md`, `frontend/index.html`, `frontend/public/sitemap.xml` | README adds dedicated Screenshots section with four thumbnail images; sitemap.xml gains `lastmod` timestamps for static pages and product URLs, with two new product entries; index.html `<head>` expands with Open Graph (`og:site_name`, `og:url`, `og:image`) and Twitter card tags. | | **404 routing and NotFoundPage** `frontend/src/App.tsx`, `frontend/src/pages/NotFoundPage.tsx` | App.tsx routing delegates catch-all paths to a new `NotFoundPage` component instead of inline 404 JSX; NotFoundPage renders 404 UI with document metadata and home navigation link, scrolling to top on mount. | | **HomePage head tag refactor with JSON-LD** `frontend/src/pages/HomePage.tsx` | HomePage introduces `SITE_URL` constant and SoftwareApplication JSON-LD schema; useEffect removes title/meta DOM updates while retaining data fetch; component now renders inline `<title>`, description meta, canonical link, OpenGraph tags, and JSON-LD `<script>` before existing hero and content sections. | | **Simple page head tags (About, Disclaimer, Privacy)** `frontend/src/pages/AboutPage.tsx`, `frontend/src/pages/DisclaimerPage.tsx`, `frontend/src/pages/PrivacyPolicyPage.tsx` | All three pages follow the same pattern: replace `useEffect` title/meta updates with `SITE_URL` constant and render inline head elements (title, description, canonical, OpenGraph) in a fragment alongside existing animated content. | | **Product page head tags (Products and ProductDetail)** `frontend/src/pages/ProductsPage.tsx`, `frontend/src/pages/ProductDetailPage.tsx` | ProductsPage adds `SITE_URL` and inline head rendering, removes useEffect title/meta side effects, and updates header text. ProductDetailPage derives dynamic SEO values (`pageTitle`, `pageDescription`, `canonicalUrl`, `breadcrumbJsonLd`) from component state, removes direct DOM updates from fetch effect, renders conditional breadcrumb JSON-LD and noindex robots meta for not-found states, and adds `aria-hidden="true"` to WinLogo. | ## Estimated code review effort 🎯 3 (Moderate) | ⏱️ ~25 minutes ## Poem > 🐰 *A page's breath now flows through JSX,* > *No useEffect shadows flickering in flux,* > *Metadata declared where markup lives,* > *Four pages dance, one pattern gives!* > *And 404 finds its own cozy nest.* 🏠 </details>   <details> <summary>✨ Finishing Touches</summary> <details> <summary>📝 Generate docstrings</summary> - [ ]  Create stacked PR - [ ]  Commit on current branch </details> <details> <summary>🧪 Generate unit tests (beta)</summary> - [ ]  Create PR with unit tests - [ ]  Commit unit tests in branch `feat/seo-improvements` </details> </details>   --- Comment `@coderabbitai help` to get the list of available commands and usage tips.