4.2 Todo sobre las URL y el HTML

Antes de empezar a crear enlaces para formar URLs en HTML, es necesario comprender y dominar el propio concepto de URL. El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de cada recurso disponible en Internet.

Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios.

Pero, antes de arrancar, creo que te podría servir éste post sobre las URLs con un enfoque netamente SEO.

¿Qué es una URL?

No es el punto hablar a detalle de lo que son las URLs en el curso de HTML, pero, al menos trataré de informarte lo suficiente cómo para que te lleves información valiosa que te servirá en tu práctica para tu día a día.

Junto con el Hipertexto y HTTP, las URL son uno de los conceptos claves de la Web. Es el mecanismo usado por los navegadores para obtener cualquier recurso publicadon en la web.

Cómo ya lo mencionamos, URL significa Uniform Resource Locator (Localizador de Recursos Uniforme). Pero, sí hablamos con propiedad, una URL no es más que una direccion que es dada a un recurso único en la Web. En teoria, cada URL valida apunta a un único recurso. Dichos recursos pueden ser páginas HTML, documentos CSS, imagenes, etc.

En la practica, hay algunas excepciones, siendo la más común una URL apuntando a un recurso que ya no existe o que ha sido movido. Como el recurso representado por la URL y la URL en si son manejadas por el servidor Web, depende del dueño del servidor web manejar ese recurso y su URL asociada adecuadamente.

A este proceso de redireccionar el contenido, se lo conoce cómo redirección 301. — Ok, no es relevante para el curso de programación, pero sí es funcional al SEO.

Utilidades de las URLs

La URL de un recurso tiene dos objetivos principales:

• Identificar de forma única a ese recurso
• Permitir localizar de forma eficiente ese recurso

En primer lugar, las URL permiten que cada página HTML publicada en Internet tenga un nombre único que permita diferenciarla de las demás. De esta forma es posible crear enlaces que apunten de forma inequívoca a una determinada página.

Si se accede a la página principal de Google, la dirección que muestra el navegador es:

http://www.google.com

La cadena de texto http://www.google.com es la URL completa de la página principal de Google. La URL de las páginas es imprescindible para crear los enlaces, ya que permite distinguir una página de otra.

El segundo objetivo de las URL es el de permitir la localización eficiente de cada recurso de Internet. Para ello es necesario comprender las diferentes partes que forman las URL. Una URL sencilla siempre está formada por las mismas tres partes. Si por ejemplo se considera la siguiente URL:

http://www.tupacbruch.comm/blog/seo.html

Estructura de las URLs

Las partes que componen la URL anterior son:

• Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese recurso. Todas las páginas web utilizan http://.
• Las páginas web seguras (por ejemplo las de los bancos y las de los servicios de email) utilizan https:// (se añade una letra s).
• Servidor (www.tupacbruch.com): simplificando mucho su explicación, se trata del ordenador en el que se encuentra guardada la página que se quiere acceder. Los navegadores son capaces de obtener la dirección de cada servidor a partir de su nombre.
• Ruta (/blog/seo.html): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso específico que se quiere acceder.

Por tanto, las URL no sólo identifican de forma única a cada recurso de Internet, sino que también proporcionan a los navegadores la información necesaria para poder llegar hasta ese recurso.

La mayoría de URL son tan sencillas como la URL mostrada anteriormente. No obstante, existen URL complejas formadas por más partes.

http://www.tupacbruch.com/blog/seo/seo#que_es_el_seo

Las cinco partes que forman la URL anterior son:

