ASP.NET Friendly URLs – Cleaner, SEO friendly URLs

Search Engine optimization is one of the key factor for your site. If you spend millions of dollars on making your website looks good and bug free then also its possible that you will not get attention of search engine because of your URLs.  For example you’re having shopping cart created in asp.net and you have not optimized your URL then it will look like following.

www.foo.com ?Product.aspx?Category=1& Page=1

If you search engine read this URL then search engine will not know much about this URLs. Even normal people  who does not know querystring menaing(?Category=watch&Page=1) will not understand it. But If you have URL like following.

www.foo.com/prduct/category/watch/page/1

It’s easy to read and search engine and normal people will know that you are loading products that belongs to category watch and this is a first page.

ASP.NET And SEO Friendly URLs with ASP.NET Friendly URLs:

Earlier we have to write some code in global.asax to make your URLs  search engine friendly like this. But now with ASP.NET friendly URLs you can easily make your URLs SEO friendly.  You can download ASP.NET Friendly latest version from the following URL(right now its in prerelease).

http://aspnetfriendlyurls.codeplex.com/

If you are using NuGet then there is a NuGet package. You can download from following link.

https://nuget.org/packages/Microsoft.AspNet.FriendlyUrls

Or you can directly run following command from your package manager console.

Features:

As per codeplex site.It’s support following features.

• support for easily enabling friendly, extensionless URLs for Web Forms pages, e.g. ~/Customers -> ~/Customers.aspx
• helper methods to easily extract extra segments from the friendly URL, e.g. ~/Customers/1 -> "1"
• helper methods to easily construct friendly URLs, e.g. FriendlyUrl.Href("~/Customers", 1) -> ~/Customers/1
• auto-redirect to friendly URLs, e.g. ~/Customers.aspx -> ~/Customers
• resolving to mobile views when browser is a mobile device, e.g. ~/Customers -> ~/Customers.Mobile.aspx
• automatically setting mobile Master Page when browser is a mobile device, e.g. ~/Customers -> ~/Customers.aspx using Site.Mobile.Master
• static & dynamic caching options for URL resolution

Example:

Let’s take example and see how its works. First crate an asp.net application and then install the Nuget package for asp.net friendly URLs .



Once you install package package add following files to the application.

1. Reference to Microsoft.AspNet.FriendlyUrls assembly – It will contains all the classes required for asp.net friendly URLs
2. Site.Mobile.Master- Master page for mobile device and mobile browsers.
3. ViewSwitcher.ascx – A user control that can be used to switch views from desktop view to Mobile view and vice versa

Now when you Url application it will look like following.



When you see the code you can see following code in RouteConfig class.

using System.Web.Routing;
using Microsoft.AspNet.FriendlyUrls;

namespace WebApplication5
{
    public static class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes) {
            routes.EnableFriendlyUrls();
        }
    }
}

Here you can see routes.EnableFriendlyUrls does all the magic.

Hyperlinks with asp.net friendly URLs:

Once you install the package you can see hyperlink can also be putted over simple manners.

<nav>
    <ul id="menu">
        <li><a runat="server" href="~/">Home</a></li>
        <li><a runat="server" href="~/About">About</a></li>
        <li><a runat="server" href="~/Contact">Contact</a></li>
    </ul>
</nav>

Even you can use page segments. You can find more details about page segments in Scott Hanselman’s post

<a href="<%: FriendlyUrl.Href("~/Category","Watch") %>">Watch</a>

And your URL will be like following.

http://localhost:56520/Category/Watch

Mobile Routes:

Once you install NuGet package you can also find the ViewSwitcher.ascx so when you visit the this site from mobile. It will look good in mobile also there will be a link presented for switching to dekstop view. Same when you are in desktop view a link will be there for switching to mobile view

Note: If you are already installed ASP.NET and Web Tools 2012.2 Release Candidate installed on your machine You don’t have to install NuGet package for this. It will be automatically installed by default.

That’s it. Hope you like it. Stay tuned for more..