Menu
Use when adding per-route titles, meta descriptions, Open Graph, Twitter card, or canonical tags in a Lovable SPA (React + Vite). Not for static HTML edits or content-only changes.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when reviewing or fixing accessibility: keyboard navigation, focus order, labels, color contrast, screen reader support, or ARIA attributes. Not for SEO-only or performance-only audits.
Use when adding product analytics (PostHog, GA4, Plausible), event tracking, funnels, or conversion measurement. Not for server logs only or A/B infra unless events are part of the task.
Use when standardizing API and edge function errors: HTTP status codes, error JSON shape, logging, or mapping Supabase/Stripe errors to client responses. Not for UI toast copy only or form field validation messages.
Use when recording audit trails: who changed what, admin action logs, compliance history, or append-only event tables. Not for product analytics (use analytics-events) or debug console logs only.
Use when scheduling background work: cron jobs, digest emails, cleanup tasks, pg_cron, Supabase scheduled edge functions, or job queues. Not for synchronous user-facing API in the request path.
Use when adding dark mode, theme toggle, system theme support, or fixing hardcoded colors that break in dark mode. Not for design-token migration unrelated to dark mode.
| name | seo-meta-tags-spa |
| description | Use when adding per-route titles, meta descriptions, Open Graph, Twitter card, or canonical tags in a Lovable SPA (React + Vite). Not for static HTML edits or content-only changes. |
SPAs need per-route title + meta tags, but index.html only has one. Use one of these mechanisms consistently — never mix.
Companion skills: seo-ssr-and-prerendering, seo-structured-data, seo-landing-page.
| Option | When | Notes |
|---|---|---|
React 19 native (<title>, <meta> in JSX) | React 19+ projects | Built-in, no library, hoisted to <head> |
react-helmet-async | React 18 and earlier, or you need SSR with collected tags | Battle-tested, SSR-friendly |
@unhead/react | Modern alternative, smaller than helmet | Works for SSR + SPA |
For Lovable's current default React version, prefer React 19 native tags if available, otherwise react-helmet-async.
function PricingPage() {
return (
<>
<title>Pricing — Acme</title>
<meta name="description" content="Simple per-seat pricing. Start free." />
<link rel="canonical" href="https://acme.com/pricing" />
<meta property="og:title" content="Acme Pricing" />
<meta property="og:description" content="Simple per-seat pricing. Start free." />
<meta property="og:image" content="https://acme.com/og/pricing.png" />
<meta property="og:url" content="https://acme.com/pricing" />
<meta name="twitter:card" content="summary_large_image" />
<main>{/* ... */}</main>
</>
);
}
React lifts these to <head> automatically; SSR/prerendering captures them.
import { HelmetProvider, Helmet } from "react-helmet-async";
// once at the root
<HelmetProvider>
<App />
</HelmetProvider>
// per page
function PricingPage() {
return (
<>
<Helmet>
<title>Pricing — Acme</title>
<meta name="description" content="Simple per-seat pricing. Start free." />
<link rel="canonical" href="https://acme.com/pricing" />
<meta property="og:title" content="Acme Pricing" />
<meta property="og:image" content="https://acme.com/og/pricing.png" />
</Helmet>
<main>{/* ... */}</main>
</>
);
}
Every public route MUST set:
| Tag | Length | Notes |
|---|---|---|
<title> | 50–60 chars | Format: "Page — Brand" |
<meta name="description"> | 140–160 chars | One sentence, action-oriented |
<link rel="canonical"> | absolute URL | Even when there are no obvious duplicates |
og:title, og:description, og:image, og:url | OG image 1200×630 | Required for LinkedIn/Slack previews |
twitter:card | summary_large_image | Required for Twitter/X |
Centralize defaults so every page only overrides what's unique:
type SeoProps = {
title: string;
description: string;
path: string;
image?: string;
type?: "website" | "article";
};
export function Seo({ title, description, path, image, type = "website" }: SeoProps) {
const url = `https://acme.com${path}`;
const ogImage = image ?? "https://acme.com/og/default.png";
return (
<>
<title>{`${title} — Acme`}</title>
<meta name="description" content={description} />
<link rel="canonical" href={url} />
<meta property="og:type" content={type} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={url} />
<meta property="og:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</>
);
}
Use at the top of every page:
<Seo title="Pricing" description="Simple per-seat pricing. Start free." path="/pricing" />
/blog.programmatic-seo-pages — generate per-page OG via Satori or an edge function.<title> on every route.react-helmet-async and React 19 native tags — one wins, the other is dropped silently./ from every page.Seo helper used everywhere.