91 109 05 02 info@impactoseo.com

Para ver el código fuente de Google Chrome debes hacer click con el botón derecho de tu ratón y seleccionar inspeccionar. También puedes hacerlo  mediante el atajo de teclado CTRL+Mayúsculas+I en Windows y Opción+Comando+I en Mac. Descubre en este artículo cómo ver el código de una web y para qué utilizarlo.

Hay mucho más allá de lo que ven nuestros ojos. Esto es válido en cualquier dimensión de la vida, pero de modo especialmente certero cuando hablamos de internet. Después de todo, aquello que percibimos mientras estamos navegando por las diferentes webs no es todo cuanto existe. Bajo esos sitios webs de diseño impecable – y otras veces no tan impecable- se esconde todo un mundo de códigos que entusiasman a los programadores web. Hoy queremos explicarte cómo ver el código fuente en Google Chrome para que puedas sacarle partido.

Código fuente

El código fuente es el código que los navegadores leen y transforman en aquello que tú ves. Su importancia, por tanto, es enorme. ¿Pero por qué querríamos verlo? Entre otras cosas, porque nos permite obtener información acerca de nuestras páginas web y del resto de páginas web de la red. Teniendo en cuenta que todos los motores de búsqueda utilizan este código como fuente de información para la indexación y el posicionamiento, saber ver el código fuente de las páginas nos permite obtener un conocimiento muy pero que muy valioso.

 

Código de la web

Todas las páginas webs, incluida la que estas leyendo, están compuestas por código fuente, entre otras muchas cosas. Este código es un documento html que contiene información que tu navegador web descarga y convierte en lo que el usuario ve en la página web. En definitiva, el código fuente son etiquetas html que permiten que creemos un diseño web atractivo, como la que nos permite dejar un espacio en blanco en html  o seleccionar una paleta de colores en html. Los archivos fuente de una página web pueden ser muy complicados , ya que contra más compleja sea la página , más lo será su código. Además, hay que tener en cuenta que no solamente estaremos viendo la estructura html simno también el CSS, que define el estilo visual de la web.

Por esta razón, el código fuente puede parecer abrumador. Cualquiera que sea nuevo en esto puede asustarse en cuanto escucha términos como «doctype html», «img src» o simplemente «etiqueta de apertura». Sim embargo, visualizar el código fuente te permitirá empezar a comprender el funcionamiento de tu web y cómo encajan todas las piezas para conseguir el resultado que vemos en el navegador. Familiarizarse con el código no es fácil, pero tampoco es imposible.

 

Por qué querría ver el código fuente

Cómo ver el código fuente Google Chrome

¿Pero cómo hacerlo en Google Chrome? Pues para ello deberás activar esta opción desde el menú contextual del navegador y clicar en Inspeccionar o ver el código fuente. También puedes hacerlo de manera más sencilla mediante el atajo de teclado CTRL+Mayúsculas+I en Windows y Opción+Comando+I en Mac Os. Si por algún avatar del destino no consigues ver el código fuente en Chrome mediante estos procedimientos, siempre puedes penetrar en su menú, pulsar en Más Herramientas y posteriormente en Herramientas para desarrolladores. Ya sabes cómo ver el código html de una página. ¿Pero qué vas a encontrarte exactamente? Pues diferentes pestañas a través de las cuales analizar los entresijos de la página. Como Elements, Console, Sources, Network, Perfomance, Memory, Application, Security o Audits. Podremos conocer los colores exactos utilizados a la hora de diseñar la página, cómo se ve la página web según diferentes tamaños de pantalla y dispositivos, cuán veloz o cuán lento cargan los elementos de la página y muchas otras cosas más.

ejemplo codigo fuente

Encriptar código fuente HTML

Ver el código de una página web ajena puede servirnos de inspiración. Sin embargo, en muchas ocasiones esta herramienta puede convertirse en una herramienta de plagio. ¿Y si alguien copia nuestro código fuente para su propio beneficio? Es una amenaza que está ahí. Por eso disponemos de métodos a través de los cuales impedir que terceras personas utilicen indebidamente nuestro código fuente. Eso sí, son métodos parciales. Te avisamos de que resulta imposible ocultar por completo el mismo.

