.Net Core Mvc’de Bir Haber Başlığını Url’e Koyma

Selamlar,

Bu makalede, Mvc routing kullanarak seo açısından önemli olan bir haber detay sayfasında title’ın, url satırında gözükmesini inceleyeceğiz. Türkçe karakterlerden oluşan başlıklar ve haber detay resimleri için, dikkat edilmesi gereken noktaları hep beraber tartışacağız.

Öncelikle gelin hep beraber .Net Core’da, CoderNews adında bir Mvc application’ı aşağıdaki komut ile oluşturalım.

Şimdi gelin Örnek bir Url Satırını aşağıdaki gibi tartışalım: 1. kısım domain adı “borakasmer.com” 2. kısım haber başlığı “black-mirror-4-sezon-basladi” 3. ve son kısım “40694204” Haber ID.

“http://wwwborakasmer.com/black-mirror-4-sezon-basladi/40694204”

News.cs: Haberler adındanki data model aşağıdaki gibi oluşturulur.

News : Mvc sayfaya gelicek olan Haberler, aşağıda görüldüğü gibi static olarak tanımlanan “List<News> model“, “NewsController” sınıfının constructor’ında sadece 1. kere(hiçbir kayıt yok ise) doldurulur. Index() Action’ında ilgili model, Index.cshtml view’ına gönderilir. Detail() Action’ında, parametre olarak gelen “Title” ve “ID” değerlerine göre istenen Haber filitrelenip, Detail.cshtml view’ına gönderilir.

Index.cshtml: Mvc Razor Page model olarak “List<News>” beklemektedir. Sayfa üzerinde haberleri 2’şer li kayıt olarak dizebilmek için, her 2 kayıttan sonra “count % 2 ==0“‘a göre “</tr><tr>” konulmuştur. Ayrıca ilgili model içinde gezilerek ilk haber tarihi, haber başlığı ve haber resmi ekrana basılmıştır. Haberlerin detayına gitmemizi sağlayan “Url.FriendlyUrl()” UrlHelper’a, yazının devamında deyinilecektir. Ayrıca sayfa içinde “<tr>” html element’i “@:<tr>” şeklinde konmaz ise, “sayfada bir <tr> açıldı ama kapanmadı” şeklinde bir hata alınmaktadır. Bunu önlemek için text’i Html render eden “@:<tr>” syntax’ı kullanılmalıdır. Böylece “Index.cshtml” sayfası oluşturulurken hata alınmaz.

Ekran Çıktısı: Ana sayfa Index.cshtml sayfanın görünümü, aşağıdaki gibidir.

Şimdi gelin hep beraber bir haber’e tıklandığında, ona ait olan detay sayfasına giden kodları yazalım.

Bunun için, bir mvc sayfada yapılması gereken ilk iş Routingdir.

Startup.cs : Aşağıda görüldüğü gibi “blog” adında “{title}/{id}” parametreleri bekleyen bir route template oluşturulmuştur. Böylece, istenen bir haber tıklandığında ilgili detay sayfasına gidilebilecektir.

Şimdi gelelim esas Url sorununa. Bir haber başlığını Url’e koyabilmek için, öncelikle onu url’e uygun hale getirmeliyiz. Bunun için aşağıda görüldüğü gibi bir FriendlyUrl() adında IUrlHelper Extension methodu oluşturulur.

Model/UrlExtension.cs:

  • Extension sınıfı olarak IUrlHelper interface’i kullanılmıştır.
  • Gelen Url’in null kontrolünden sonra tamamı küçük harfe çevrilip, sağ ve solundaki boşluklar “trim()” ile alınmıştır.
  • Url uzunluğunu belli bir değeri aşmaması adına “>100” karakter sınırlamasına gidilmiştir.
  • Tüm türkçe karakterler temizlenmektedir.”$%#@!*?;:~`+=()[]{}|\'<>,/^&””.
  • Regex ile istenmeyen, yani Url’e uygun olmayan tüm karakterler boşluk yani “string.Empty” ile değiştirilir.
  • new Regex(“[^a-zA-Z0-9_-]”)”‘e uymayan karakterler “-” ile değiştirilir.
  • Son olarak  “while (url.IndexOf(“–“) > -1)”  ile “–” karakterler “-” karakterine dönüştürülür.

