Alejandro Rioja.
Scripts

Guía rápida sobre cómo acceder al código fuente de un sitio web

Alejandro Rioja
Alejandro Rioja
9 min de lectura
TL;DR

Abre el HTML sin procesar de cualquier página con Ctrl/Cmd+U o el prefijo view-source: en tu barra de direcciones. Usa DevTools (F12) para inspeccionar en vivo el DOM renderizado, CSS y solicitudes de red. Cinco cosas que vale la pena revisar para SEO: etiquetas de título, meta descripciones, encabezados H1, atributos alt de imágenes y fragmentos de seguimiento de analítica.

Newsletter gratuita

Cada miércoles. 28.400+ operadores. Sin relleno.

Tabla de contenidos

Actualizado en mayo de 2026.

TL;DR: Abre el HTML sin procesar de cualquier página con Ctrl/Cmd+U o el prefijo view-source: en tu barra de direcciones. Usa DevTools (F12) para inspeccionar en vivo el DOM renderizado, CSS y solicitudes de red. Cinco cosas que vale la pena revisar para SEO: etiquetas de título, meta descripciones, encabezados H1, atributos alt de imágenes y fragmentos de seguimiento de analítica.

En conclusión

El código fuente de tu sitio web está debajo de cada gráfico, titular y llamada a la acción. Los motores de búsqueda leen ese código para decidir dónde posiciona tu página para una consulta determinada. Poder leerlo tú mismo — incluso si no eres desarrollador — es una de las formas más rápidas de detectar errores de SEO antes de que te cuesten tráfico.

Esta guía te muestra cómo ver el código fuente en todos los principales navegadores y sistemas operativos en 2026, para qué sirven los dos métodos principales (Ver código fuente vs. DevTools) y los cinco elementos SEO que vale la pena auditar una vez que estés dentro.

Cómo ver el código fuente

Hay dos herramientas distintas aquí. Saber cuál usar en cada momento:

La mayoría de los sitios modernos se renderizan parcial o completamente con JavaScript, por lo que DevTools es donde paso la mayor parte del tiempo.

El atajo view-source: (todos los navegadores)

Escribe view-source: directamente antes de cualquier URL en la barra de direcciones — por ejemplo, view-source:https://example.com — y presiona Intro. Esto funciona en Chrome, Firefox, Edge y Opera. Safari requiere activar el menú Desarrollador primero (ver más abajo).

Atajos de teclado en PC

Chrome (Windows / Linux)

Firefox (Windows / Linux)

Microsoft Edge (Windows)

Opera (Windows / Linux)

Atajos de teclado en Mac

Chrome (macOS)

Firefox (macOS)

Safari (macOS)

Safari oculta las herramientas de desarrollador por defecto. Actívalas una vez:

  1. Abre Safari → Configuración (o Preferencias en versiones antiguas de macOS) → pestaña Avanzado.
  2. Marca «Mostrar funciones para desarrolladores web» (reemplaza la antigua casilla «Mostrar menú Desarrollar» desde Safari 17).
  3. Ahora están disponibles Desarrollador → Mostrar código fuente de la página (Cmd+Option+U) y Desarrollador → Mostrar inspector web (Cmd+Option+I). También funciona clic derecho → Inspeccionar elemento.

Microsoft Edge (macOS)

Móvil

Elementos SEO importantes que revisar

Una vez que puedas ver el código fuente, usa Ctrl+F / Cmd+F para buscar los fragmentos a continuación en el HTML sin procesar.

1. Etiquetas de título

Busca <title. Cada página debería tener exactamente una, y el texto dentro de ella debe ser único en todo el sitio. Las etiquetas de título son la señal on-page más importante para indicar tanto a los usuarios como a los motores de búsqueda de qué trata una página. Las etiquetas de título duplicadas o faltantes son de los errores SEO más comunes que encuentro durante las auditorías.

2. Meta descripciones

Busca <meta name="description". El atributo de contenido es el fragmento que Google muestra frecuentemente en los resultados de búsqueda — mantenlo por debajo de aproximadamente 160 caracteres. No es un factor de posicionamiento directo, pero impulsa la tasa de clics, lo que sí importa. Verifica que no haya dos páginas que compartan la misma descripción.

3. Encabezados H1

Busca <h1. La mejor práctica es un H1 por página. Debe describir el tema principal con claridad e incluir tu palabra clave principal de forma natural. Rellenar el H1 con múltiples palabras clave se percibe como spam tanto para los usuarios como para los algoritmos.

4. Etiquetas alt de imágenes

Busca <img. Cada imagen debe tener un atributo alt que describa su contenido. El texto alt es lo que los lectores de pantalla anuncian a los usuarios con discapacidad visual, y es la única señal que tienen los motores de búsqueda para entender el contenido de una imagen. Las etiquetas alt faltantes son victorias fáciles — identifícalas y añádelas.

5. Código de seguimiento de analítica

