URL absolutas versus relativas
Me gustaría saber las diferencias entre estos dos tipos de URL: URL relativas (para imágenes, archivos CSS, archivos JavaScript, etc.) y URL absolutas.
Además, ¿cuál es mejor usar?
¿Debo utilizar URL absolutas o relativas?
Si por URL absolutas te refieres a URL que incluyen el esquema (por ejemplo, HTTP/HTTPS) y el nombre de host (por ejemplo yourdomain.example), nunca hagas eso (para recursos locales) porque será terrible de mantener y depurar.
Digamos que ha utilizado una URL absoluta en todas partes de su código, como <img src="http://yourdomain.example/images/example.png">. Ahora, ¿qué pasará cuando vayas a:
- cambiar a otro esquema (por ejemplo, HTTP -> HTTPS)
- cambiar nombres de dominio (
test.yourdomain.example->yourdomain.example)
En el primer ejemplo, lo que sucederá es que recibirá advertencias sobre la solicitud de contenido inseguro en la página. Porque todas sus URL están codificadas para usar http(://yourdomain.example/images/example.png). Y cuando ejecuta sus páginas a través de HTTPS, el navegador espera que todos los recursos se carguen a través de HTTPS para evitar la fuga de información.
En el segundo ejemplo, al poner su sitio en funcionamiento desde el entorno de prueba, significaría que todos los recursos seguirán apuntando a su dominio de prueba en lugar de a su dominio activo.
Entonces, para responder a su pregunta sobre si usar URL absolutas o relativas: use siempre URL relativas (para recursos locales).
¿Cuáles son las diferencias entre las diferentes URL?
Primero echemos un vistazo a los diferentes tipos de URL que podemos usar:
http://yourdomain.example/images/example.png//yourdomain.example/images/example.png/images/example.pngimages/example.png
¿A qué recursos intentan acceder estas URL en el servidor?
En los ejemplos siguientes, asumo que el sitio web se ejecuta desde la siguiente ubicación en el servidor /var/www/mywebsite.
http://yourdomain.example/images/example.png
La URL (absoluta) anterior intenta acceder al recurso /var/www/website/images/example.png. Este tipo de URL es algo que siempre querrás evitar al solicitar recursos de tu propio sitio web por el motivo descrito anteriormente. Sin embargo tiene su lugar. Por ejemplo, si tiene un sitio web http://yourdomain.exampley desea solicitar un recurso de un dominio externo a través de HTTPS, debe utilizar esto. P.ej, https://externalsite.example/path/to/image.png.
//yourdomain.example/images/example.png
Esta URL es relativa según el esquema actual utilizado y casi siempre debe usarse al incluir recursos externos (imágenes, archivos JavaScript, etc.).
Este tipo de URL utiliza el esquema actual de la página en la que se encuentra. Esto significa que estás en la página http://yourdomain.exampley en esa página hay una etiqueta de imagen <img src="//yourdomain.example/images/example.png">, la URL de la imagen se resolvería en http://yourdomain.example/images/example.png. Cuando hubiera estado en la página http s ://sudominio.ejemplo y en esa página hay una etiqueta de imagen, <img src="//yourdomain.example/images/example.png">la URL de la imagen se resolvería en https://yourdomain.example/images/example.png.
Esto evita cargar recursos a través de HTTPS cuando no es necesario y garantiza automáticamente que el recurso se solicite a través de HTTPS cuando sea necesario .
La URL anterior se resuelve de la misma manera en el lado del servidor que la URL anterior:
La URL (absoluta) anterior intenta acceder al recurso
/var/www/website/images/example.png.
/images/example.png
Para los recursos locales, esta es la forma preferida de hacer referencia a ellos. Esta es una URL relativa basada en la raíz del documento ( /var/www/mywebsite) de su sitio web. <img src="/images/example.png">Esto significa que cuando lo tenga, siempre se resolverá en /var/www/mywebsite/images/example.png.
Si en algún momento decides cambiar de dominio seguirá funcionando porque es relativo.
images/example.png
Esta también es una URL relativa aunque un poco diferente a la anterior. Esta URL es relativa a la ruta actual. Lo que esto significa es que se resolverá en diferentes rutas dependiendo de dónde se encuentre en el sitio.
Por ejemplo, cuando estás en la página http://yourdomain.exampley la usas, <img src="images/example.png">se resolverá en el servidor como /var/www/mywebsite/images/example.pngse esperaba; sin embargo, cuando estás en la página http://yourdomain.example/some/pathy usas exactamente la misma etiqueta de imagen, de repente se resolverá como /var/www/mywebsite/some/path/images/example.png.
¿Cuándo debo usar qué?
Al solicitar recursos externos, lo más probable es que desee utilizar una URL relativa al esquema (a menos que desee forzar un esquema diferente) y cuando trabaje con recursos locales desee utilizar URL relativas basadas en la raíz del documento.
Un documento de ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link href='//fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700' rel='stylesheet' type='text/css'>
<link href="/style/style.css" rel="stylesheet" type="text/css" media="screen"></style>
</head>
<body>
<img src="/images/some/localimage.png" alt="">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
</body>
</html>
Algunos (tipos de) duplicados
- Manera segura de escribir URL que se transfieran entre entornos
- ¿Cuál es la forma correcta de vincular una imagen en un sitio web?
En general, se considera una mejor práctica utilizar URL relativas, de modo que su sitio web no esté vinculado a la URL base donde está implementado actualmente. Por ejemplo, podrá funcionar en localhost, así como en su dominio público, sin modificaciones.
Consulte URI de ejemplo (Wikipedia).
foo://username:[email protected]:8042/over/there/index.dtb;type=animal?name=ferret#nose
\ / \________________/\_________/ \__/ \___/ \_/ \_________/ \_________/ \__/
| | | | | | | | |
| userinfo hostname port | | parameter query fragment
| \_______________________________/ \_____________|____|____________/
scheme | | | |
| authority |path|
| | |
| path interpretable as filename
| ___________|____________ |
/ \ / \ |
urn:example:animal:ferret:nose interpretable as extension
Una URL absoluta incluye las partes antes de la parte "ruta"; en otras palabras, incluye el esquema ( httpin http://foo/bar/baz) y el nombre de host ( fooin http://foo/bar/baz) (y opcionalmente puerto, información de usuario y puerto).
Las URL relativas comienzan con una ruta.
Las URL absolutas son, bueno, absolutas: la ubicación del recurso se puede resolver mirando sólo la propia URL. Una URL relativa está, en cierto sentido, incompleta: para resolverla, necesita el esquema y el nombre de host, y estos normalmente se toman del contexto actual. Por ejemplo, en una página web en
http://myhost/mypath/myresource1.html
podrías poner un enlace así
<a href="pages/page1">click me</a>
En el hrefatributo del enlace se utiliza una URL relativa, y si se hace clic en él, hay que resolverlo para poder seguirlo. En este caso, el contexto actual es
http://myhost/mypath/myresource1.html
por lo que el esquema, el nombre de host y la ruta principal de estos se toman y se anteponen a pages/page1, lo que produce
http://myhost/mypath/pages/page1
Si el enlace hubiera sido:
<a href="/pages/page1">click me</a>
(tenga en cuenta que /aparece al inicio de la URL), entonces se habría resuelto como
http://myhost/pages/page1
porque el interlineado /indica la raíz del host.
En una aplicación web, recomendaría utilizar URL relativas para todos los recursos que pertenecen a su aplicación. De esa forma, si cambias la ubicación de las páginas, todo seguirá funcionando. Cualquier recurso externo (pueden ser páginas completamente fuera de su aplicación, pero también contenido estático que entrega a través de una red de entrega de contenido) siempre debe apuntar mediante URL absolutas: si no lo hace, simplemente no hay manera de ubicarlos, porque residir en un servidor diferente.
Supongamos que estamos creando un subsitio cuyos archivos están en la carpeta http://site.ru/shop .
1. URL absoluta
Link to home page
href="http://sites.ru/shop/"
Link to the product page
href="http://sites.ru/shop/t-shirts/t-shirt-life-is-good/"
2. URL relativa
Link from home page to product page
href="t-shirts/t-shirt-life-is-good/"
Link from product page to home page
href="../../"
Aunque la URL relativa parece más corta que la absoluta, las URL absolutas son más preferibles, ya que un enlace se puede utilizar sin cambios en cualquier página del sitio.
Casos intermedios
Hemos considerado dos casos extremos: URL "absolutamente" absolutas y "absolutamente" relativas. Pero todo es relativo en este mundo. Esto también se aplica a las URL. Cada vez que diga sobre URL absoluta, siempre debe especificar en relación con qué.
3. URL relativa al protocolo
Link to home page
href="//sites.ru/shop/"
Link to product page
href="//sites.ru/shop/t-shirts/t-shirt-life-is-good/"
Google recomienda dicha URL. Ahora, sin embargo, generalmente se considera que http:// y https:// son sitios diferentes.
4. URL relativa a la raíz
Es decir, relativo a la carpeta raíz del dominio.
Link to home page
href="/shop/"
Link to product page
href="/shop/t-shirts/t-shirt-life-is-good/"
Es una buena opción si todas las páginas están dentro del mismo dominio. Cuando mueve su sitio a otro dominio, no tiene que realizar reemplazos masivos del nombre de dominio en las URL.
5. URL relativa a la base (relativa a la página de inicio)
La etiqueta <base> especifica la URL base, que se agrega automáticamente a todos los enlaces y anclajes relativos. La etiqueta base no afecta los enlaces absolutos. Como URL base especificaremos la página de inicio: <base href="http://sites.ru/shop/">.
Link to home page
href=""
Link to product page
href="t-shirts/t-shirt-life-is-good/"
Ahora puede mover su sitio no sólo a cualquier dominio, sino también a cualquier subcarpeta. Solo tenga en cuenta que, aunque las URL parecen relativas, en realidad son absolutas. Preste especial atención a las anclas. Para navegar dentro de la página actual tenemos que escribir href="t-shirts/t-shirt-life-is-good/#comments" y no href="#comments". Este último aparecerá en pagina de inicio.
Conclusión
Para enlaces internos utilizo URL relativas a la base (5). Para enlaces externos y boletines utilizo URL absolutas (1).
