Skip to main content

← Back to blog

Refreshing the portfolio: SEO, structure, and a blog

· meta · Next.js · SEO

The last revision of this site was a quick afternoon project — a couple of pages thrown together to have something live. After bouncing back to it after a break, the gaps were obvious:

  • Every page was a client component, so search-engine crawlers were getting near-empty HTML.
  • There was no metadata, no Open Graph tags, no sitemap, and no structured data.
  • The "About" page was a paragraph, the "Projects" page was eight one-liners, and the rest of my work was effectively invisible.

This post is a quick log of what changed in the refresh.

Server-rendered metadata

The biggest single change was unmarking app/layout.tsx as a client component. With that out of the way, Next.js's metadata API can do its job — every page now exports its own title, description, canonical URL, and Open Graph card, and the layout supplies sensible site-wide defaults.

The active-link logic that was pulling 'use client' into the layout was extracted into a small <SiteNav /> component. That's the right shape anyway: the layout owns the document, the nav owns its own interactive state.

Structured data

I added two JSON-LD blocks: a Person for me and a WebSite for the site itself. The projects page also emits an ItemList. None of this is glamorous, but it's the kind of thing that lights up rich results in Google's search index over time.

Sitemap, robots, manifest

All three are now generated by Next.js — app/sitemap.ts, app/robots.ts, app/manifest.ts. They pull from the same site config used by the metadata API, so changing the canonical domain is a one-line edit.

Blog pipeline

This post is the first one written through the new blog pipeline. Posts live in /content/blog/*.md, get parsed at build time with gray-matter and marked, and are rendered server-side. Static export works without any runtime dependencies, which keeps the GitHub Pages deployment simple.

What's next

A few things still on the list:

  • Per-project case studies with screenshots and lessons learned.
  • A devlog series for Infinite Survival.
  • Open-Graph image generation that's actually fun to look at.

If you're poking around and notice something broken, let me know.