SEO Best Practices

The aidimension SEO kit is a drop-in component plus build-time generators. This page is the comprehensive guide to ranking well in 2026.

Why SEO matters#

A well-optimized site gets:

• 📈 3-10x more organic traffic than paid ads (over 12 months)
• 💰 Free traffic for the lifetime of the page
• 🎯 Higher-intent visitors — they searched for what you offer
• 🏆 Compounding returns — every post is an asset

What the SEO kit does#

The @aidimension/seo package provides:

1. <Seo /> component — declarative metadata in your pages
2. Build-time sitemap — sitemap.xml auto-generated from your routes
3. Build-time robots.txt — with sitemap reference
4. Open Graph image generation — per-page og.png via Satori + Resvg
5. JSON-LD schema — typed builders for Article, Product, FAQ, Organization, etc.
6. Metadata validation — fails your build if metadata is missing or malformed

Basic usage#

import { Seo } from "@aidimension/seo";

export const metadata = {
  title: "Pricing",
  description: "Free 32-component React UI kit for Next.js.",
};

export default function PricingPage() {
  return (
    <>
      <Seo
        title="Pricing — Acme"
        description="Free and paid plans for Acme."
        image="/og/pricing.png"
        url="https://acme.com/pricing"
      />
      <main>...</main>
    </>
  );
}

Generates:

• <title>Pricing — Acme</title>
• <meta name="description" content="Free and paid plans for Acme." />
• Open Graph + Twitter Card tags
• <link rel="canonical" href="https://acme.com/pricing" />

Schema.org / JSON-LD#

Add structured data with typed builders:

import { Schema } from "@aidimension/seo";

<Schema
  type="Product"
  data={{
    name: "Acme Pro",
    description: "The pro plan for Acme.",
    brand: { "@type": "Brand", name: "Acme" },
    offers: {
      "@type": "Offer",
      price: "29",
      priceCurrency: "USD",
      availability: "https://schema.org/InStock",
    },
    aggregateRating: {
      "@type": "AggregateRating",
      ratingValue: "4.8",
      reviewCount: "127",
    },
  }}
/>

Supported types: Article, Product, FAQ, Organization, BreadcrumbList, WebSite, Person, Event, Recipe, JobPosting, Course.

Sitemap#

Auto-generated from your routes:

// next.config.mjs
import { withAgezeroSeo } from "@aidimension/seo/config";

export default withAgezeroSeo({
  siteUrl: "https://acme.com",
  // exclude paths starting with these prefixes
  exclude: ["/admin", "/api"],
});

Output: https://acme.com/sitemap.xml with proper lastmod, changefreq, and priority.

For dynamic routes, add a sitemap.ts:

// app/sitemap.ts
export default async function sitemap() {
  const posts = await db.posts.findMany();
  return posts.map((p) => ({
    url: `https://acme.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }));
}

robots.txt#

// app/robots.ts
export default function robots() {
  return {
    rules: { userAgent: "*", allow: "/", disallow: "/admin" },
    sitemap: "https://acme.com/sitemap.xml",
  };
}

Open Graph images#

Per-page OG images are auto-generated at build time. The SEO kit uses Satori (HTML → SVG) and Resvg (SVG → PNG):

// next.config.mjs
export default withAgezeroSeo({
  ogImage: {
    template: (path) => ({
      title: pathToTitle(path),
      author: "Acme",
      brand: "https://acme.com/logo.png",
    }),
  },
});

Output: /og/<page>.png — 1200×630, perfect for Twitter, LinkedIn, Facebook.

Performance#

SEO in 2026 is heavily influenced by Core Web Vitals:

• LCP (Largest Contentful Paint) — keep under 2.5s
• INP (Interaction to Next Paint) — keep under 200ms
• CLS (Cumulative Layout Shift) — keep under 0.1

The SEO kit ships with:

• ✅ next/image defaults (AVIF, WebP, lazy loading)
• ✅ Preload hints for critical fonts
• ✅ Resource hints for cross-origin assets
• ✅ No layout shift from image dimensions
• ✅ Font display: swap with size-adjust

Common mistakes to avoid#

• ❌ Duplicate titles — every page must have a unique <title>
• ❌ Missing alt text — every <img> needs an alt
• ❌ Blocking crawlers — don't disallow / in robots.txt
• ❌ No canonical — duplicate content confuses Google
• ❌ Slow TTFB — use a CDN (Vercel, Cloudflare)
• ❌ No HTTPS — required for ranking
• ❌ Keyword stuffing — natural language wins
• ❌ Thin content — aim for 500+ words per page

Best practices#

• ✅ One H1 per page — describes the page
• ✅ Descriptive URLs — /blog/seo-tips not /blog?id=42
• ✅ Internal links — every page should link to 3-5 others
• ✅ External links — link to authoritative sources
• ✅ Image optimization — AVIF/WebP, descriptive filenames, alt text
• ✅ Schema on every page — at least Organization + Breadcrumb
• ✅ Updated content — add lastmod and keep content fresh

Measuring success#

Install the SEO kit's analytics integration:

import { trackPageview } from "@aidimension/seo/analytics";

useEffect(() => {
  trackPageview(window.location.pathname);
}, [pathname]);

Sends pageviews to your preferred backend (PostHog, Plausible, Google Analytics 4).

Next steps#

• Connect adapters — for the agent-facing side
• SEO + Connect overview — back to the section
• Templates — SEO-optimized templates