SEO best practices

Search engines rank pages they can read, that load fast and that answer a clear question. Your app is a React app with a router, so each route is a page to optimize.

Start with the site settings

In Settings > Project > General, under SEO & Metadata, set the Site Title, the Description, the Favicon and the Social Preview image. They apply to the whole site. See SEO.

Give each page its own title and description

Every route should have a unique title and description. React lets a page render its own <title> and <meta> tags, and places them in the document head:

export default function Pricing() {
  return (
    <>
      <title>Pricing | Sunrise Yoga</title>
      <meta name="description" content="Class passes and memberships for every schedule." />
      <h1>Pricing</h1>
      {/* page content */}
    </>
  );
}

Ask the AI:

Give every route its own title and meta description, based on what the page shows.

Make links look good when shared

The Social Preview image appears when someone shares your site. For key pages, ask the AI to add Open Graph tags (og:title, og:description, og:image) with a page-specific image.

Use clear headings

• One <h1> per page, which says what the page is about.
• <h2> and <h3> in order, without skipping levels.
• Use real elements: <nav>, <main>, <article>, <footer>, and <a> for links.

Ask the AI: "Check the heading order on every page and use semantic HTML."

Add a sitemap and robots.txt

Files in public/ are served from the root of your site. Your project already has public/robots.txt.

• Ask the AI to create public/sitemap.xml with every route, using your real domain.
• Add a Sitemap: line with its address to robots.txt.
• Update the sitemap when you add pages.

After you publish, submit the sitemap in the search engine's webmaster tools.

Keep pages fast

• Compress images and set their width and height. See Using images.
• Load images below the fold with loading="lazy".
• Load only the fonts you use. See Custom fonts.
• Measure with Perf and Lighthouse in the devtools.

Write alt text

Describe each image in a few words in its alt attribute. Leave alt="" on decorative images.

Use your own domain

A custom domain is easier to remember and to share. Set your canonical links and sitemap to it.

Checklist

• Site title, description, favicon and social preview set
• A unique title and description on every route
• One <h1> per page, headings in order
• sitemap.xml in public/ and listed in robots.txt
• Alt text on every meaningful image
• Good Lighthouse score on the main pages

Next steps