ASP .NET MVC SEO link oluşturma

Merhaba,
Bu yazımızda MVC projelerinde nasıl seo (arama motoru dostu linkler) bağlantı oluşturacağımızı anlatmaya çalışacağım. Bu oluşturduğumuz web sitelerinin google, bing, yandex gibi arama motorlarında aranabilir olması için önemli bir konu. Örneğin bir film sitemiz olduğunu düşünelim.

Sitemizde film bağlantılarının .../FilmDetay/5 şeklinde olması yerine .../FilmDetay/demir-adam-3 şeklinde olması hem sitemizin arama motarları tarafından kolayca taranıp bulunabilmesini sağlar hem de iyi bir kullanıcı deneyimi oluşturur.

Okurken ne dinlemeli ?

Çok basit ve sade bir şekilde seo url oluşturmaya çalışalım.İlk olarak bir MVC projesi oluşturalım.

Projede zaten var olan bootstrap.css ve bootstrap.js front-end framework'ünü sitemizi biçimlendirmek için kullanacağız. Diğer css ve js 'leri dilerseniz silebilirsiniz. Senaryomuz şöyle ilerleyecek bir film listesi sayfamız olacak bu Index.cshtml ve buradan film detaylarına gittiğimiz Detail sayfamız olacak.
İlk olarak Film class'ını oluşturarak başlayalım.

    public class Films

    {

        public int Id { get; set; }

        public string Title { get; set; }

    }

Index sayfamızın aşağıdaki gibi html 'ini oluşturalım.

@model List<SeoFriendly.Models.Films>

@{

    ViewBag.Title = "Home Page";

}

<div class="row">

    <table style="border-collapse:separate;border-spacing: 2px 5px" width="100%">

        @foreach (var item2 in Model)

        {

            <tr>

                <td width="13%">

                    <a class="pull-left" href='@Url.FilmSeoLink(item2)'>

                        <img class="media-object" src="http://placehold.it/400x200/" alt="">

                    </a>

                </td>

                <td width="72%"><p>@item2.Title</p></td>

                <td width="5%"></td>

            </tr>

        }

    </table>

</div>

Ve controller tarafında bir örnek film listesi oluşturup view'e bind etmeye çalışalım.

        [Route("~/")]

        [Route("Home")]

        public ActionResult Index()

        {

            List<Films> filmlist = new List<Films>();

            filmlist = GetFilms();

            return View(filmlist);

        }

        public List<Films> GetFilms()

        {

            List<Films> filmlist = new List<Films>();

            filmlist.Add(new Films { Id = 1, Title = "Iron Man 3" });

            filmlist.Add(new Films { Id = 2, Title = "Batman Begins" });

            filmlist.Add(new Films { Id = 3, Title = "Superman vs Batman Dawn of Justice" });

            filmlist.Add(new Films { Id = 4, Title = "Amazing Spiderman" });

            return filmlist;

        } 

Dikkat etmemiz gereken noktalardan ilki Route attribute'u yani contoller'e ismi ile değil (Index) Route özelliğinin içine yazdığımız (Home) dilediğimiz isim ile erişebilecek olmamız. İlerleyen kısımda oluşturacağımız film detay sayfası içinde Route "Detail" ismini kullanacağız. Tabii ki  .Net MVC projelerimizde Route özelliği default olarak gelmiyor. Biz  App_Start klasörü altındaki RouteConfig.cs sınıfında aşağıdaki kodu ekleyerek bu özelliği aktive etmiş oluyoruz.

routes.MapMvcAttributeRoutes();

public static void RegisterRoutes(RouteCollection routes)

        {

            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapMvcAttributeRoutes();

            routes.MapRoute(

                name: "Default",

                url: "{controller}/{action}/{id}",

                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

            );

        } 

