Dinamik Twitter Card Facebook og Tag

Web sitemizin twitter ve facebook’da paylaşımı yapıldığında paylaşımın hoş ve düzenli görünmesini sağlayan aynı zamanda artık daha da önemli olan SEO açısından bir artı sağlayacak tag lar bulunmaktadır. Twitter card için “twitter:……”, facebook tag için “og:……” taglarını kullanırız.

Sayfalarımızda bu tagları statik olarak kullanmak için <head> tagları arasına yazmanız gerekmektedir fakat dinamik içerik üreten bir sayfamız varsa bu tagları da dinamik yapmak durumundayız.

Kısaca statik olarak <head> taglarına aşağıdaki yapıyı ekleriz.

Facebook için

<meta property="og:url"                content="https://veliofkeli.com" />
<meta property="og:type"               content="makale" />
<meta property="og:title"              content="Başlık" />
<meta property="og:description"        content=" Kısaca içerik hakkında bilgi yazarız, özet halinde görünmesi için " />
<meta property="og:image"             content="https://veliofkeli.com/img/logo.png" />
Twitter için
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@OfkeliVeli">
<meta name="twitter:title" content="Setup Hazırlama - LocalDb Ekleme - Setup Project">
<meta name="twitter:description" content="Kısaca içerik hakkında bilgi yazarız, özet halinde görünmesi için">
<meta name="twitter:image" content="https://veliofkeli.com/img/makale/defaultImage.png">

Ben asıl burada asp.net ile dinamik yapı nasıl oluşturulur ondan bahsedeceğim. 

Dinamik yapı olacağı için bunu bir class kullanarak yapacağım, siz de aşağıda verdiğim class’ı küçük değişikliklerle uygulayabilirsiniz.

Projemize sağ tıklayıp App_Code klasörü oluşturuyoruz (varsa içerisine class oluşturacağız), bu klasör içine Tags adında class oluşturuyorum. 

Tags class ımı static olarak ayarladım içeriğini aşağıdaki şekilde ayarlayınız. En üste namespace alanına using System.Web.UI.HtmlControls; eklemeyi unutmayalım

public static  void CustomTags(Page page,string image,string url,string title,string description)
    {
        HtmlMeta tcard = new HtmlMeta();
        tcard.Name = "twitter:card";
        tcard.Content = "summary_large_image";
        HtmlMeta tsite = new HtmlMeta();
        tsite.Name = "twitter:site";
        tsite.Content = "@OfkeliVeli";
        HtmlMeta ttitle = new HtmlMeta();
        ttitle.Name = "twitter:title";
        ttitle.Content = title;
        HtmlMeta tdescription = new HtmlMeta();
        tdescription.Name = "twitter:description";
        tdescription.Content = description;
        HtmlMeta timage = new HtmlMeta();
        timage.Name = "twitter:image";
        timage.Content = image;
        

        HtmlMeta ogurl = new HtmlMeta();
        ogurl.Attributes.Add("property", "og:url");
        ogurl.Content = url;
        HtmlMeta ogtitle = new HtmlMeta();
        ogtitle.Attributes.Add("property", "og:title");
        ogtitle.Content =title;
        HtmlMeta ogdescription = new HtmlMeta();
        ogdescription.Attributes.Add("property", "og:decription");
        ogdescription.Content = description;
        HtmlMeta ogimage = new HtmlMeta();
        ogimage.Attributes.Add("property", "og:image");
        ogimage.Content = image;

        
        page.Header.Controls.Add(tcard);
        page.Header.Controls.Add(tsite);
        page.Header.Controls.Add(ttitle);
        page.Header.Controls.Add(tdescription);
        page.Header.Controls.Add(timage);
        page.Header.Controls.Add(ogurl);
        page.Header.Controls.Add(ogtitle);
        page.Header.Controls.Add(ogdescription);
        page.Header.Controls.Add(ogimage);       
    }
Yukarıdaki haliyle parametreleri class’a girerek yaparız. Bu class’ı çağıracağımız sayfaya ki ben burda MakaleDetay sayfamın page_load olayına 
	    string kategori=RouteData.Values[“KategoriAd”].ToString();
            var tagparam = makaledetay.FirstOrDefault(); // makaledetay’ı liste olarak önceki satırlarda aldım, burda ilk satırı çekiyorum
            string image ="https://veliofkeli.com" + tagparam.MansetResim; // resim yolu veritabanından MansetResim alanından alıyorum
	    baslik = RouteData.Values["Baslik"].ToString(); // url den gelen başlığı alıyorum (url formatında)

            string kategori = RouteData.Values["KategoriAd"].ToString(); // url den gelen kategoriad verisini alıyorum (url formatında)
            string url = "https://veliofkeli.com/" + kategori + "/"+ baslik; // burda sitenin linki oluşturuluyor
            string title = tagparam.Baslik; // veritabanından aldığım Başlık bilgisi
            string description = tagparam.Detay.Length > 150 ? tagparam.Detay.ToString().Substring(0, 150) : tagparam.Detay;
            Tags.CustomTags(this.Page,image, url, title, description); // Tags Class ını işletiyorum.
Twitter tags sonuç

Facebook tags sonuç


Asp.Net de dinamik tag oluşturma işlemini bu şekilde hallettik. Umarım faydalı olur

İyi çalışmalar





Etiketler
twitter card facebook tag facebook og dinamik tag
Mesaj Yaz