'Pretty URLs' how to

[xProteuSx]

I don't even know what to type into Google, but I am looking to create something along the lines of the 'Pretty URL' type scripts that change the URL for pages on a site.

 

For example, if I have a page with the following information:

 

URL:  www.mysite.com/somepage.html

Page Title: this page is awesome

 

Then I need the page to generate this URL:

 

www.mysite.com/this-page-is-awesome/

 

which would bring up the content from the original URL.

 

Any ideas or pointers?  Thanks in advance.

[DaveyK]

You need to work with either JS scripts, but its easily done by using a .htaccess file.

 

This video may help, its a vanity url tutorial by alex from phpacademy.

 

Edited March 27, 2013 by DaveyK

[haku]

I wouldn't necessarily call it easy. And it doesn't require any javascript. It does require Apache mod_rewrite module (or an equivalent module on whatever server type you are using).

 

Drupal uses the pattern example.com/index.php?q=path/to/some/page which is re-written as example.com/path/to/some/page using the following in the .htacess file:

 

 

  RewriteEngine on

  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !=/favicon.ico
  RewriteRule ^ index.php [L]

[DaveyK]

Im just saying its possible in JS, and its not necessarily hard at all. To explain:

 

<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
</IfModule>
 
RewriteCond %{REQUEST_FILENAME} !-f // if the URL exists as a file
RewriteCond %{REQUEST_FILENAME} !-d // or if the ULR exists as a directory 
RewriteRule ^(.*)$ index.php?q=$1 [QSA,L] // reroute to index.php?q=

The url like sitename.com/some-url

will be sitename.com/index.php?q=some-url

 

As you can see, its pretty basic.

 

EDIT: Typo

Edited March 27, 2013 by DaveyK

[haku]

I guess we have a different perspective on what's basic and what's not. But either way, there we have some solutions.

 

I'm confused by your use of JS though - I thought you meant JavaScript, but there is no JavaScript there.

[Joshua F]

Im just saying its possible in JS, and its not necessarily hard at all.

 

I'm failing to understand how you can do SEO friendly urls with javascript.

[DaveyK]

I am not a JS developer, but I know one who does this with backbone.js without .htaccess (only the first page load uses .htacess). Just accept that it is somehow possible.

Edited March 27, 2013 by DaveyK

[haku]

I believe that's a little different. It's possible to change the URL in the browser using javascript, but if the page doesn't exist as a non-javascript solution as well, then it will fail if the user tries to access said URL. In such a case, a backend is still required with URL re-writing.(I'm a JS developer).

[DaveyK]

As I said, I am not and Im just judging from what I see. And what I see is a URL change, that URL being a "pretty url" and everything just works. I wouldnt know how, but to the users its the same as an .htaccess solution. But as I mentioned, it still requires .htaccess on page load, but thats. But yeah, you need to have JS enabled otherwise backbone.js wont work, obviously. But who doesnt have JS enabled these days?

 

REGARDLESS, thats how .htaccess would be set up.

[xProteuSx]

Thanks for the replies guys.  After I posted this I was able to find the same information on Google.  However, what I was not able to find was information on how to make 'vanity urls' using a page title.  This is key for me, as it is key for SEO.  Any other/more ideas?

[Joshua F]

"SEO Friendly URLs" will probably get you the best result form Google.

[DaveyK]

We already posted two working solution, what's wrong?

[xProteuSx]

DaveyK,

 

Yes, these solutions do work so there is nothing wrong, but I wanted to take it to the next level, which requires the solution to read the title meta tag for a page that has a php URL  (ie.  www.yoursite.com/dir/user?id=33243) and create a url like

 

www.yoursite.com/profile-page-for-username/  (assuming that meta description is 'Profile page for username')

[DaveyK]

cant you do that in PHP and just perform a redirect?

[xProteuSx]

Hi guys, and thanks for your replies.

 

I did not realize that you guys left some ideas here, and I re-posted this little mission of mine with some additional details here:

 

http://forums.phpfreaks.com/topic/284295-php-generated-title-custom-url/

 