Diğer dikkat etmemiz gereken nokta ise  href='@Url.FilmSeoLink(item2)' peki bu nasıl olacak? a html elementinin linkini MVC'nin URL sınıfını override ederek özelleştirmiş oluyoruz. Bunun için aşağıdaki sınıfı ve metodları oluşturuyoruz. Aslında seo url 'leri üreten sınıf da bu sınıf olmuş olacak.

    public static class SeoFriendlyLink

    {

        public static string FilmSeoLink(this UrlHelper urlHelper, Films entity)

        {

            string title = entity.Title;

            title = FriendlyURLTitle(title);

            return string.Format("/Detail/{0}/{1}", entity.Id.ToString(), title);

        }

        public static string FriendlyURLTitle(string pTitle)

        {

            pTitle = pTitle.Replace(" ", "-");

            pTitle = pTitle.Replace(".", "-");

            pTitle = pTitle.Replace("ı", "i");

            pTitle = pTitle.Replace("İ", "I");

            pTitle = String.Join("", pTitle.Normalize(NormalizationForm.FormD) // türkçe karakterleri ingilizceye çevir.

                    .Where(c => char.GetUnicodeCategory(c) != UnicodeCategory.NonSpacingMark));

            pTitle = HttpUtility.UrlEncode(pTitle);

            return System.Text.RegularExpressions.Regex.Replace(pTitle, @"\%[0-9A-Fa-f]{2}", "");

        }

    }

Aslında FilmSeoLink metodumuz ile film item 'ini alarak başlığından dilediğimiz standartta bir bağlantı oluşturuyoruz. Bu metodda dikkat etmemiz gereken nokta ise FrinedlyURLTitle metodu çünkü browserler url isteği yaparken özel karakterleri boşluk , . gibi veya türkçe karakterleri(ç,ş) kabul etmiyor ve istek yapılırken hata oluyor. İşte bu method başlığı ingilizceleştiriyor ve özel karakterleri url(bağlantı)'den siliyor.

Örneğin FilmDetay/pi'nin yaşamı  gibi bir bağlantı geçersiz olacağında bunu FilmDetay/pinin_yasami haline getiriyor.

Şimdi detay sayfamızın önce View sonra da Contoller'ını oluşturalım.

@model SeoFriendly.Models.Films

@{

    ViewBag.Title = "Detail";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<div class="row">

    <div class="col-lg-12">

        <h1 class="page-header">

           @Model.Title

        </h1>

        <img class="img-responsive" style="padding: 20px 0px;" src="http://placehold.it/700x400/" alt="">

        <p>Film info created by SeoFriendly</p>

    </div>

</div>

Contoller: 

        [Route("Detail/{Film_Id}/{seo_text}")]

        public ActionResult Detail(int Film_Id,string seo_text)

        {

           Films film = new Films();

            film = GetFilms().Where(x => x.Id == Film_Id).FirstOrDefault();

            if (SeoFriendlyLink.FriendlyURLTitle(film.Title) != seo_text)

            {

                return HttpNotFound();

            }

            return View(film);

        }

     Detail Controller'ın Route'ını oluştururken FimSeoLink metodunda oluşturduğumuz standartın aynısı olmasına dikkat edelim  ve de Detail ActionController'ın parametre isimlerinin Route'deki ile aynı olmasını sağlayalım.

    Detay sayfasının işleyişinde fark ettiğiniz üzere filmi Id'sinden buluyoruz ve bu ID'yi de bağlantıda içeriyoruz. Eğer basit düşünüp Id yeterli diyip  seo url bağlantı linki ile sistemde kayıtlı olan (id 'den bulunan) filmin başlığı ile karşılaştırma yapmazsanız güç durumlar yaşayabilirsiniz.

 if (SeoFriendlyLink.FriendlyURLTitle(film.Title) != seo_text)

    Yapmazsanız  insanlar bağlantı başlığını değiştirip Id' yi değiştirmese bile aynı sayfayı görürler. Bu bir sorun mu ? Değil ama kötüye kullananlar olabilir.   

Örneğin :  FilmDetay/5/DemirAdam-3  linkini sadece Id =5 'i kontrol edersek aşağıdaki şu link de çalışır, aynı sayfaya gider.

FilDetay/5/DemirAdamvsBatman_filmi_vizyonda

İşte bunu önlemek için DemirAdamvsBatman_filmi_vizyonda titlesi ile Id'sı 5 olan filmin title'sini karşılaştırmak faydalı olacaktır.

Şimdi projemizi derleyip çalıştıralım.

Herhangi bir filmin detayına tıklayalım.

Okuduğunuz için, teşekkürler, tam projeyi buradan indirip inceleyebilirsiniz.

Sağlıkla kalın, huzurlu olun :)