Add Core SEO Features to Existing App

The route

6 steps to Done

1. 01

   Audit existing routes for SEO data

   Identify every public route and create a source of truth for meta information

   Preview prompt + verify gate ▾ Hide ▴

   Scan the repository for all public route definitions (ignore admin or auth‑only paths). Generate a file named seoRoutes.json in the project root containing an array of objects, each with keys: path (string, starting with '/'), name (human readable), title (string placeholder, e.g., "My Page Title"), description (string placeholder, e.g., "A brief description."). Commit the file. Do not include any private routes.

   • ✓ Does seoRoutes.json exist in the project root?
   • ✓ Does the file parse as valid JSON?
   • ✓ Does each object contain path, name, title, and description keys?
   • ✓ Are all public routes represented (no admin paths)?
2. 02

   Add dynamic meta tags with Helmet

   Render title and description per page on the server side

   Preview prompt + verify gate ▾ Hide ▴

   1. Add react-helmet-async to package.json (npm i react-helmet-async). 2. Wrap the root component with HelmetProvider. 3. In each route component, import Helmet and seoRoutes.json. 4. Match the component's route path to an entry in seoRoutes.json and set <title> and <meta name='description'> using those values. 5. Ensure the Helmet output is rendered during server‑side rendering so the tags appear in the raw HTML. 6. Commit all changes and run the build to confirm no errors.

   • ✓ Does the app compile after installing react-helmet-async?
   • ✓ When requesting a page, does the raw HTML contain the correct <title>?
   • ✓ Is a <meta name='description'> tag present with the expected content?
3. 03

   Add Open Graph and Twitter Card tags

   Provide rich link previews for social platforms

   Preview prompt + verify gate ▾ Hide ▴

   Update the Helmet block in every public route component to include: <meta property='og:title'>, <meta property='og:description'>, <meta property='og:url'> (use window.location.href or server request URL), <meta property='og:type' content='website'>, <meta name='twitter:card' content='summary_large_image'>, <meta name='twitter:title'>, <meta name='twitter:description'>. Use the title and description from seoRoutes.json. Ensure these tags are rendered in the server‑side HTML.

   • ✓ Is <meta property='og:title'> present with correct content?
   • ✓ Is <meta property='og:description'> present?
   • ✓ Does <meta property='og:url'> reflect the full page URL?
   • ✓ Are the Twitter Card tags present (twitter:card, twitter:title, twitter:description)?
4. 04

   Generate a sitemap.xml file

   Provide search engines a list of all crawlable URLs

   Preview prompt + verify gate ▾ Hide ▴

   Create a Node.js script named generateSitemap.js in the scripts folder. The script should: 1. Read seoRoutes.json, 2. For each entry, construct a <url><loc>https://yourdomain.com{path}</loc></url> element, 3. Wrap all entries in <urlset xmlns='http://www.sitemaps.org/schemas/sitemap/0.9'>, 4. Write the resulting XML to public/sitemap.xml. Add a npm script "generate:sitemap" that runs this file, and modify the existing build script to run "npm run generate:sitemap" before bundling. Ensure the script runs without errors and the XML validates.

   • ✓ Does public/sitemap.xml exist after running the build?
   • ✓ Is the file well‑formed XML with the correct <urlset> namespace?
   • ✓ Does each route from seoRoutes.json have a corresponding <loc> entry?
   • ✓ Can you retrieve the file via curl without error?
5. 05

   Add a robots.txt file

   Tell crawlers which parts of the site to index or ignore

   Preview prompt + verify gate ▾ Hide ▴

   Create a plain text file named robots.txt in the public (or static) folder with the following content: User-agent: * Allow: / Disallow: /admin Add it to version control. Ensure the dev server serves this file at https://yourdomain.com/robots.txt.

   • ✓ Is robots.txt present in the public folder?
   • ✓ Does curl https://yourdomain.com/robots.txt return the three expected lines?
   • ✓ Is the file committed to version control?
6. 06

   Verify full SEO compliance

   Confirm all tags, sitemap, and robots.txt are correctly rendered and persisted

   Preview prompt + verify gate ▾ Hide ▴

   1. Choose a representative public page (e.g., /about). Run `curl -s https://yourdomain.com/about` and check the output contains: <title> matching seoRoutes.json, <meta name='description'>, all Open Graph tags, and Twitter Card tags. 2. Run `curl -s https://yourdomain.com/sitemap.xml` and verify it includes a <loc> for /about. 3. Run `curl -s https://yourdomain.com/robots.txt` and confirm its three lines. Summarize results as PASS/FAIL for each check. If any FAIL, note the missing element.

   • ✓ Does the sample page's HTML source contain the correct <title> and meta tags?
   • ✓ Are all Open Graph and Twitter Card tags present?
   • ✓ Does sitemap.xml include the sample page URL?
   • ✓ Does robots.txt return the exact expected content?