Maison >développement back-end >tutoriel php >Comment réparer les CSS, JavaScript et les images cassés après la mise en œuvre d'URL optimisées pour le référencement ?

Comment réparer les CSS, JavaScript et les images cassés après la mise en œuvre d'URL optimisées pour le référencement ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-27 22:23:11771parcourir

How to Fix Broken CSS, JavaScript, and Images After Implementing SEO-Friendly URLs?

Dépannage des CSS, JavaScript et images défectueux avec des URL optimisées pour le référencement

Lors de la mise en œuvre d'URL optimisées pour le référencement via des réécritures .htaccess, il est courant pour rencontrer des problèmes avec CSS, JavaScript et les images qui ne se chargent pas. Cela est dû au fait que l'URI de base de ces éléments a été modifié après la réécriture de l'URL.

Pour illustrer le problème, considérons la règle de réécriture suivante :

RewriteRule ^swift-details/([0-9]+)/([0-9a-zA-Z_-]+)$ swift-details.php?id= [NC,L]
RewriteRule ^swift-details/(css|js|img)/(.*)?$ // [L,QSA,R=301]

Cette règle achemine avec succès les requêtes vers le emplacement souhaité, mais les URI relatifs dans le HTML ne fonctionnent plus correctement. Par exemple, dans la structure URL d'origine, l'URI de base des éléments serait "/". Cependant, après la réécriture, la base devient "/swift/details/". Par conséquent, le navigateur tente d'ajouter cette base à toutes les URL relatives, ce qui entraîne des références brisées.

Pour résoudre ce problème, deux options sont disponibles :

  1. Utiliser Liens absolus : Modifiez le code HTML pour utiliser des URL absolues pour CSS, JavaScript et les images. Cette approche garantit que les références restent cohérentes quel que soit l'URI de base.
  2. Définissez la base de l'URI : Dans la section d'en-tête HTML, ajoutez la ligne suivante :
<base href="/" />

Cela définit l'URI de base sur "/" pour toutes les pages, garantissant que les URI relatifs sont correctement résolus par le navigateur, même après la réécriture de l'URL.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn