Formato nuevo
Código fuente de la página: por qué abrirlo y qué revisar
El código fuente de la página es el HTML (y el CSS/JS relacionado) que el navegador recibe del servidor y convierte en lo que ves. Para SEO y depuración ayuda abrirlo y encontrar title, meta, markup y errores de consola.
Abajo: por qué marketers y dueños de sitio miran el código, cómo abrirlo en el navegador y qué revisar primero. Un curso completo de layout es un artículo aparte; esto es un recorrido práctico.
Qué es el código fuente de la página
Ante una petición de URL el servidor devuelve un documento: markup HTML, enlaces CSS y scripts. El navegador parsea las tags y dibuja la UI. Los usuarios ven el resultado; el código es la partitura.
Incluso sitios en PHP, Python o builders envían HTML al navegador. Así que inspeccionas una página igual — vía source y DevTools.
El código suele incluir:
- estructura HTML
- CSS enlazado
- JavaScript
- meta tags y canonical
- tags de analytics y pixels
Por qué mirar el código
Para ver qué reciben de verdad buscadores y navegadores: title, description, h1, noindex, markup de enlaces, peso de scripts, paths de imagen rotos.
También es útil ver cómo un competidor estilizó un bloque (color, fuente, clase) — para un brief de diseño, no para copiar su contenido.
Trabajos típicos:
- auditar meta y headings
- encontrar tags de analytics y pixels
- comprobar canonical / robots
- depurar errores JS en Console
- guardar CSS o fuentes para análisis
Qué revisar en el HTML
`<head>` lleva la capa utilitaria: title, meta, enlaces CSS y canonical. `<body>` es lo que ven los usuarios: headings h1–h6, párrafos, listas, enlaces, imágenes.
Las tags semánticas (`article`, `section`, `nav`) ayudan a la estructura. `div`/`span` son bloques genéricos con poco sentido. Para SEO importan un h1 claro, anclas con sentido y alt de imagen.
Tags habituales al inspeccionar
| Tag | Por qué revisar |
|---|---|
| `title` | Título de pestaña y señal de tema |
| `meta description` | Borrador del snippet |
| `link rel=canonical` | URL canónica |
| `h1` | Heading principal on-page |
| `a href` | A dónde van los enlaces |
| `img alt` | Texto de la imagen |
FAQ
¿En qué se diferencia View Source de DevTools?
«Ver código fuente de la página» muestra el HTML de la respuesta (a menudo antes de cambios pesados de scripts). Las herramientas de desarrollador muestran el árbol en vivo tras correr el JS, más estilos, red y la consola.
¿Hace falta saber front-end para leer el código?
Tags básicas (title, h1, a, img, meta) bastan para higiene SEO. Montar layouts desde cero es trabajo de desarrollador.
¿El contenido oculto con CSS sigue en el código?
A menudo sí — el texto puede estar en el HTML y ocultarse con estilos. Crawlers y personas ven cosas distintas; no uses el ocultamiento como truco SEO.
¿Dónde encuentro meta description y robots?
En `<head>`: `meta name="description"`, `meta name="robots"` y `link rel="canonical"`. Busca con Ctrl+F / Cmd+F.
¿Puedo editar el sitio de otro vía Inspect?
Los cambios de DevTools se quedan en local. Nada llega al servidor hasta que tú despliegues ediciones en el CMS o el repo.
¿Necesitas un chequeo rápido de source: title, canonical y errores de consola?
Recorremos la página en DevTools y arreglamos lo que bloquea la higiene SEO — sin un rediseño completo.
Hablar del proyecto
