Target Yerine External Kullanımı

Merhaba arkadaşlar,

Bu yazımızda linklerde kullandığımız target="_blank" yerine neden rel="external" kullanmamız gerektiğini öğreneceğiz. Bildiğiniz gibi, linke tıklanıldığında sayfanın nasıl açılacağını Html'nin target özelliğini kullanarak belirliyoruz. Örnek verecek olursak:

<a target="_blank" href="http://ozhanmengucek.com">TIKLA</a> // Linki yeni sekmede açar
<a target="_self" href="http://ozhanmengucek.com">TIKLA</a> // Linki aynı sayfada açar. Linkler, varsayılan olarak _self değerini taşır.
...
target değerleri = _blank, _self, _parent, _top, frameismi

Peki, neden target="_blank" yerine neden rel="external" kullanmalıyız? Çünkü target kodu, w3c standartlarına uymamaktadır ve eski bir koddur. Eski kod olduğu için güncel web teknolojileri tarafından onaylanmamaktadır. SEO açısından da rel="external" kullanmak daha doğrudur.

<a target="_blank" href="http://ozhanmengucek.com">TIKLA</a> // Eski link
<a rel="external" href="http://ozhanmengucek.com">TIKLA</a> // Yeni link

Linklere rel="external" eklediğimizde linkler yeni sekmede açılmayacaktır. İşte bu sorunu çözmek için javascript'ten yardım almamız gerekiyor. Aşağıdaki kodları tagları arasına ekleyerek rel="external" eklenen linklerin yeni sekmede açılmasını sağlayabilirsiniz.

function  HariciLinkler() {
     if (!document.getElementsByTagName)
          return;
     var links = document.getElementsByTagName("a");
     var count = links.length;
     for (var i = 0; i < count; i++) {
          var link = links[i];
          if (link.getAttribute("href") && link.getAttribute("rel") == "external") {
               link.target = "_blank";
          }
     }
}
window.onload = HariciLinkler;

İşte bu kadar! Artık linkleriniz güncel teknolojilere ve SEO'ya uygun hale geldi.

Kodumuzun demosunu bu linkten kontrol edebilirsiniz.

Hepinize keyifli kodlamalar :)