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. In the pikkuna.fi e-commerce build, that meant correct hreflang across 30 languages, server-rendered product pages, and JSON-LD that survived localization. Same principles, scaled up.
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: Promise<{ slug: string }>
}) {
const { slug } = await params;
const product = await getProduct(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: Promise<{ slug: string }>;
}): Promise<Metadata> {
const { slug } = await params;
const product = await getProduct(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 means shipping broken software.
If you want to go further with the indexing layer, read IndexNow in Next.js: Instant Indexing After Every Deploy and llms.txt for AI Discoverability. Together with the patterns above, that's the full stack.
For MVP development with this foundation built in from the start — get in touch.
