Live URL different from web address

I have an Article (and ArticleSection) page type. The url pattern for this page type is /{%DocumentCulture%}/Articles/Detail/{%NodeGUID%}/{%NodeAlias%}.

The live url look as follows: http://localhost/Kentico12_MedioClinic/en-US/Articles/Detail/3f85d308-38ec-4a99-94e5-6f206306e428/Healthy-Foods

However when I'm on the page the url is: http://localhost/kentico12_medioclinic/en-us/articles/detail?nodeGuid=3f85d308-38ec-4a99-94e5-6f206306e428&nodeAlias=Healthy-Foods

This is causing a whole host of problems which include when I click live site in the back-end it directs me to the 404 page instead of the article. When I search for articles and I click on one it takes me to the 404 page (as the page url is using the live site pattern instead of the query pattern).

My route looks as follows.

// Maps route to article detail
route = routes.MapRoute(
    name: "ArticleWithAlias",
    url: "{culture}/Articles/Detail/{nodeGuid}/{nodeAlias}",
    defaults: new { action = "Detail", controller = "Articles", culture = defaultCulture.Name, nodeGuid = string.Empty, nodeAlias = "" },
    constraints: new { culture = new SiteCultureConstraint(AppConfig.Sitename), nodeGuid = new GuidRouteConstraint(), nodeAlias = new OptionalRouteConstraint(new AlphaRouteConstraint()) }
);

I'm not understanding why the page url is coming up using a query instead of a path. If there's other code I should post let me know. I didn't want to post more in case it wasn't needed.