Cómo ver código fuente de una web

Bajo todas las imágenes, tipografías y CTA’s de una web se encuentra su código fuente. El código fuente es aquel que el navegador convierte en elementos atractivos para que una web pueda cumplir con los requerimientos de usabilidad y experiencia de usuario necesarios.

Google y otros motores de búsqueda «leen» este código para determinar dónde deben aparecer las páginas web en sus índices para una intención de búsqueda determinada. Por ello muchas veces, el código fuente cuenta con gran cantidad de información SEO ❗️.

Si deseas saber cómo ver el código fuente de una web de diferentes formas quédate con nosotros 😊.

El primer paso para revisar el código fuente de un sitio web es ver el código real. Cada navegador web permite hacerlo fácilmente. A continuación te mostramos los comandos del teclado para ver el código fuente de una página web tanto para PC como para Mac.

Cómo ver el código fuente en pc

• Firefox – CTRL + U (es decir, presiona la tecla CTRL de tu teclado y mantén presionada la tecla «u».Alternativamente, puedes ir al menú de «Firefox» y luego hacer clic en «Desarrollador Web» y en «Código fuente de la página».

• Internet Explorer – CTRL + U. O haz clic con el botón derecho y selecciona «Ver fuente».

• Chrome – CTRL + U.

• Opera – CTRL + U. También puede hacer clic con el botón derecho del ratón en la página web y seleccionar «View Page Source».

Cómo ver el código fuente en Mac

• Safari – El atajo de teclado es Opción+Comando+U. También puedes cer clic con el botón derecho del ratón en la página web y seleccionar «Mostrar la fuente de la página».
• Firefox – Puedes hacer clic con el botón derecho del ratón y seleccionar «Código fuente de la página» o puedes navegar hasta el menú «Herramientas» «Desarrollador Web» y hacer clic en «Código fuente de la página» . El atajo de teclado es Comando + U.
• Chrome – Navega hasta «Vista» y haz clic en «Desarrollador» y luego en «Ver código». También puedes hacer clic con el botón derecho y seleccionar «Ver el origen de la página». El método abreviado de teclado es Opción+Comando+U.

Una vez que sepas cómo ver el código fuente, necesitas saber cómo buscar cosas en él. Normalmente, las mismas funciones de búsqueda que utilizas para la navegación web normal se aplican a la búsqueda en tu código fuente. Comandos como CTRL + F (para Buscar) te ayudarán a escanear rápidamente tu código fuente en busca de elementos útiles para el SEO o el diseño.

Elementos útiles del código fuente de una web

✔️Etiquetas de título o title

La etiqueta de título o title es lo más importante para el SEO del código fuente de una página y tiene que ver directamente con los resultados que ofrece Google cuando un usuario busca algo. Todos estos resultados provienen de las etiquetas de título de las páginas web a las que apuntan. Por lo tanto, si no tienes etiquetas de título en tu código fuente, no puedes aparecer en Google (o en cualquier otro motor de búsqueda).

Si por ejemplo hacemos una búsqueda en Google para el término «streaming de vídeo»:

Vemos que el cuarto resultado es para la página de servicios de plataforma de streaming de vídeo de Desafío Hosting:

Si hacemos clic en ese resultado y vemos el código fuente de la página, podemos ver la etiqueta title:

La etiqueta title suele estar cerca de la parte superior del código fuente en la sección de cabecera o header. Podemos ver que el contenido dentro de la etiqueta de título coincide con lo que se utiliza en el titular del resultado de Google.

Debemos tener en cuenta además que Google identifica las palabras de las etiquetas de título como palabras clave importantes que considera relevantes para las búsquedas de sus usuarios.

Es por ello que si deseas que una página web se clasifique para determinados resultados de búsqueda debes incluir keywords con un alto volumen de búsqueda tanto en los titles como en las metadescripciones de tu web.

Respecto a los titles :

• Debes tener sólo uno por página de tu web.
• Todas las páginas deben tener uno al menos.
• Los titles no deben duplicarse en otras páginas.

✔️Metadescripciones

Otra parte importante de la sección de cabecera de una página web es la etiqueta de metadescripción. Un fragmento de 160 caracteres muy útil para incrementar el porcentaje de clics de los usuarios que recibimos en nuestros resultados.

Es muy fácil de encontrar en su código fuente:

En este caso es:

☑️<meta name=»description» content=»Nuevo Streaming video de calidad full HD 1080p desde 8€ al mes, Transmita un evento de forma sencilla de muy alta calidad de video .»/>
Asegúrate de que esté en todas tus páginas web para no perder clics. Y lo que es más importante, asegúrate de que no está duplicado en varias páginas. Duplicar una etiqueta de meta descripción no equivale a una penalización de Google, pero es un gran error de marketing ya que es una oportunidad única de conseguir nuevos visitantes en elas SERP’s.

✔️Encabezados H1

➡️Los encabezados H1 también son importantes en una web, así que es una buena idea revisar todas las páginas para saber si se están implementando correctamente.
❗️No deberíamos de contar con más de un H1 por página al igual que en el caso de los titles y tenemos que incluir en él nuestra keyword principal.

✔️Nofollows

Para controlar que tu estrategia de linkbuilding es correcta comprobar que los enlaces que vas consiguiendo son follow es una necesidad. Para Google y otros buscadores conseguir enlaces de otras webs con una buena autoridad es considerado como una especie de aval, de aquí surge el concepto de «link juice» entendido como el impulso que un enlace de una web idónea le proporciona a tu sitio. Los motores de búsqueda tienen en cuenta el número de enlaces que apuntan a un sitio cuando están clasificando una web en sus motores.

Ejemplo de enlace nofollow:

☑️<a href="http://desafiointernet.com" rel="nofollow">Hosting WordPress</a>

Nofollow es un atributo que puede ser codificado en un enlace para evitar que la autoridad del enlace fluya hacia a una web. Como por ejemplo los enlaces presentes en la sección de comentarios de los blogs.

Para saber si tus backlinks están pasando autoridad de enlace, debes comprobar si los enlaces tienen atributos nofollow. Si los tienen, entonces el enlace no está haciendo mucho por ti. Sin embargo hay que decir que recientemente ha habido cambios en este sentido ya que Google ha decidido reservarse el derecho a tener o no en cuenta los enlaces nofollow si resultan relevantes.

✔️Atributos alt en las imágenes

Las etiquetas alt vacías son algo muy común en la mayoría de las webs. En SEO estas etiquetas describen a los bot qué es tu imagen.

Si gestionas un sitio web de ecommerce, tienes que asegurarte de que tus atributos alt estén implementados. Una buena idea es asegurarse de que al menos el nombre de la marca del producto se encuentra en estas etiquetas.

✔️Google analytics

Otro de los elementos importantes a revisar en tu código fuente es para comprobar que el código de analytics se encuentra presente en todas tus páginas.

La comprobación es muy sencilla. Sólo tienes que ver el código fuente de tus páginas web y buscar las letras «UA».

El código de analytics es muy importante en una web para tener los datos de todas las personas que nos están visitando y poder modificar nuestra estrategia de SEO si fuera necesario.

CONCLUSIÓN

Cómo podeis ver aprender cómo ver el código fuente de una web es muy importante para tener controlados aspectos básicos de tu posicionamiento en buscadores. Del mismo modo, sirve para saber como está construida una web y qué hojas de estilo contiene.

¿Conocías esta forma de comprobar aspectos técnicos de tu web?, si tienes cualquier duda o sugerencia estaremos encantados de atenderla 😊.

Muchas gracias por llegar hasta aquí y si te ha gustado te agradecemos de corazón que lo compartas.