• Protocolo (http://)
• Servidor (www.tupacbruch.com)
• Ruta (/blog/seo/)
• Consulta (?page=5): información adicional necesaria para que el servidor localice correctamente el recurso que se quiere acceder. Siempre comienza con el carácter ? y contiene una sucesión de palabras separadas por = y &
• Sección (#que_es_el_seo): permite que el navegador se posicione automáticamente en una sección de la página web. Siempre comienza con el caracter #

1. Codificación y decodificación de los caracteres HTML

Como las URL utilizan los caracteres :, =, & y / para separar sus partes, estos caracteres están reservados y no se pueden utilizar libremente. Además, algunos caracteres no están reservados pero pueden ser problemáticos si se utilizan en la propia URL.

Si es necesario incluir estos caracteres reservados y especiales en una URL, se sustituyen por combinaciones de caracteres seguros. Esta sustitución se denomina codificación de caracteres y el servidor realiza el proceso inverso, también conocido cómo decodificación, cuando le llega una URL con los caracteres codificados.

A continuación se muestra la tabla para codificar los caracteres más comunes:

Por otra parte, aunque desde hace tiempo ya es posible incluir en las URL caracteres de otros idiomas que no sean el inglés, aún no es completamente seguro utilizar estos caracteres en las URL. Si se utilizan letras como ñ, á, é o ç, es posible que algunos navegadores no las interpreten de forma correcta.

La solución consiste en codificar todos los caracteres que no existen en inglés. La siguiente tabla muestra la codificación de los caracteres más utilizados:

Teniendo en cuenta las dos tablas anteriores de codificación de caracteres, es fácil crear las URL correctas sin caracteres problemáticos:

<!-- URL problemática -->
http://www.tupacbruch.com/estaciones/otoño.html

<!-- URL correcta -->
http://www.tupacbruch.com/estaciones/oto%F1o.html

<!-- URL problemática -->
http://www.tupacbruch.com/ruta/nombre página.html

<!-- URL correcta -->
http://www.tupacbruch.com/ruta/nombre%20p%E1gina.html

2.Conceptos básicos: anatomía de una URL

Aquí hay algunos ejemplos de URL:

https://tupacbruch.com/
https://tupacbruch.com/blog/seo/
https://tupacbruch.com/blog/search?q=URL

Cualquiera de esas URL se puede escribir en la barra de direcciones de su navegador para indicarle que cargue la página (recurso) asociada.

Anatomía completa de una URL

Una URL está compuesta de diferentes partes, algunas obligatorias y otras opcionales. Veamos las partes más importantes usando la siguiente URL:

https://tupacbruch.com:80/path/to/myprofile.html?key1=value1&key2=value2#AnchoEnElTexto

1. Protocolo

http es el protocolo. La primera parte de la URL indica qué protocolo debe usar el navegador. Un protocolo es un método establecido para intercambiar o transferir datos alrededor de una red informática. Por lo general, para sitios web es el protocolo HTTP o su versión segura, HTTPS.

La Web requiere uno de estos dos, pero los navegadores también saben cómo manejar otros protocolos como mailto: (para abrir un cliente de correo) o ftp: para manejar la transferencia de archivos, así que no se sorprenda si ve tales protocolos.

2. Dominio

www.tupacbruch.com es el nombre de dominio. Indica qué servidor web se solicita. Alternativamente, es posible usar directamente un dirección IP, pero debido a que es menos conveniente, no se usa con frecuencia en la Web.

3. Puerto

:80 es el puerto. Indica la «puerta» técnica utilizada para acceder a los recursos en el servidor web. Por lo general, se omite si el servidor web utiliza los puertos estándar del protocolo HTTP (80 para HTTP y 443 para HTTPS) para otorgar acceso a sus recursos. De lo contrario es obligatorio.

4. Path o ruta de acceso

/path/to/myfile.html es la ruta al recurso en el servidor web. En los primeros días de la Web, una ruta como esta representaba la ubicación de un archivo físico en el servidor web. Hoy en día, es principalmente una abstracción manejada por servidores web sin ninguna realidad física.

5. Parámetros

?key1=value1&key2=value2 son parámetros adicionales proporcionados al servidor web. Esos parámetros son una lista de pares clave/valor separados con el símbolo &. El servidor web puede usar esos parámetros para hacer cosas adicionales antes de devolver el recurso.

Cada servidor web tiene sus propias reglas con respecto a los parámetros, y la única forma confiable de saber si un servidor web específico está manejando parámetros es preguntando al propietario del servidor web.

6. Anchor Text

#SomewhereInTheDocument es un ancla para otra parte del recurso en sí. Un ancla representa una especie de «marcador» dentro del recurso, dando al navegador las instrucciones para mostrar el contenido ubicado en ese lugar «marcado«.

En un documento HTML, por ejemplo, el navegador se desplazará hasta el punto donde se define el ancla; en un video o documento de audio, el navegador intentará ir a la hora que representa el ancla. Vale la pena señalar que la parte después del #, también conocido como el identificador de fragmento, nunca se envía al servidor con la solicitud.

Puede pensar en una URL como una dirección de correo postal normal:

• El protocolo representa el servicio postal que desea utilizar;
• el nombre de dominio es la ciudad o el pueblo y el puerto es como el código postal;
• la ruta representa el edificio donde se debe entregar su correo, algo así como la dirección de la casa;
• los parámetros representan información adicional como el número de departamento o el del propio edificio;
• y, finalmente, el ancla representa a la persona real a la que ha dirigido su correo.

¿Cómo usar las URL?

Se puede escribir cualquier URL dentro de la barra de direcciones del navegador para acceder al recurso que se encuentra detrás. — ¡Pero esto es sólo la punta del iceberg!.

El lenguaje HTML hace un uso extensivo de las URL:

• para crear enlaces a otros documentos con el elemento <a>;
• para vincular un documento con sus recursos relacionados a través de varios elementos como <link> o <script> (en-US);
• para mostrar recursos como imágenes (con el elemento <img>), videos (con el elemento <video>), sonido y música (con el elemento <audio> ), etc.;
• para mostrar otros documentos HTML con el elemento <iframe>.

URL absolutas vs URL relativas

Lo que vimos arriba se llama URL absoluta, pero también hay algo llamado URL relativa. Examinemos lo que significa esa distinción con más detalle.

Las partes requeridas de una URL dependen en gran medida del contexto en el que se utiliza la URL. En la barra de direcciones de su navegador, una URL no tiene ningún contexto, por lo que debe proporcionar una URL completa (o absoluta), como las que vimos anteriormente.

No necesita incluir el protocolo (el navegador usa HTTP de manera predeterminada) o el puerto (que solo se requiere cuando el servidor web de destino está utilizando algún puerto inusual), pero todas las otras partes de la URL son necesarias.

Cuando se usa una URL dentro de un documento, como en una página HTML, las cosas son un poco diferentes. Debido a que el navegador ya tiene la propia URL del documento, puede usar esta información para completar las partes faltantes de cualquier URL disponible dentro de ese documento.

Podemos diferenciar entre una URL absoluta y una URL relativa mirando solo la parte de ruta de la URL. Si la parte de ruta de la URL comienza con el carácter «/», el navegador buscará ese recurso desde la raíz superior del servidor, sin referencia al contexto dado por el documento actual.

Veamos algunos ejemplos para aclarar esto.

1. Ejemplos de URL absolutas

URL Completa (la misma que usamos antes)

http://www.tupacbruch.com/blog/seo/seo#que_es_el_seo

Protocolo implícito

//www.tupacbruch.com/blog/seo/seo#que_es_el_seo

En este caso, el navegador llamará a esa URL con el mismo protocolo que el utilizado para cargar el documento que aloja esa URL.

Nombre de dominio implícito

/blog/seo/seo#que_es_el_seo

Este es el caso de uso más común para una URL absoluta dentro de un documento HTML. El navegador utilizará el mismo protocolo y el mismo nombre de dominio que el utilizado para cargar el documento que aloja esa URL. Nota: no es posible omitir el nombre de dominio sin omitir también el protocolo.

2. Ejemplos de URL relativas

Para comprender mejor los siguientes ejemplos, supongamos que las URL se invocan desde el documento ubicado en la siguiente URL: http://www.tupacbruch.com/blog/seo/

/tema4/seo_en_urls

Debido a que la URL no se inicia con /, el navegador intentará encontrar el documento en un subdirectorio del que contiene el recurso actual. Entonces, en este ejemplo, realmente queremos llegar a esta URL: http://www.tupacbruch.com/blog/seo/tema4/seo_en_urls

Volviendo en el árbol de directorios

../CSS/display

En este caso, usamos el ../ convención de escritura, heredada del mundo del sistema de archivos UNIX, para decirle al navegador que queremos subir desde un directorio.

Aquí queremos llegar a esta URL: https://tupacbruch.com/admin/docs/../CSS/display, que se puede simplificar a: https://tupacbruch.com/admin/docs/CSS/display

URL semánticas

A pesar de su sabor muy técnico, las URL representan un punto de entrada legible para un sitio web. Este tipo de URL es la más importante a nivel SEO.

Se pueden memorizar y cualquiera puede ingresarlos en la barra de direcciones de un navegador.

Pensemos siempre que las personas están en el centro de la Web, por lo que se considera una buena práctica construir lo que se llama URL semánticas. Las URL semánticas usan palabras con un significado inherente que cualquier persona puede entender, independientemente de sus conocimientos técnicos.

La semántica lingüística es, por supuesto, irrelevante para las computadoras. Probablemente has visto URL que parecen mashups de caracteres aleatorios. Pero hay muchas ventajas en la creación de URL legibles por humanos:

• Es más fácil para ti manipularlos.
• Aclara las cosas para los usuarios en términos de dónde están, qué están haciendo, qué están leyendo o interactuando en la Web.
• Algunos motores de búsqueda pueden usar esa semántica para mejorar la clasificación de las páginas asociadas.