Technical SEO I Build Into Every Project

I don't offer SEO as a service. But every site I build ships with technical SEO baked in — because it's not marketing, it's engineering. A site that search engines can't crawl or understand is a site that doesn't work properly.

Server-Side Rendering by Default

Single-page apps with client-side rendering are invisible to most crawlers. Every project I build uses Next.js App Router with server components:

// app/products/[slug]/page.tsx
export default async function ProductPage({
  params
}: {
  params: { slug: string }
}) {
  const product = await getProduct(params.slug);

  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </article>
  );
}

The HTML arrives fully rendered. No JavaScript required for indexing.

Dynamic Meta Tags

Every page gets proper meta tags generated from actual content:

// app/products/[slug]/page.tsx
export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const product = await getProduct(params.slug);

  return {
    title: `${product.name} | Store`,
    description: product.description.slice(0, 160),
    openGraph: {
      title: product.name,
      description: product.description,
      images: [product.image],
    },
  };
}

This handles SEO meta tags, Open Graph for social sharing, and Twitter cards — all from one function.

JSON-LD Structured Data

Schema.org markup tells search engines exactly what the content represents:

function ProductJsonLd({ product }: { product: Product }) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.name,
    description: product.description,
    image: product.image,
    offers: {
      "@type": "Offer",
      price: product.price,
      priceCurrency: "EUR",
      availability: "https://schema.org/InStock",
    },
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  );
}

I add appropriate schemas based on content type: Product, Article, Organization, FAQPage, BreadcrumbList.

Automatic Sitemap Generation

Next.js can generate sitemaps from your data:

// app/sitemap.ts
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const products = await getAllProducts();

  return [
    { url: "https://example.com", lastModified: new Date() },
    ...products.map((p) => ({
      url: `https://example.com/products/${p.slug}`,
      lastModified: p.updatedAt,
    })),
  ];
}

No plugins, no external services. Just code that generates /sitemap.xml at build time.

This isn't optimization work you hire someone for later. It's the baseline for a properly built website. When I deliver a project, the technical SEO foundation is already there — because skipping it would be shipping broken software.