How to implement friendly URLs without breaking images, CSS and JavaScript?

Question

The links on my site are displayed as follows:

blog.php?id=Blizzard

How can I convert them as follows?

blog/Blizzard

Using .htaccess or PHP?

---

I used the following directive in .htaccess:

RewriteRule ^blog/(.*)$ ./blog.php?id=$1

But the images, CSS and JavaScript are destroyed!?

Answer 1

But the images , css and javascript codes are destroyed

Probably because you are using relative URLs to your static resources. If you are referencing an image as img/myimage.jpg then the browser is now going to look for /blog/img/myimage.jpg, not /img/myimage.jpg as before (using your example).

You need to use root-relative URLs (starting with a slash) or absolute URLs (scheme + hostname) to be able to access the resource from different URL-path depths. You can sometimes work around the issue with a base element in the head section, however, there are caveats with this approach.

See my answer to the following question on the Webmasters stack that goes into great detail on this exact issue: .htaccess rewrite URL leads to missing CSS

---

RewriteRule ^blog/(.*)$ ./blog.php?id=$1

You should remove the ./ prefix on the RewriteRule substitution. The dot (to indicate the "current directory") serves no purpose here in the URL-path (it gets resolved away).

You should also include the L flag, if you later add other rules.

You also need to ensure that MutliViews is disabled, otherwise, blog.php will be "magically" called without the id attribute and your script will fail. (MultiViews basically enables extensionless URLs but can cause additional issues.) See https://httpd.apache.org/docs/2.4/content-negotiation.html

Optionally, if you are changing a URL structure, you can also redirect URLs of the form /blog.php?id=<value> to /blog/<value> in order to preserve SEO and redirect bookmarked links. (But note that you should already be linking to URLs of the form /blog/<value> throughout.)

For example

# Disable MultiViews
Options -MuliViews

# Redirect "/blog.php?id=<value>" to "/blog/<value>"
RewriteCond %{ENV:REDIRECT_STATUS} ^$
RewriteCond %{QUERY_STRING} ^id=([^&]*)
RewriteRule ^blog\.php$ /blog/%1 [QSD,R=301,L]

# Rewrite "blog/<value>" to "/blog.php?id=<value>"
RewriteRule ^blog/(.*) blog.php?id=$1 [QSA,L]

Additional notes on the above directives:

• The check against the REDIRECT_STATUS environment variable ensures that only direct requests are redirected and not rewritten requests by the rewrite that follows.
• The QSD flag discards the original query string from the request.
• The QSA flag appends (merges) any query string that might be on the original request with the query string being assigned in the substitution. If you are not expecting any query string then remove this flag. eg. A request for /blog/Blizzard?foo=1 would be internally rewritten to /blog.php?id=Blizzard&foo=1 only if the QSA flag is present.