網頁

2013年3月13日 星期三

ASP.NET MVC - LowercaseRoutesMVC 讓網站的 URL 輸出為小寫

在 SEO 對於 URL 的討論中,有部分的人是覺得網頁的 URL 大小寫對於 PageRank 是有影響,而有些人是說對於非使用 IIS 網頁伺服器的網站其 URL 的大小寫才會有影響,對於我來說,其實有關於 URL 大小寫與 SEO 的關係對於我來說並不是那麼清楚,但為何又要介紹這個套件呢?

其實我們開發 ASP.NET MVC 網站很少會注意到 URL 大小寫,多半我們都是在注意網頁執行的正確以及使用者是否輸入正確的 URL,但如果今天被客戶要求需要將網站內所產出的 URL 都一律使用小寫時,那麼 LowercaseRoutesMVC 這個套件就派上用場了,這邊就來介紹這一個套件。


LowercaseRoutesMVC - Map ASP.NET MVC routes to lowercase URLs

http://lowercaseroutesmvc.codeplex.com/

image

NuGet - LowercaseRoutesMVC

http://nuget.org/packages/LowercaseRoutesMVC

image

 

一般我們在 ASP.NET MVC 所開發的網站裡所產出的 URL 都會是以下的樣子,

http://test.com/Home/Index or http://test.com/Order/List

如果是讓使用者自行輸入 URL 的話,一般來說並不會在輸入時去區分大小寫,以上 URL 就會輸入以下,

http://test.com/home/index or http://test.com/order/list

前面有說到,假如要將網站產出的 URL 都轉為小寫的這樣需求時,就是在 ASP.NET MVC 專案中藉由 NuGet 將 LowercaseRoutesMVC 安裝到專案裡使用就可以了,以下為安裝以及使用的步驟,

 

Step.1 從 NuGet 安裝 LowsercaseRoutesMVC

先準備好一個 ASP.NET MVC 網站專案,建立好 Model, Controller, View,

image

P.S 這個示範用的 ASP.NET MVC 專案為 ASP.NET MVC 4.

預設的狀況下,URL 都是以 Camel-cased 的方式呈現,就是我們 Controller 的 prefix 與 Action 名稱是怎麼輸入的,然後再以 Route 設定來做輸出,

image

image

image

 

Step.2 透過 NuGet 安裝 LowercaseRoutesMVC

在 NuGet 管理視窗中搜尋「LowercaseRoutesMVC」,會出現兩個結果,我們這邊需要安裝的是第一個,而第二個「LowercaseRoutesMVC4」則是提供給 ASP.NET Web API HTTP routes 所使用,

SNAGHTML1995cc3a

image

 

Step.3 修改 RouteConfig.cs 的 Route 設定

接著是修改 RouteConfig.cs 的 Route 設定,原本是使用 routes.MapRoute() 來進行 route 設定,而在安裝 LowercaseRoutesMVC 之後,這邊就需要做修改,以下為原本 RouteConfig.cs 的內容,

image

將原本使用 MapRoute() 方法改為使用 MapRouteLowercase() 方法,記得前面要引用 LowercasrRoutesMVC 的 Namespace,

image

上面的設定修改完成後,重新建置專案,再一次執行網站,觀察 HTML 原始碼就可以看到原本為 Camel-cased 的 URL 已經是以 lower-cased 產出,

image

image

 

※ Area 的修改

我在原本的網站專案中新增一個 Area「Test」,

image

在尚未做任何的設定修改前,我在 Home/Index 首頁增加一個指向 Test/Product/List 的連結,而產出的 URL 結果如下,

image

image

而 Test/Product/List 網頁的 URL 並沒有轉為 lower-cased,這是因為 Area 的 Route 設定並需要在 AreaRegistration 中做設定修改,以下是尚未做任何設定修改的 TestAreaRegistration.cs,

image

這邊的修改就如同在 RouteConfig.cs 的修改是一樣的,如下,

image

修改並重新建置專案,重新執行網站,原本首頁指向 Test 區域的 URL 已經轉為 lower-cased,

image

進入到 Test 區域內的 Product/List 網頁,也可以看到網頁的 URL 也是以 lower-cased 呈現,

image

至於 ASP.NET Web API 的重新設定 HTTP Routes,這就直接看 LowercaseRoutesMVC - CodePlex 首頁的說明。

 


雖然說這種指定網站內所有 URL 都要使用 lower-cased 呈現的需求是比較少,但假如有碰到這樣的需求時,LowercaseRoutesMVC 這個套件就可以派上用場,而且在設定上也不會很繁瑣(如果不寫程式的話,是需要到 IIS 去修改 Url Rewrite rule 的設定)。

 

相關連結:

MSDN ASP.NET MVC Forum - How can we convert url to the lower caes in routing in MVC

MSDN - RouteCollection.LowercaseUrls 屬性

stackoverflow - .NET 4.5 MVC RouteCollection.LowercaseUrls breaks when using Area

Solving Duplicate Content with Distinct URLs Issue in ASP.NET MVC - Imran Baloch's Blog

 

以上

沒有留言:

張貼留言