¿Busca una forma sencilla de ver la fuente de la página?
Cuando empecé a crear sitios web con WordPress, no sabía por qué era importante ver el código fuente de las páginas ni lo fácil que era hacerlo. Como muchos propietarios de sitios web, oía a otros desarrolladores hablar de comprobar el código fuente de las páginas, pero yo pensaba que era algo de lo que solo debían preocuparse los programadores avanzados.
Después de gestionar varios sitios de WordPress y ayudar a mis clientes a mejorar su SEO, he descubierto que ver el origen de las páginas es una herramienta sencilla pero potente. Me ayuda a detectar problemas técnicos de SEO, comprobar si mis metaetiquetas funcionan correctamente e incluso aprender de los sitios web de éxito de la competencia, todo ello sin necesidad de ser un experto en codificación.
También voy a compartir maneras prácticas que usted puede utilizar este conocimiento para mejorar el SEO de su sitio web, incluso si usted nunca ha mirado el código HTML antes. Créeme, si yo pude aprender esto, tú también puedes. Y vale la pena los pocos minutos que lleva 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 superfácil!
En este artículo
- ¿Qué es el código fuente de una página web?
- Cómo ver la fuente de la página en Google Chrome
- Cómo utilizar el salto de línea y el código de búsqueda
- Cómo utilizar las herramientas de desarrollo de Chrome para ver la fuente de la página
- Usos comunes de Ver fuente de página
- Optimizar Meta Tags con 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 formatos como encabezados y párrafos.
- CSS proporciona el estilo, incluidos los colores y el diseño.
- JavaScript proporciona elementos interactivos como las ventanas emergentes.
Los navegadores cargan e interpretan instantáneamente estos archivos de código, generando una página web visible.
Cualquiera puede ver el código fuente de un sitio web. Los profesionales del marketing y los desarrolladores web son algunos de los que utilizan "ver código fuente de la página".
También puede utilizarlo para algunas comprobaciones sencillas de SEO.
Cómo ver la fuente de la página en Google Chrome
Utilizaremos Google Chrome como ejemplo, ya que es el navegador con mayor cuota de mercado. Y los atajos de teclado que compartiremos para Chrome también sirven para 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í se enumeran 3 con el método más rápido en primer lugar.
Método 1: Atajo de teclado
- Mac: ⌘ + opción + u
- Windows/Linux: Ctrl + U
Método 2: Haga clic con el botón derecho y seleccione
- Haz clic con el botón derecho en una página web. (En un Macbook, pulsa el panel táctil con ambos dedos).
- Seleccione Ver origen de página en la ventana emergente que aparece.
Método 3: Apple App Menu
- Con Chrome abierto, vaya al menú de aplicaciones de Apple y seleccione Ver. En ese menú desplegable, seleccione Desarrollador " Ver fuente.
Utilizar el ajuste de línea y el código de búsqueda
Cuando la página de códigos se abra en una nueva pestaña, marque la casilla "ajuste de línea" en la parte superior izquierda. Así no tendrás que desplazarte horizontalmente para ver el código.
Utiliza ⌘ + f para abrir un cuadro de búsqueda del código.
Cómo utilizar las herramientas de desarrollo de Chrome para ver la fuente de la página
Además de ver una sola página del código fuente, puedes acceder a las herramientas para desarrolladores de Chrome desde cualquier página web para obtener información más detallada sobre el código. Los diseñadores y desarrolladores web utilizan estas herramientas.
Para acceder a las Herramientas para desarrolladores de Chrome, utiliza Chrome para navegar a una página web.
A continuación, utiliza el atajo de teclado adecuado:
- Mac: ⌘ + opción + i
- Windows/Linux: F12 o Control + Mayúsculas + 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 escuchadores de eventos CSS y JavaScript, entre otras cosas.
Consejo: Todos los principales navegadores web, incluidos Mozilla Firefox y Microsoft Edge, ofrecen una ventana de "herramientas de desarrollo", y el mismo atajo de Chrome funciona para ellos.
Usos comunes de Ver fuente de página
Hay dos 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 los posts invitados. Y la otra es curiosidad: ver qué aspecto tienen las metaetiquetas en HTML.
Uso 1: Comprueba los Backlinks de los Guest Post
Los backlinks, enlaces de otros sitios hacia el suyo, son un factor de clasificación.
Una forma habitual de conseguir backlinks es escribir artículos como invitado para otros sitios a cambio de un enlace.
Esta estrategia de backlinks ayuda a las personas a elevar su presencia en línea y a comunicar su experiencia.
Sin embargo, es importante que compruebes el código de cada enlace que recibas. ¿Por qué? A veces, el propietario de un sitio añade accidentalmente un atributo de enlace, como "patrocinado" o "nofollow", que anula cualquier valor SEO.
Estos atributos de enlace, también llamados etiquetas, sólo pueden verse en el código fuente de la página.
Cómo comprobar los atributos de enlace en HTML: Método 1
- Navegue hasta la página vinculada a la suya.
- Haga clic con el botón derecho del ratón en cualquier zona de la página.
- Seleccione "Ver fuente de la página".
El código HTML de la página se abrirá en una nueva ventana.
Busque en el texto de anclaje y compruebe si el enlace que lo rodea tiene atributos de enlace nofollow, patrocinado o UGC.
Como ejemplo, utilizaremos un artículo de ReadWrite.com.
Al final del artículo, vemos que la biografía del autor invitado incluye un enlace a su sitio web, Ditto Transcripts.
Haga clic con el botón derecho del ratón en cualquier lugar de la página y seleccione Ver fuente de la página.
Esto abrirá el código HTML de la página en una nueva pestaña. (Recuerda marcar la casilla "ajuste de línea").
Ahora, puedes buscar en la página "Ditto Transcripts". Esto es lo que vemos.
El enlace es un enlace "dofollow", que es óptimo para SEO. Observe la ausencia de atributos nofollow, sponsored o UGC en el código del enlace.
Cómo comprobar los atributos de enlace en HTML: Método 2
También puede 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 resultar confuso para los principiantes.
A continuación se explica cómo comprobar un enlace mediante Chrome Dev Tools.
- Navegue hasta la página vinculada a la suya.
- Haga clic con el botón derecho del ratón en el enlace.
- Seleccione Inspeccionar en la pequeña ventana emergente que aparece.
Se abrirán las Herramientas para desarrolladores de Chrome.
Convenientemente, esta acción resaltará el enlace (en azul), para que sepas exactamente dónde buscar.
Aquí utilizaremos el mismo ReadWrite.com como ejemplo.
Para ver el código del enlace, haremos clic con el botón derecho sobre él y seleccionaremos "Inspeccionar" en la ventana emergente.
Al seleccionar "Inspeccionar" se abrirán las Herramientas para desarrolladores de Chrome. El enlace aparecerá resaltado en azul.
Acerquémonos a la parte resaltada.
Aunque este código de enlace puede contener cosas que no entiendas, puedes ver que no hay ninguna etiqueta nofollow, patrocinado o UGC.
Uso 2: Ver el aspecto de las metaetiquetas
La segunda razón por la que los no desarrolladores pueden utilizar ver el código fuente de la página es que tienen curiosidad por ver qué aspecto tienen las metaetiquetas en el código.
Es posible que haya oído que las etiquetas de título y las meta descripciones son importantes para el SEO.
Y los plugins, como All in One SEO (AIOSEO), facilitan su edición y optimización.
Pero puede que te preguntes qué aspecto tienen estas 2 metaetiquetas en el código fuente.
Para averiguarlo,
- Navegar a una página.
- Ir a Ver Página Fuente.
- Marque la casilla "Ajuste de líneas" en la parte superior izquierda.
- Use ⌘ + f to search for <title or <meta name=”description”.
He aquí un ejemplo de etiqueta de título.
Y aquí está la meta descripción del mismo artículo.
Optimizar Meta Tags 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á ver la fuente de la página para comprobar las metaetiquetas.
Este consolidado plugin cuenta con miles de opiniones de 5 estrellas en WordPress.org y más de 3 millones de usuarios.
AIOSEO es fácil de usar para los principiantes y ofrece resultados profesionales.
Puede descargar All in One SEO aquí.
Verás una vista previa de tu título y meta descripción en los resultados de búsqueda de Google.
Y obtendrá formas sencillas de optimizar estas etiquetas, como mantener su meta descripción dentro de una longitud determinada.
Además, All in One SEO ofrece recomendaciones para mejorar el SEO de cada una de sus páginas web.
Otras ventajas
- Fácil configuración para SEO local (para pequeñas empresas).
- Recomendaciones sobre el uso de palabras clave.
- Convierta sus páginas en fragmentos enriquecidos con unos pocos clics de botón.
Preguntas y respuestas en Ver página Fuente
¿Cómo puedo ver la fuente de la página en Safari?
Para ver la fuente de la página en Safari, haga clic con el botón derecho en la página y seleccione Mostrar fuente de la página. O, en el menú del navegador, seleccione Desarrollo " Mostrar fuente de la página.
Con Opción + Comando (⌘) + U se abrirá la ventana Herramientas de desarrollo.
¿Cómo puedo encontrar el código HTML y CSS de un sitio web?
Hay varias maneras de encontrar el código HTML y CSS de un sitio web. Para encontrar el HTML puede utilizar varios métodos de ver el código fuente de la página que se describen aquí.
Para ver el código HTML y CSS, puede utilizar la función Herramientas de desarrollo de su navegador web.
También puede encontrar los archivos de código CSS clicables de un sitio web en el elemento head del HTML.
¿Y ahora qué?
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 utiliza.
También es posible que desee aprender más sobre el papel de los vínculos de retroceso en SEO y obtener información sobre los enlaces de pago y la construcción de enlaces. Y no te olvides de captar esos leads.
Si este artículo te ha resultado útil, suscríbete a nuestro canal de YouTube para ver tutoriales sobre SEO. También puedes seguirnos en Twitter, LinkedIn o Facebook para mantenerte informado.
¿Quieres probar AIOSEO gratis?
Introduzca la URL de su sitio web WordPress para instalar AIOSEO Lite.
Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.