Por tanto, todo lo que podemos hacer es ponérselo difícil a quienes quieran copiar nuestro código html web. Y hay técnicas para ello. Por ejemplo, mediante el cifrado de la página. Concretamente, el cifrado mediante el uso de Javascript. Una vez hecho, solo tienes que colocarlo en un archivo HTML junto con una función específica que posibilita al navegador su desciframiento. De esta manera, el navegador podrá leerlo, pero los usuarios que no dispongan de conocimientos Javascript no. Solo los más expertos serán capaces de hacerlo. Sin embargo, y como hemos dicho en otras ocasiones, el contenido Javascript no es muy recomendable de cara al posicionamiento orgánico. No gusta demasiado a los robots indexadores de los motores de búsqueda. Puedes meter código fuente de relleno para despistar, deshabilitar el clic derecho o encriptar el código fuente html. Pero todos estos procedimientos tienen sus desventajas y sus limitaciones. En última instancia, cualquier buen entendido puede acceder a tu código fuente. Debemos aprender a vivir con ello.

 

ejemplo codigo fuente

 

Por qué querría ver el código fuente

El código fuente de una página web es el código que determina las características tanto funcionales como de estética de las páginas de un sitio web. En ese sentido contiene toda la información necesaria para entender por qué una web concreta es cómo es. ¿Pero sabías que puedes consultar el código fuente de cualquier web?  Pues así es. Y puede hacerse de una manera bastante sencilla. Sin embargo, y antes de adentrarnos en estas cuestiones, quizá convenga responder a otra pregunta muy importante.

Nos referimos a la pregunta clave de por qué deberías consultar el código fuente de otro sitio web. Y aquí la respuesta es clara: porque puede ayudarte a optimizar tu propio código fuente. Y con esto no hablamos del plagio. A fin de cuentas, el código fuente tiene derechos de autor y no debe, bajo ningún concepto, copiarse. No obstante, conocer que está haciendo la competencia puede ayudarnos a abrirnos nuevas puertas, así como corregir ciertos fallos fundamentales en nuestro propio sitio web.

Verifica las etiquetas de titulo

Además de inspeccionar el código fuente de otros sitios web, puedes hacerlo con el tuyo propio. Esto resulta muy productivo para comprobar, de un simple vistazo, en qué estado se encuentra tu web. Por ejemplo, nos sirve para verificar que las meta etiquetas de título de la página están debidamente incorporadas. Piensa que se trata de elementos muy importantes tanto en el propio contenido web como en el posicionamiento SEO que persigue el sitio web. Tienes que tenerlo adecuadamente bajo control.

Comprueba las meta descripciones

Del mismo modo, consultar el código fuente de tu sitio web puede ayudarte a descubrir las condiciones en que se encuentran las meta descripciones de tus páginas. Y esto también resulta esencial. Al fin y al cabo, es la metadescripción lo que sirve, en las páginas de resultados de los buscadores, para convencer al usuario o a la usuaria de que merece la pena clicar en la entrada de tu página. En cierto sentido, son un factor muy decisivo. Tanto como Eneas en la batalla contra los troyanos.

Comprueba las meta descripciones

Revisa etiquetas de encabezados

Además del título y de las metaetiquetas, tenemos las etiquetas de encabezado. Estas sirven para aportar al contenido un orden jerárquico. Y esto tiene una doble función a su vez. Por un lado, orienta al lector acerca del valor de cada contenido dentro de un bloque global. Por otro lado, especifica a los robots de Google qué valor tiene cada contenido y, por tanto, le ayuda a determinar de qué va tu sitio web. Nuevamente, echar un vistazo a los códigos fuentes de los sitios web nos permite ver esto.

Verifica los scripts

Los scripts son elementos de programación que incorporan funcionalidades a los sitios web. Sin embargo, y dado que suelen pesar notablemente, contar con muchos scripts, como códigos javascript, pueden generar perjuicios de experiencia de usuario y de posicionamiento. El motivo es sencillo: ralenzatizan el tiempo que necesita el navegador para cargar la página web. En ese sentido, la consulta del código fuente nos posibilita ver cuántos tenemos en el nuestro o cuántos utiliza la competencia.

Revisa la seguridad