Ironically, the link above is almost exactly what I am trying to do (they made the title of the post part of the URL).

 

What you guys have answered for me is great, but I guess I was not clear enough with the details as I am trying to use the page title (which is PHP generated from a MySQL database) to create the URL.

 

Please refer to the topic above for details, and thank you for your input and help.

[JonnoTheDev]

I think the issue here is some of the responses posted are a little direct in assuming they expect you to understand what they are talking about. When you use the term, 'Pretty URL' you are actually referring to, 'SEO Friendly URLs'. SEO is Search Engine Optimisation. So, URLs in this clean format are more friendly to search engines, like Google, as opposed to a URL that reads xyz.com?x=13&y=foobar. To use URLs like this you need to use a module on the web server calls Mod Rewrite. This allows a URL in a clean format (rewritten) to be translated to the non-clean format. To create the Mod Rewrite rules you need to put things into a .htaccess file in the document root of your website folder.

 

Now, where I think you are getting confused is how you implement rewritten URLs. You do not take the page title from a static html page and then redirect to a different URL. If you want the link to www.mysite.com/somepage.html to be www.mysite.com/this-page-is-awesome/ Then you would put the following in a .htaccess file:

 

 

RewriteEngine On
RewriteBase /
RewriteRule ^somepage.html /this-page-is-awesome [R=301,L]

 

Try it.

 

Now, If the data i.e. the page title, content, etc is coming from a MySQL database, lets say in a table called, 'articles'. You may have the following fields: article_id, title, body, slug. So, some example data may look like:

1 | This Page is Awesome | This is the page copy | this-page-is-awesome

2 | A Page About PHP | PHP is a great language | a-page-about-php

 

When we display this data we are going to use the file article.php. To get the correct article the page needs a parameter i.e article.php?param=xyz. This is where the slug field comes in. So when we want article 1 the url is article.php?slug=this-page-is-awesome

 

You may now be getting the idea of where we are going. The URL obviously isn't friendly. We want our URLs to contain just alphanumeric characters i.e

mysite.com/article/this-page-is-awesome

mysite.com/article/a-page-about-php

 

This is where we add the rewrite rules to our .htaccess file i.e

 

 

RewriteEngine On
RewriteBase /
# only a-z 0-9 and the - character can be in the slug
RewriteRule ^article/([a-z0-9-]+)$ article.php?slug=$1 [L]

 

Job done. All we have to do is change the links on our website to use the data in the slug field. i.e

 

 

<a href="/article/<?php print $row['slug']; ?>"><?php print $row['title']; ?></a>

 

Remember, the article.php file takes the parameter, 'slug' and uses it to get the article from the database. i.e

 

 

$mysqli = new mysqli("localhost", "my_user", "my_password", "my_database");
$mysqli->query("SELECT * FROM articles WHERE slug='" . $mysqli->real_escape_string($_GET['slug']); . "'");

[xProteuSx]

Thank you all for your replies.

 

@neil.johnson:  you are absolutely right -- I am looking to create 'SEO Friendly URLs'.  I didn't even know that that was what they were called, so I have kind of been looking but maybe for the wrong things.

 

Your explanation of it all is perfectly clear, and it has really opened my eyes quite a bit.  I completely understand what you are referring to, as I have tried it on my site and have had success with your example.  However, there is a slight twist to the data that I am pulling from the database to create this SEO Friendly URL, as I am pulling data from multiple fields end even a couple of different tables to create the 'slug'.

 

So as it stands the particular page of the site goes something like this:

 

http://www.mysite.com/product?id=12345

 

So obviously the slug is not in the URL.  The slug is actually created on the page using PHP and is displayed as the page title.

 

So maybe there is something that I am not understanding, or your example must be modified beyond my understanding, or both  

 

As it stands, here is the code which generates the title for the page, depending on the product id number:

 

<title><?php echo $name . ' p' . $pick . ': ' . $denomination . ' ' . stripslashes($currency) . ' from ' . $year;?></title>

 

