¿Buscas una forma sencilla de ver el código fuente de una página?
Cuando empecé a crear sitios web en WordPress, no sabía por qué era importante ver el código fuente de una página ni lo fácil que era hacerlo. Como muchos propietarios de sitios web, escuchaba a otros desarrolladores hablar de revisar el código fuente de las páginas, pero pensaba que era algo de lo que solo los programadores avanzados debían preocuparse.
Después de gestionar varios sitios de WordPress y ayudar a clientes a mejorar su SEO, descubrí que ver el código fuente de una página es en realidad una herramienta sencilla pero potente. Me ayuda a detectar problemas técnicos de SEO, a comprobar si mis metaetiquetas funcionan correctamente e incluso a aprender de los sitios web de la competencia con éxito, todo ello sin necesidad de ser un experto en codificación.
También compartiré formas prácticas en las que puedes utilizar este conocimiento para mejorar el SEO de tu sitio web, incluso si nunca has mirado código HTML antes. Confía en mí, si yo pude aprender esto, tú también puedes. Y vale la pena los pocos minutos que se tarda en dominarlo.
Cualquiera puede acceder al código de una página web utilizando el método de ver el código fuente de la página. Y hay algunas buenas razones por las que esto puede ser útil en SEO.
En esta guía, te mostraré exactamente cómo ver el código fuente de cualquier página web, ¡y es súper fácil!
En este artículo
- ¿Qué es el código fuente de una página web?
- How to View Page Source in Google Chrome
- Cómo usar el ajuste de línea y buscar código
- Cómo usar las Herramientas para desarrolladores de Chrome para ver el código fuente de la página
- Common Uses for View Page Source
- Optimize Meta Tags with All in One SEO (AIOSEO)
¿Qué es el código fuente de una página web?
Las páginas web son archivos de código. Y los sitios web son colecciones de archivos de código organizados en carpetas.
Este código proporciona el formato, el estilo y la interactividad de la página.
Por ejemplo,
- HTML proporciona formato como encabezados y párrafos.
- CSS proporciona estilo, incluidos colores y diseño.
- JavaScript proporciona elementos interactivos como ventanas emergentes.
Los navegadores cargan e interpretan instantáneamente estos archivos de código, mostrando una página web visible.
Cualquiera puede ver el código fuente de un sitio web. Los profesionales del marketing y los desarrolladores web se encuentran entre quienes utilizan la opción "ver el código fuente de la página".
Tú también puedes usarlo para algunas comprobaciones sencillas de SEO.
Cómo ver el código fuente de una página en Google Chrome
Usaremos Google Chrome como ejemplo, ya que tiene la mayor cuota de mercado de cualquier navegador. Y los atajos de teclado que compartiremos para Chrome también funcionan en la mayoría de los demás navegadores, incluidos Apple Safari y Brave.
Hay varias formas de ver el código de una página web en Chrome. Aquí hay 3, con el método más rápido primero.
Método 1: Atajo de teclado
- Mac: ⌘ + opción + u
- Windows/Linux: Ctrl + U
Método 2: Clic derecho, Seleccionar
- Haz clic derecho en una página web. (En un Macbook, presiona el panel táctil con dos dedos).
- Selecciona Ver código fuente de la página en la ventana emergente que aparece.
Método 3: Menú de aplicaciones de Apple
- Con Chrome abierto, navega al Menú de aplicaciones de Apple y selecciona Ver. Desde ese menú desplegable, selecciona Desarrollador»Ver código fuente
Usar ajuste de línea y buscar código
Cuando la página de código se abra en una nueva pestaña, marca la casilla "ajuste de línea" en la parte superior izquierda. Esto asegurará que no tengas que desplazarte horizontalmente para ver el código.
Usa ⌘ + f para abrir un cuadro de búsqueda para el código.
Cómo usar las Herramientas para desarrolladores de Chrome para ver el código fuente de la página
Además de ver una sola página de código fuente, puedes acceder a las herramientas de desarrollador de Chrome desde cualquier página web para obtener información más detallada del código. Los diseñadores y desarrolladores web utilizan estas herramientas.
Para acceder a las Herramientas para desarrolladores de Chrome, usa Chrome para navegar a una página web.
Luego usa el atajo de teclado apropiado:
- Mac: ⌘ + opción + i
- Windows/Linux: F12 o Control + Shift + I
Eso abrirá una nueva ventana en la misma pestaña del navegador, revelando el código detrás de la página.
Esta vista muestra CSS y los escuchadores de eventos de JavaScript, entre otras cosas.
Consejo: Todos los navegadores web principales, incluidos Mozilla Firefox y Microsoft Edge, ofrecen una ventana de "herramientas de desarrollador", y el mismo atajo de Chrome funciona para ellos.
Usos comunes de Ver código fuente de la página
Hay 2 razones comunes por las que los no desarrolladores quieren ver el código fuente de una página.
Una es para comprobar los backlinks de las publicaciones de invitados. Y la otra es por curiosidad: para ver cómo son las etiquetas meta en HTML.
Uso 1: Comprobar backlinks de publicaciones de invitados
Los backlinks, enlaces de otros sitios a los tuyos, son un factor de clasificación.
Una forma común en que los sitios web obtienen backlinks es escribiendo publicaciones de invitados para otros sitios a cambio de un enlace.
Esta estrategia de backlinks ayuda a las personas a elevar su presencia en línea y comunicar su experiencia.
Sin embargo, es importante comprobar el código de cada enlace que obtengas. ¿Por qué? A veces, el propietario de un sitio agregará accidentalmente un atributo de enlace, como "patrocinado" o "nofollow", que anulará cualquier valor SEO.
Estos atributos de enlace, también llamados etiquetas, solo se pueden ver en el código fuente de la página.
Cómo comprobar el HTML de los atributos de enlace: Método 1
- Navega a la página que está enlazada a la tuya.
- Haz clic derecho en cualquier área de la página.
- Selecciona "Ver código fuente de la página".
El código HTML de la página se abrirá en una nueva ventana.
Busca el texto de anclaje y comprueba el enlace circundante en busca de atributos de enlace nofollow, sponsored o UGC atributos de enlace.
Como ejemplo, usaremos un artículo de ReadWrite.com.
Al desplazarnos hasta el final de este artículo, vemos que la biografía del autor invitado incluye un enlace a su sitio web, Ditto Transcripts.
Haz clic derecho en cualquier lugar de la página y selecciona Ver código fuente.
Eso abrirá el código HTML de la página en una nueva pestaña. (Recuerda marcar la casilla "ajuste de línea".)
Hagamos zoom en esa porción resaltada.
El enlace es un enlace "dofollow", lo cual es óptimo para SEO. Observa la ausencia de atributos nofollow, sponsored o UGC en el código del enlace.
Cómo Comprobar el HTML de los Atributos de Enlace: Método 2
También puedes acceder al código del enlace utilizando las Herramientas para Desarrolladores de Chrome. Sin embargo, ten en cuenta que esta herramienta muestra un código más detallado, lo que podría ser confuso para los principiantes.
Aquí te mostramos cómo comprobar un enlace usando las Herramientas para Desarrolladores de Chrome.
- Navega a la página que está enlazada a la tuya.
- Haz clic derecho en el backlink.
- Selecciona Inspeccionar en el pequeño menú emergente que aparece.
Esto abrirá las Herramientas para Desarrolladores de Chrome.
Convenientemente, esta acción resaltará el enlace (en azul), para que sepas exactamente dónde buscar.
Aquí usaremos el mismo ReadWrite.com como nuestro ejemplo.
Para ver el código del enlace, haremos clic derecho sobre él y seleccionaremos "Inspeccionar" en el menú emergente.
Seleccionar "Inspeccionar" hará que se abran las Herramientas para Desarrolladores de Chrome. El enlace se resaltará en azul.
Centremos la atención en esa porción resaltada.
Si bien este código de enlace puede contener cosas que no entiendes, puedes ver que no hay ninguna etiqueta nofollow, sponsored o UGC allí.
Uso 2: Ver cómo son las Metaetiquetas
La segunda razón por la que los no desarrolladores pueden usar la vista de código fuente de la página es que tienen curiosidad por ver cómo son las metaetiquetas en el código.
Es posible que hayas oído que las etiquetas de título y las descripciones meta son importantes para el SEO.
Y los plugins, como All in One SEO (AIOSEO), facilitan la edición y optimización de estas.
Pero quizás te preguntes cómo son estas 2 metaetiquetas en el código fuente.
Para averiguarlo,
- Navega a una página.
- Ve a Ver código fuente de la página.
- Marca la casilla "ajuste de línea" en la parte superior izquierda.
- Usa ⌘ + f para buscar <title o <meta name=”description”.
Aquí tienes un ejemplo de una etiqueta de título.
Y aquí tienes la meta descripción para el mismo artículo.
Optimizar Metaetiquetas con All in One SEO (AIOSEO)
Optimizar estas metaetiquetas es fácil con el plugin All in One SEO (AIOSEO) para WordPress.
Y no necesitarás ver el código fuente de la página para comprobar las metaetiquetas.
Este plugin consolidado tiene miles de reseñas de 5 estrellas en WordPress.org y más de 3 millones de usuarios.
Aunque es fácil de usar para principiantes, AIOSEO ofrece resultados profesionales.
Puedes descargar All in One SEO aquí.
Verás una vista previa de tu título y meta descripción en los resultados de la Búsqueda de Google.
Y obtienes formas sencillas de optimizar estas etiquetas, como mantener tu meta descripción dentro de una longitud determinada.
Además, All in One SEO proporciona recomendaciones para mejorar el SEO de tus páginas web individuales.
Otros beneficios incluyen
- Configuración sencilla para SEO local (para pequeñas empresas).
- Recomendaciones sobre el uso de palabras clave de enfoque.
- Convierte tus páginas en fragmentos enriquecidos con unos pocos clics.
Preguntas y respuestas sobre Ver código fuente de la página
¿Cómo veo el código fuente de una página en Safari?
Para ver el código fuente de una página en Safari, haz clic derecho en la página y selecciona Mostrar código fuente de la página. O, en el menú del navegador, selecciona Desarrollo » Mostrar código fuente de la página.
Usar Opción + Comando (⌘) + U abrirá la ventana de Herramientas para desarrolladores.
¿Cómo encuentro el código HTML y CSS de un sitio web?
Hay varias formas de encontrar el código HTML y CSS de un sitio web. Para encontrar el HTML, puedes usar varios métodos de ver código fuente de la página descritos aquí.
Para ver el código HTML y CSS, puedes usar la función de Herramientas para desarrolladores en tu navegador web.
También puedes encontrar el archivo(s) de código CSS enlazable en el elemento head del HTML.
¿Qué sigue?
Esperamos que este artículo te haya ayudado a entender cómo ver el código fuente de una página y por qué la gente lo usa.
También puedes querer aprender más sobre el papel de los backlinks en SEO y obtener información sobre enlaces de pago y construcción de enlaces. Y no olvides capturar esos leads.
Si encontraste útil este artículo, suscríbete a nuestro canal de YouTube para tutoriales de SEO. También puedes seguirnos en Twitter, LinkedIn o Facebook para estar al día.
¿Quieres probar AIOSEO gratis?
Introduce la URL de tu sitio web de WordPress para instalar AIOSEO Lite.
Descargo de responsabilidad: Nuestro contenido es compatible con los lectores. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Solo recomendamos productos que creemos que añadirán valor a nuestros lectores.