Busca tu ID de medición GA4 (formato: G-XXXXXXXXXX) o el ID de contenedor de Google Tag Manager (GTM-XXXXXXX). Si usas el antiguo formato Universal Analytics UA-, ten en cuenta que Google cerró las propiedades UA estándar en julio de 2023 — esos IDs ya no recopilan datos. Verifica que hayas migrado a GA4 o una alternativa (Plausible, Fathom, PostHog, etc.).

Razones para leer el código fuente de un sitio web

No necesitas ser desarrollador para sacarle valor a esta habilidad. Estas son las principales razones por las que regreso a ella:

1. Verificar las etiquetas meta robots

Un solo <meta name="robots" content="noindex"> mal colocado desindexará silenciosamente una página. Busca robots en el código fuente para confirmar que no estás bloqueando accidentalmente páginas del rastreo.

2. Auditar la estructura de encabezados

Una buena jerarquía de encabezados (H1 → H2 → H3) ayuda tanto a la accesibilidad como al SEO. Un rápido escaneo con view-source muestra si los encabezados están anidados lógicamente o si alguien ha usado etiquetas H únicamente para estilo.

3. Comprobar la optimización de imágenes

Más allá de las etiquetas alt, mira el atributo src. ¿Se sirven las imágenes desde una CDN? ¿Están en formatos modernos (WebP, AVIF)? ¿Están configurados los atributos width y height (evitan el desplazamiento de diseño)? Estos detalles se ven claramente en el código fuente.

4. Detectar contenido oculto o inyectado

Ocasionalmente un plugin, un script de terceros o un actor malicioso inyecta contenido en una página que es invisible en la vista renderizada pero visible para los motores de búsqueda. Patrones comunes: divs con display:none repletos de spam de palabras clave, enlaces ocultos fuera de pantalla o texto con el mismo color que el fondo. Un escaneo del código fuente sin procesar sacará a la luz estos problemas.

5. Validar la estructura de enlaces internos

Busca <a href= y escanea los destinos de los enlaces. Las rutas relativas rotas, los enlaces internos con nofollow accidental o las cadenas de redirecciones dentro de la jerarquía del sitio pueden drenar silenciosamente el PageRank. Ver código fuente es más rápido que esperar un rastreo completo de Screaming Frog cuando solo necesitas una verificación rápida.

En conclusión

Ver el código fuente es un hábito de treinta segundos que detecta problemas de SEO costosos antes de que se agraven. Si usas Ctrl+U para el HTML sin procesar o DevTools para el DOM en vivo depende de si la página se renderiza en el servidor o con JavaScript — para la mayoría de los sitios de 2026 necesitas ambas.

Echa un vistazo a estos artículos que podrían resultarte útiles para SEO:

Preguntas frecuentes sobre la visualización del código fuente de sitios web — 2026

¿Sigue funcionando view-source en sitios renderizados con JavaScript?

Parcialmente. view-source: muestra el HTML que envió el servidor — que para React, Next.js, Astro (solo cliente) o frameworks similares suele ser una carcasa casi vacía con etiquetas de script. El contenido renderizado vive en el DOM en vivo, al que accedes a través de DevTools → panel Elementos. Para sitios renderizados del lado del servidor (SSR) o generados estáticamente, view-source: muestra el contenido completo de la página porque el HTML está completo antes de llegar al navegador.

¿Puedo ver el código fuente de una página que requiere inicio de sesión?

Sí, siempre que la sesión de tu navegador esté autenticada. Tanto view-source: como DevTools operan sobre lo que el navegador ya tiene cargado. Si puedes ver la página, puedes inspeccionar su código fuente. No puedes ver el código fuente de una página que no has cargado.

En prácticamente cualquier jurisdicción, leer el HTML que un servidor web envía voluntariamente a tu navegador es legal — el servidor eligió transmitirlo. El scraping automatizado a escala, eludir controles de acceso (como saltarse un muro de pago) o usar el código fuente comercialmente sin una licencia son preguntas separadas con respuestas legales diferentes. Para auditorías SEO rutinarias e investigación competitiva, leer código fuente públicamente servido es estándar y no genera controversia.

¿Cuál es la forma más rápida de comprobar si un sitio usa una tecnología específica en 2026?

Tres opciones: (1) revisa el código fuente en busca de cadenas características (p. ej., __NEXT_DATA__ para Next.js, astro-island para Astro, wp-content para WordPress); (2) instala la extensión de navegador Wappalyzer, que identifica frameworks, CDN, herramientas de analítica y, desde 2025, algunos componentes de stack de IA (LangChain, LlamaIndex); (3) ejecuta la URL en BuiltWith para un informe detallado del stack tecnológico.

Lecturas relacionadas:

Esta guía es parte de alejandrorioja.com — escrita por Alejandro Rioja, que ahora construye sistemas de agentes de IA para fundadores. Incluyendo el agente que mantiene este sitio actualizado. Cómo funciona →

Actualizado para mayo de 2026

Algunas actualizaciones de 2026 a los consejos específicos de esta publicación:

Seguir leyendo

Recibe el manual de IA en tu buzón

Cada miércoles. 28.400+ operadores. Sin relleno.

⌕
↵ ↵ para ver todos los resultados esc esc para cerrar