Yukarıdaki “IUrlHelper” extensin’ın Index.cshtml sayfada kullanım şekli aşağıdaki gibidir: “text-decoration: none;” sitil tanımlaması ile ilgili linklerin altının çizilmesi engellenir. “target=”_blank”” ile de tıklanan haber yeni bir tab’de açılır.

Detail.cshtml: Yukarıda görüldüğü gibi Haber başlığı en tepeye yazılmıştır. Oluşturulan “table“‘ın sayfanın ortasında çıkması için “table.css” kullanılmıştır. İlgili haber detayı “@Model.Detail” ve ilgili haber resmi “<img src=”/images/@Model.Image” width=”500px”>” ile ekrana basılmıştır.

table.css: İlgili table’ın sayfanın ortasında çıkması için kullanılır.

Geldik bir makalenin sonuna. Bu makalede, bir haber sayfasında başlıca kullanılabilecek Url yapısı ile alakalı olan Haber Detay örneğini, detaylıca incelenmiştir. Düzgün bir Url şemasının Seo üzerindeki etkisi büyüktür. Her bir haber, kendi ile anlamlı Url sayesinde hem daha kolay bulunur, hem de arama motorlarında daha üst sıralarda karşımıza çıkar. Bütün bunların yanında çekilen haber datası, mutlaka bir cache yapısında olmalı ve bunun için sistemin dışında bir RESTful webservisinden faydalanılmalıdır. Son olarak haber içinde kullanılan resim, video gibi contentler, yüksek trafic durumları için mutlaka  CDN’den çekilmelidir.

Yeni bir makalede görüşmek üzere hepinize Hoşçakalın.

Source Code: https://github.com/borakasmer/Create-Url-From-News-Title

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

10 Cevaplar

  1. Arda dedi ki:

    Merhabalar;

    Videoda bahsettiğiniz distributed cache’i açabilir misiniz? Teşekkür ederim.

    • borsoft dedi ki:

      Selamlar Arda,
      Sıradaki makalede bu konulara devam edeceğim. Redis’den bahsediyorum mesela :)

  2. kazım dedi ki:

    merhaba bora abi
    güzel bir makale olmuş.haber sayfasının haricinde kategori sayfasıda olsaydı nasıl bir route yapabiliriz.
    yani iki ayrı route nasıl tanımlarız

    • borsoft dedi ki:

      Selamlar Kazım,

      2 farklı router’a gerek yok. Aşağıdaki gibi tanımlanabilir.
      routes.MapRoute(
      name: “blog”,
      template: “{category}/{title}/{id}”,
      defaults: new { controller = “News”, action = “Detail” });

      İyi çalışmalar.

  3. Emre dedi ki:

    Hocam konu ile alakalı değil ancak , site urlimiz şu şekilde idi ?cityId=34 gibi bunu şimdi ?cityId=İstanbul olarak 301 yönlendirmesini yapmak istiyorum nasıl yapabilirim

    • borsoft dedi ki:

      Selamlar Emre,

      En başta “cityId=İstanbul” ile Sayfayı bulamayacak. Hataya düşecek.
      Global.asax’da “void Application_Error(object sender, EventArgs e)”‘de “sender”‘da “İstanbul”‘u yakalayıp karşılığı olan 34 kodunu bulup ==> permanent redirect 301 yapacaksın.

      İyi çalışmalar.

  4. Oqhl dedi ki:

    Selamlar ;
    Bora hocam Açık Ögretim Okuyorum Dersler İyi Degil Ve Ben C# ,Asp.net ,C++ Ögrenmek İstiyorum Ve Kendime Güveniyorum Motivasyonum İyi bir yazılımcı olabilirmiyim Günde 3 4 Saat Calısarak ?

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir