Making a Next.js portfolio visible on Google: the SEO that really counts

The problem: well ranked doesn't mean well presented

When you type my name into Google, my portfolio comes up first. The ranking works. But a good ranking doesn't guarantee a good presentation: the icon shown next to the link, the site name, the description — all of that plays out on precise technical signals that Google reads in your code.

This article details the settings that make the difference between a generic result and one that inspires trust.

The favicon: a constraint almost nobody respects

Google shows an icon to the left of every result. For it to be yours and not a generic fallback, three conditions:

• The favicon must be served at a stable URL and declared via <link rel="icon">.
• Its size must be a multiple of 48px (48, 96, 144…). A 64×64 — common as it is — is simply ignored by Google.
• It must stay legible at very small sizes: a monogram or a symbol, never a detailed logo.

In Next.js, a simple app/icon.tsx file generates the favicon and automatically injects the <link> tag. The trap hides in the exported size.

A perfect favicon but in 64×64 will never appear in Google's results. The detail that costs weeks of doubt.

The "site name": taking back control of what Google displays

By default, Google often shows the domain (mysite.com) instead of the real name. To force a proper name on it, you have to align three signals that must be strictly identical:

• The name field of the WebSite structured data (JSON-LD).
• The og:site_name tag (Open Graph).
• The application-name meta.

If these three values diverge — even just "Jean Portfolio" on one side and "Jean — Portfolio" on the other — Google gives up and falls back to the domain. Consistency is the only rule.

Structured data: explaining who you are

The Person JSON-LD is what lets Google understand that the site is about a specific individual, with a profession, a location and social profiles. The fields that weigh most:

• name, jobTitle, description — the base identity.
• sameAs — the list of your profiles (GitHub, LinkedIn). This is what links your site to your online presence and feeds the Knowledge Panel.
• image — a photo, useful for rich results.

Linking each entity by an @id identifier (#person, #website) avoids duplicates and gives Google a clean graph rather than a collection of isolated cards.

The multilingual sitemap: not getting devoured by hreflang

A site in several languages must tell Google which version to show to whom. Without that, the different languages cannibalize each other in the index. The rule: each URL declares all its language variants via alternates.languages, plus an x-default.

Next.js generates a native sitemap.ts where each entry carries its hreflang. It's more reliable than third-party plugins, which often miss dynamic routes of the [locale] type.

What really counts, in order

If I had to prioritize for a new project:

1. Google Search Console — without it, you're blind. Submit the sitemap, request indexing.
2. Consistency of identity signals — a compliant favicon, an aligned site name, clean JSON-LD.
3. Real content — a single-page site plateaus fast. Technical articles like this one make you exist on real queries.
4. The Core Web Vitals — a fast site is a better-ranked site. Measure, then optimize.

Technical SEO isn't magic: it's a series of clear signals, sent cleanly, then left to the time Google takes to re-crawl. Patience does the rest.