Ein Next.js-Portfolio bei Google sichtbar machen: das SEO, das wirklich zählt

Das Problem: gut gerankt heißt nicht gut präsentiert

Wenn man meinen Namen bei Google eingibt, erscheint mein Portfolio an erster Stelle. Das Ranking funktioniert. Aber ein gutes Ranking garantiert keine gute Präsentation: das neben dem Link angezeigte Icon, der Site-Name, die Beschreibung — all das entscheidet sich an präzisen technischen Signalen, die Google in Ihrem Code liest.

Dieser Artikel führt die Einstellungen aus, die den Unterschied zwischen einem generischen Ergebnis und einem vertrauenerweckenden machen.

Das Favicon: eine Einschränkung, die fast niemand beachtet

Google zeigt links neben jedem Ergebnis ein Icon. Damit es Ihres ist und kein generischer Fallback, drei Bedingungen:

• Das Favicon muss unter einer stabilen URL ausgeliefert und per <link rel="icon"> deklariert werden.
• Seine Größe muss ein Vielfaches von 48px sein (48, 96, 144…). Ein 64×64 — so verbreitet es auch ist — wird von Google schlicht ignoriert.
• Es muss in sehr kleiner Größe lesbar bleiben: ein Monogramm oder ein Symbol, niemals ein detailliertes Logo.

In Next.js erzeugt eine einfache app/icon.tsx-Datei das Favicon und fügt automatisch das <link>-Tag ein. Die Falle steckt in der exportierten Größe.

Ein perfektes Favicon, aber in 64×64, wird nie in Googles Ergebnissen erscheinen. Das Detail, das Wochen des Zweifels kostet.

Der „Site-Name": die Kontrolle darüber zurückgewinnen, was Google anzeigt

Standardmäßig zeigt Google oft die Domain (meineseite.com) statt des echten Namens. Um ihm einen eigenen Namen aufzuzwingen, müssen drei Signale übereinstimmen, die strikt identisch sein müssen:

• Das name-Feld der WebSite-strukturierten Daten (JSON-LD).
• Das og:site_name-Tag (Open Graph).
• Die application-name-Meta.

Weichen diese drei Werte voneinander ab — sei es auch nur „Jean Portfolio" auf der einen und „Jean — Portfolio" auf der anderen Seite — gibt Google auf und fällt auf die Domain zurück. Konsistenz ist die einzige Regel.

Strukturierte Daten: erklären, wer Sie sind

Das Person-JSON-LD ist das, was Google verstehen lässt, dass die Website von einer bestimmten Person handelt, mit Beruf, Ort und sozialen Profilen. Die Felder, die am meisten wiegen:

• name, jobTitle, description — die Basisidentität.
• sameAs — die Liste Ihrer Profile (GitHub, LinkedIn). Sie verbindet Ihre Website mit Ihrer Online-Präsenz und speist das Knowledge Panel.
• image — ein Foto, nützlich für Rich Results.

Jede Entität über einen @id-Bezeichner zu verknüpfen (#person, #website) vermeidet Duplikate und gibt Google einen sauberen Graphen statt einer Sammlung isolierter Karten.

Die mehrsprachige Sitemap: sich nicht von hreflang verschlingen lassen

Eine Website in mehreren Sprachen muss Google sagen, welche Version wem zu zeigen ist. Sonst kannibalisieren sich die Sprachen im Index. Die Regel: Jede URL deklariert alle ihre Sprachvarianten über alternates.languages, plus ein x-default.

Next.js erzeugt eine native sitemap.ts, in der jeder Eintrag seine hreflang trägt. Das ist zuverlässiger als Drittanbieter-Plugins, die dynamische Routen vom Typ [locale] oft verpassen.

Was wirklich zählt, der Reihe nach

Müsste ich für ein neues Projekt priorisieren:

1. Google Search Console — ohne sie sind Sie blind. Reichen Sie die Sitemap ein, fordern Sie die Indexierung an.
2. Konsistenz der Identitätssignale — konformes Favicon, abgestimmter Site-Name, sauberes JSON-LD.
3. Echter Inhalt — eine Ein-Seiten-Website stößt schnell an ihre Grenze. Technische Artikel wie dieser lassen Sie bei echten Suchanfragen existieren.
4. Die Core Web Vitals — eine schnelle Website ist eine besser gerankte Website. Messen, dann optimieren.

Technisches SEO ist keine Magie: Es ist eine Reihe klarer Signale, sauber gesendet und dann der Zeit überlassen, die Google zum erneuten Crawlen braucht. Den Rest erledigt die Geduld.