seo-landing-pages-react

Render your SEO landing pages in any React app: Vite, Create React App, react-router, TanStack Router. The pages are generated and hosted for you; this package fetches and renders them in your own layout, sets the per-page head tags, follows redirects for retired pages and reports page views.

Building with Next.js? Use seo-landing-pages-nextjs instead, it renders on the server.

Quick start

npm install seo-landing-pages-react

import { Route, useNavigate } from "react-router-dom";
import { SeoLandingPage } from "seo-landing-pages-react";

function LandingPages() {
  const navigate = useNavigate();
  return (
    <SeoLandingPage
      apiKey="pg_your_key_here"
      basePath="/content"
      onNavigate={(to) => navigate(to)}
      onRedirect={(to) => navigate(to, { replace: true })}
    />
  );
}

// inside your <Routes>, after your own routes:
<Route path="/content/*" element={<LandingPages />} />

Your dashboard shows this snippet filled in for your site, plus the sitemap file and the two robots.txt lines to add. The key is public and safe to ship in your bundle.

Props

| Prop | Default | Description | |---|---|---| | apiKey | required | Your key, starts with pg_ | | basePath | /content | URL prefix the pages live under; / for the site root | | trackingId | none | Enables page-view analytics and verification | | cdnBaseUrl | default host | Host that serves your page files | | appUrl | default host | Host that serves the tracking pixel | | path | window.location.pathname | Current pathname, if you manage the location yourself | | loading / notFound | null | Rendered while fetching / when there is no page | | onRedirect / onNavigate | browser navigation | Router hooks for redirects and internal links | | theme | none | { accent, accentFg, maxWidth } style overrides | | noDefaultStyles | false | Skip the built-in stylesheet and style the .lc-* classes yourself |

Head tags

For each page the component sets the title, description, canonical, Open Graph and Twitter tags, JSON-LD and <html lang>, and restores your own values when the visitor leaves. No helmet library needed.