Each of the variables used above is drawn from separate fields in the database and the variable $name is actually drawn from a separate table altogether.  So, the issue as I see it is that I am unable to produce a URL that contains the desired 'slug' without doing some sort of crazy re-direct.

 

The way I see it, the way to do this using your example is to do this:

 

- set the mod-rewrite as you have it

- go to page "http://www.mysite.com/product.html?id=12345"

- this page would then generate the slug based on the id number 12345 (ie.  http://www.mysite.com/info.html?slug=Azerbaijan-p18b-100-Manat-from-1993)

- it would re-direct you http://www.mysite.com/azerbaijan-p18-100-manat-from-1993

 

Is this right?  Is this the most efficient way to achieve this goal?  Ultimately the goal is to have SEO Friendly URLs, but based on a string created from several fields in the database.

 

Thank you in advance, and cheers.

[xProteuSx]

Duh ... now I have just understood something:

 

I need to change the URL's on the pages to something like:

 

http://www.mysite.com/slug=this-page-is-awesome-1 and

http://www.mysite.com/slug=this-page-is-awesome-2

 

etc. etc. then I can use the method above.  However, I have come across another related issue.  I still need to pass the product ID to the pages that we are going to, so that those pages can display the relevant content.

 

So if I have a page, product.html, it takes a variable "id" and uses that to display the relevant content.  The current URL is something like this:

 

http://www.mysite.com/product.html?id=12345

 

If I change the URL to http://www.mysite.com/slug=this-page-is-awesome-1 then the PHP gets confused because I do not have a value for "id".

 

Do I have to do this:

 

http://www.mysite.com/slug=this-page-is-awesome-1&id=12345

 

Or is there something different that I can do?

[xProteuSx]

And I have a couple more questions (THANK YOU FOR YOUR PATIENCE!!!)

 

When we use this code which you've provided above:

 

RewriteRule ^article/([a-z0-9-]+)$ article.php?slug=$1 [L]

 

What the heck does "$1 [L]" mean??

 

Also, can I change to regex to [A-Za-z0-9-] so that I can use caps and lower case??

[JonnoTheDev]

And I have a couple more questions (THANK YOU FOR YOUR PATIENCE!!!)

 

When we use this code which you've provided above:

 

RewriteRule ^article/([a-z0-9-]+)$ article.php?slug=$1 [L]

 

What the heck does "$1 [L]" mean??

 

Also, can I change to regex to [A-Za-z0-9-] so that I can use caps and lower case??

 

The [L] means it is the last rule that the web server should observe if it matches the URL pattern. You may have additional rules for other URLs, so it basically says, "don't bother reading any of the other rules if this one matches".

 

You can change the regex to whatever you like. I like to keep URLs consistent by making everything lowercase. You can download a program like Regexbuddy to make sure you get it correct http://www.regexbuddy.com/ It is a useful tool.

 

In terms of the slug in the URL you have 2 options IMO. You can either add another field to one of your database tables to store it and run a little program that will create it from the data you have and update your database. Or, use the query you are using to get the page title to create the slug for the links. You will obviously have to run it through a little function to make sure any non alphanumeric characters are stripped out, and any spaces are converted to hyphens (it has to match the rewrite rule). Then when a user clicks on the link you can run the same query & function on the landing page to make sure that the URL parameter matches. If it doesn't, redirect the user to a 404 page using the header() function.

 

In terms of using the database table primary key in the URL, this is a viable option. A URL such as: mysite.com/article/a-page-about-php/2 would require the following rewrite rule:

RewriteEngine On
RewriteBase /
# only a-z 0-9 and the - character can be in the slug
RewriteRule ^article/([a-z0-9-]+)/([0-9]+)$ article.php?slug=$1&article_id=$2 [L]

In this case we now have both $_GET['slug'] & $_GET['article_id'] available to us. We can use the article_id to quickly get the correct database record, run the slug creation function on the page title and compare it to the value of $_GET['slug']. If it matches all is good, if not, redirect to a 404 page.

Edited November 27, 2013 by neil.johnson