Hacer visible un portfolio Next.js en Google: el SEO que de verdad cuenta
Favicon, nombre del sitio, datos estructurados, sitemap multilingüe: las señales técnicas concretas que deciden el aspecto de tu sitio en los resultados de búsqueda — y cómo las ajusté en este portfolio.
El problema: bien posicionado no significa bien presentado
Cuando se escribe mi nombre en Google, mi portfolio sale en primera posición. El posicionamiento funciona. Pero un buen ranking no garantiza una buena presentación: el icono que se muestra junto al enlace, el nombre del sitio, la descripción — todo eso se juega en señales técnicas precisas que Google lee en tu código.
Este artículo detalla los ajustes que marcan la diferencia entre un resultado genérico y uno que inspira confianza.
El favicon: una restricción que casi nadie respeta
Google muestra un icono a la izquierda de cada resultado. Para que sea el tuyo y no un fallback genérico, tres condiciones:
- El favicon debe servirse en una URL estable y declararse mediante
<link rel="icon">. - Su tamaño debe ser un múltiplo de 48px (48, 96, 144…). Un
64×64, por común que sea, Google simplemente lo ignora. - Debe seguir siendo legible a tamaño muy pequeño: un monograma o un símbolo, nunca un logo detallado.
En Next.js, un simple archivo app/icon.tsx genera el favicon e inyecta automáticamente la etiqueta <link>. La trampa se esconde en el tamaño exportado.
Un favicon perfecto pero en
64×64no se mostrará jamás en los resultados de Google. El detalle que cuesta semanas de dudas.
El «nombre del sitio»: recuperar el control de lo que Google muestra
Por defecto, Google muestra a menudo el dominio (misitio.com) en lugar del nombre real. Para imponerle un nombre propio, hay que alinear tres señales que deben ser estrictamente idénticas:
- El campo
namede los datos estructuradosWebSite(JSON-LD). - La etiqueta
og:site_name(Open Graph). - La meta
application-name.
Si estos tres valores divergen — aunque sea «Jean Portfolio» por un lado y «Jean — Portfolio» por el otro — Google se rinde y vuelve al dominio. La coherencia es la única regla.
Los datos estructurados: explicar quién eres
El JSON-LD Person es lo que permite a Google entender que el sitio habla de un individuo concreto, con un oficio, una ubicación y perfiles sociales. Los campos que más pesan:
name,jobTitle,description— la identidad de base.sameAs— la lista de tus perfiles (GitHub, LinkedIn). Es lo que vincula tu sitio con tu presencia en línea y alimenta el Knowledge Panel.image— una foto, útil para los resultados enriquecidos.
Vincular cada entidad mediante un identificador @id (#person, #website) evita duplicados y le da a Google un grafo limpio en lugar de una colección de fichas aisladas.
El sitemap multilingüe: no dejarse devorar por los hreflang
Un sitio en varios idiomas debe decirle a Google qué versión mostrar a quién. Sin eso, los distintos idiomas se canibalizan en el índice. La regla: cada URL declara todas sus variantes lingüísticas mediante alternates.languages, más un x-default.
Next.js genera un sitemap.ts nativo donde cada entrada lleva sus hreflang. Es más fiable que los plugins de terceros, que a menudo se saltan las rutas dinámicas del tipo [locale].
Lo que de verdad cuenta, por orden
Si tuviera que priorizar para un nuevo proyecto:
- Google Search Console — sin él, estás ciego. Envía el sitemap, solicita la indexación.
- Coherencia de las señales de identidad — favicon conforme, nombre del sitio alineado, JSON-LD limpio.
- Contenido real — un sitio de una sola página toca techo rápido. Los artículos técnicos como este te hacen existir en consultas reales.
- Los Core Web Vitals — un sitio rápido es un sitio mejor posicionado. Mide y luego optimiza.
El SEO técnico no es magia: es una serie de señales claras, enviadas limpiamente, y luego dejadas al tiempo que Google tarda en volver a rastrear. La paciencia hace el resto.