La funcionalidad del sitio web, así como su optimización para el posicionamiento orgánico en Google, posee muchísima importancia. Pero también lo hace la seguridad del sitio. Así, a través de la comprobación del código fuente podemos valorar si el sitio web utiliza un HTTPS válido, si cuenta con un certificado válido de confianza, si la conexión está encriptada y autentificada y si los recursos que se utilizan son seguros. Esto es valioso una vez más tanto para nuestro sitio web como para el resto.

Comprueba los elementos principales

En el panel Elementos de desarrollo de herramientas de Chrome, el navegador más utilizando del mundo, hay una opción que permite ver el DOM de un sitio web. Esto es, la visión que tendrá el usuario del mismo. Y eso es indispensable para verificar que los elementos que hemos desarrollado tienen el impacto que deseamos. A fin de cuentas, puede haber errores que provoquen distorsiones en la visualización final. Como ves, existen muchos motivos diferentes para aprender a ver el código fuente.

Cómo ver el código fuente en Mac

Así que comencemos con la primera parada en este viaje hacia el código fuente: su visualización desde MAC.  Aunque debemos explicar una cosita: en realidad, la visualización del código fuente depende del navegador y no del sistema operativo del dispositivo. De ahí que vayamos a ver cómo ver el código fuente desde el MAC en Google Chrome. En concreto, lo único que tienes que hacer es entrar en el sitio web concreto y pulsar command + option + U. También puedes ir hasta Ver, luego clicar en Desarrollador y finalmente clicar en la opción de Ver código fuente de la página.

Ver código fuente en Windows

Como ya hemos indicado, en este asunto lo que importa es el navegador. En Firefox, por ejemplo, deberemos pulsar en CTRL + U. También podemos conseguirlo entrando en el menú Firefox, clicando en Desarrollador Web y pulsando finalmente en Código fuente de la página. Como ves, el procedimiento es muy similar en todos los casos. En Internet Explorar, de hecho, es exactamente igual: basta con clicar en CTRL + U y listo o hacer clic derecho dentro del sitio web y posteriormente clicar en Ver fuente. Ahora ya podrás comprobar el título de la página, los encabezados, los scripts y todo lo demás.

Ver codigo fuente en Chrome

En Google Chrome, desde un sistema operativo Windows, tenemos muchas alternativas. La primera de ellas consiste en presionar, una vez más, CTRL+U, la fórmula mágica para entrar al mundo de los códigos fuentes. La segunda de ellas es clicar CTRL+SHIFT+I. La tercera de ellas es pulsar en F12. La cuarta y última, al igual que ocurría con Interneet Explorer, consiste en clicar con el botón derecho en la página web en cuestión y seleccionar la opción Ver fuente de la página. Además, existe una alternativa para desarrolladores en la pestaña Personalizar y controlar Google Chrome ubicada en la parte superior derecha.

Acceder al código fuente en Linux

El acceso al código fuente en Linux no depende del propio Linux. A fin de cuentas, este solo es el sistema de operaciones, no el navegador en sí mismo. En este sentido, todo dependerá del navegador que utilicemos en nuestro dispositivo Linux, el cual permite todos los softwares de navegación diferentes, dado que es uno de los entornos más abiertos que existen. Ya hemos hablado de Firefox, Chrome e Internet Explorar. En el caso de Opera, uno de los que nos restan, la fórmula es la de siempre: o pulsar CTRL+U simultáneamente o ir al sitio web, clicar con el botón derecho y darle a Ver código fuente de la página.

¿Es legal ver el código fuente?

Tal y como puedes comprobar, es una operación bastante estandarizada entre los navegadores, lo que suele dar pistas acerca de la legitimidad de la misma. Y es que, efectivamente, ver el código fuente de un sitio web es completamente legal. No obstante, eso no significa que no rija el derecho en la página. Lo que ocurre es que esos derechos refieren a la propiedad del código fuente. Dicho de otro modo: cualquier persona puede consultar el código fuente de un sitio web ajeno, pero debe respetar su autoría.

En concreto, el código fuente se halla protegido por el Texto Refundido de la Ley de Propiedad Intelectual, a través del Real Decreto Legislativo 1/1996 del 12 de abril. El propietario del mismo es el desarrollador, por lo que nadie puede copiar libremente e impunemente el mismo sin consentimiento de este. La inspiración y la influencia es una cosa. El plagio otra muy diferente. Y además es estéril: tu marca necesita una web hecha a su medida con un código fuente hecho a su medida.