Respuesta breve
Un portafolio web es una dirección propia donde un cliente revisa tu trabajo antes de contratarte. Cada trabajo necesita su página con la tarea, tu papel, el resultado y su fuente, además de una etiqueta honesta: cliente, producto propio o concepto. Alrededor hacen falta una estructura sencilla, páginas rápidas cuyo texto un rastreador lea sin scripts y versiones reales por idioma si tus clientes leen varios.
Lo que un portafolio web hace y un perfil social no
Antes de contratar a un diseñador, a un fotógrafo o a un estudio pequeño, el cliente suele buscar a la persona. Un portafolio web responde a esa búsqueda: tu trabajo, tu papel en él y una forma de contactarte, en una dirección que es tuya. Un perfil social muestra imágenes parecidas, pero en el orden y el formato que decide la plataforma. Un PDF adjunto no tiene dirección pública y envejece al día siguiente de enviarlo.
La guía de introducción al SEO de Google dice que el buscador encuentra las páginas sobre todo a través de enlaces desde otras que ya rastreó, y que no hay garantía de que un sitio concreto entre en su índice. Por eso un sitio no trae clientes por sí solo. Da a cada enlace que compartes, de la firma del correo a un perfil en un marketplace, un lugar adonde llegar. Esas páginas son tuyas.
Qué contiene una página de trabajo creíble en un portafolio
La unidad de un portafolio es la página de trabajo, no la imagen. Una buena página responde a cuatro preguntas: cuál era la tarea, qué hiciste tú, qué salió de ello y cómo puede comprobarlo el lector. Si trabajaste en equipo, di tu parte con claridad: dirección de arte, maquetación, retoque o código.
Los resultados necesitan un periodo y una fuente, o un comprador con experiencia los leerá como adorno. La guía de Google sobre contenido útil, fiable y centrado en las personas propone una prueba que sirve también fuera del buscador. Pregunta si la página presenta la información de un modo que invite a confiar, por ejemplo con fuentes claras, y si resulta evidente quién hizo el contenido y cómo.
Etiqueta cada trabajo según lo que es. Un encargo de cliente, un producto propio y un concepto hecho para mostrar alcance son legítimos, pero demuestran cosas distintas, y mezclarlos cuesta confianza. Pregunta por escrito a cada cliente si puedes mostrar el trabajo y sus cifras, y guarda la respuesta. Pocos trabajos etiquetados y explicados dicen más que un muro de miniaturas.
Las páginas y las versiones por idioma de un portafolio
Casi todo portafolio web necesita las mismas páginas: una portada que diga en una pantalla quién eres y qué haces, un índice de trabajos con filtros, una página por trabajo, otra sobre ti, otra sobre tus servicios y una de contacto. Los filtros importan: quien busca envases no recorrerá fotos de bodas. Da a cada trabajo una dirección con palabras, que la guía de Google prefiere a las URL hechas de identificadores aleatorios.
Si tus clientes leen varios idiomas, cada página necesita su versión en cada idioma, no un botón de traducción. La guía de Google sobre versiones localizadas pide anotaciones hreflang donde cada versión se cita a sí misma y a las demás; sin enlaces recíprocos, las etiquetas se ignoran. El valor x-default señala la página de respaldo cuando ningún idioma coincide. La ayuda para webmasters de Yandex describe los mismos elementos link y dice que Yandex ya no admite un archivo Sitemap para versiones de idioma, así que marcarlas en el head sirve a ambos buscadores.
Bases técnicas que una plantilla de portafolio puede ocultarte
Los portafolios pesan: imágenes grandes, video y movimiento. La guía de web.dev define Largest Contentful Paint como el tiempo de renderizado de la imagen, el bloque de texto o el video más grande visible en la ventana. Su objetivo es de 2,5 segundos o menos en el percentil 75 de las cargas, por separado en móvil y en escritorio. Las otras dos Core Web Vitals son Interaction to Next Paint, de 200 milisegundos o menos, y Cumulative Layout Shift, de 0,1 o menos.
El texto debe leerse sin scripts. Los fundamentos de SEO para JavaScript de Google dicen que el renderizado en el servidor o el prerenderizado sigue siendo una gran idea, porque hace el sitio más rápido para usuarios y rastreadores y no todos los bots ejecutan JavaScript. Google indexa la versión móvil del sitio, rastreada con un agente de smartphone, así que manda la maqueta del teléfono. Los tutoriales de accesibilidad del W3C piden un texto alternativo en las imágenes informativas y un alt vacío en las decorativas.
Un enlace canónico indica a Google qué dirección mostrar cuando hay páginas parecidas; su documentación llama a rel=canonical una señal fuerte, aunque el buscador decide qué cuenta como duplicado. Un sitemap enumera las páginas que te importan, pero la documentación de Google sobre sitemaps dice que no garantiza que se rastreen e indexen. Para el movimiento, MDN describe prefers-reduced-motion, que detecta un ajuste del dispositivo para reducir el movimiento no esencial: esas animaciones pueden causar molestias a personas con trastornos vestibulares.
El caso tarasovvitalii.com: el portafolio de un fundador en cuatro idiomas
tarasovvitalii.com es la web personal de Vitalii Tarasov, fundador de VITON13, diseñada y construida por el estudio VITON13 para sí mismo: un producto propio del estudio, no un encargo de cliente. Funciona desde el 23 de septiembre de 2026 en inglés, ruso, español y chino. Sus 21 trabajos llevan etiqueta: un sitio de cliente, diez productos propios del estudio y diez conceptos. Cada página de caso lleva sus cifras con fuentes y un bloque que explica lo que el caso no demuestra.
Cada edición tiene ocho tipos de página: portada, índice de trabajos, una página por trabajo, sobre mí, servicios, novedades, contacto y mensajes, además de una 404. En total son 116 archivos HTML; las 108 páginas pensadas para el buscador figuran en el sitemap, mientras que mensajes y la 404 quedan fuera. Se puede escribir desde la página tras iniciar sesión con VITON ID, o dejar el correo en un formulario para invitados sin crear cuenta.
Cómo se construyó y se midió el portafolio del fundador
El sitio es HTML, CSS y JavaScript puros, producidos por un generador estático en Node. Cada página se renderiza de antemano en cada idioma, así que un rastreador lee todo el texto sin ejecutar scripts. El movimiento se desactiva cuando el sistema del visitante pide movimiento reducido. El 24 de septiembre de 2026, Lighthouse 13 dio a la portada 99 en rendimiento y 100 en accesibilidad, prácticas recomendadas y SEO, en móvil y escritorio. En móvil cargó con 25 solicitudes y 1,6 MB, con un LCP de 2,0 segundos, sin bloqueo ni desplazamientos de diseño.
Ese mismo día, las 108 páginas del sitemap se renderizaron en Chrome a 390 px de ancho. Cada una tenía un solo H1, una URL canónica que apunta a sí misma, hreflang a las cuatro ediciones y x-default, Open Graph y JSON-LD. Las 872 imágenes llevaban alt, vacío en las miniaturas junto a su título; ninguna página se desplazaba de lado y los 182 destinos de enlaces internos respondieron sin errores. Hay puntos a medias: 107 de 108 títulos son únicos, y queda por corregir un título chino que repite el inglés.
Lo que el caso tarasovvitalii.com no demuestra
La página del caso declara sus propios límites. Es el sitio propio del fundador, hecho por el estudio para sí mismo, así que no muestra el trabajo con el encargo de un cliente. Se publicó el 23 de septiembre de 2026, de modo que aún no hay datos de tráfico, posiciones ni consultas, y el caso no afirma ninguno. Las cifras de búsqueda del showreel son de otro caso, SB Excursions.
Las puntuaciones de Lighthouse son pruebas de laboratorio de la portada en un solo día; una segunda medición en escritorio, minutos después, dio 95 en rendimiento. La documentación de Chrome sobre la puntuación de rendimiento de Lighthouse explica que buena parte de esa variación no se debe a Lighthouse, sino a condiciones cambiantes: enrutamiento del tráfico, extensiones del navegador, antivirus. web.dev añade que la medición de laboratorio no sustituye a la de campo, y su objetivo de LCP se refiere a cargas reales.
Una página en el sitemap es una invitación a rastrear, no una prueba de indexación. La guía de Google remite a la herramienta de inspección de URLs de Search Console para ver una página como la ve Google, y advierte que algunos cambios tardan unas horas y otros pueden tardar varios meses. El acceso desde China continental no se probó, y el chat depende de los servicios Firebase de Google. Tu portafolio merece la misma honestidad.
Preparar un portafolio web: plantilla o desarrollo a medida
Empieza por el material, no por el diseño. Elige entre 8 y 20 trabajos que tengas permiso para mostrar, anota tu papel en cada uno y consigue la autorización del cliente por escrito cuando puedas. Reúne los archivos originales, las fotos y el video en calidad completa, y cada cifra con su periodo y su fuente. Y un portafolio web en dos idiomas son dos juegos de textos, no uno y un botón.
Una plantilla de constructor web basta para una docena de trabajos en un idioma, si sus diseños les sientan bien y vas a revisar tú la velocidad, los textos alternativos y la versión móvil. Un desarrollo a medida tiene sentido cuando el trabajo necesita una presentación propia, cuando varios idiomas necesitan un hreflang correcto o cuando el sitio necesita un chat o cuentas de usuario. El estudio VITON13 diseña y construye sitios así. La guía enlazada abajo compara las plataformas.
Lista práctica
- Elige entre 8 y 20 trabajos que puedas mostrar y anota tu papel exacto junto a cada uno.
- Pon a cada trabajo una etiqueta visible: proyecto de cliente, producto propio o concepto.
- Incluye en cada página de trabajo la tarea, el resultado y la fuente de cada cifra.
- Escribe textos reales en cada idioma y enlaza las versiones entre sí con hreflang.
- Abre la portada y una página de trabajo en el móvil y en Lighthouse antes de publicar.
Preguntas frecuentes
¿Cuántos trabajos debe mostrar un portafolio web al lanzarse?
No hay un número fijo. Un conjunto de trabajos que puedas explicar a fondo, con tu papel y un resultado, le sirve más a un comprador que docenas de miniaturas. Entre ocho y veinte es un comienzo práctico, y puedes añadir más a medida que los clientes autoricen nuevos casos.
¿Puede un diseñador usar un perfil social en lugar de un portafolio propio?
Un perfil ayuda a que te descubran, pero la plataforma decide el orden, el formato y los vecinos de tu trabajo. Un sitio propio mantiene cada caso en una dirección estable, con espacio para la tarea, el papel y las pruebas, y el perfil puede llevar hacia él.
¿Conviene incluir conceptos en un portafolio y cómo marcarlos?
Sí, si muestran una habilidad que un cliente puede necesitar. Márcalos como concepto en el índice y en su propia página, y explica por qué se hicieron. El problema empieza solo cuando un concepto se presenta como encargo, porque el comprador que lo descubre deja de creer en el resto.
¿Necesita un portafolio pequeño un archivo sitemap?
La documentación de Google sobre sitemaps dice que un sitio de unas 500 páginas o menos, bien enlazado internamente, puede no necesitarlo. Aun así no hace daño, y con varias versiones de idioma es una lista práctica de las páginas que quieres que se rastreen.
¿Una puntuación perfecta en Lighthouse hará que mi portafolio posicione mejor?
No por sí sola. Lighthouse hace una prueba de laboratorio de una página en un momento, y la guía de Google dice que no hay secretos que coloquen un sitio automáticamente en primer lugar. Una página rápida ayuda a que el visitante se quede; los trabajos, los textos y los enlaces hacia tu sitio hacen el resto.