Breadcrumb, ekmek kırıntısı veya sayfa yol işaretleyicisi olarak adlandırılmaktadır. Breadcrumb yapıları her geçen gün web siteler için büyük önem arz etmektedir. Breadcrumb kategorisi kullanıcı deneyimini arttırabileceği gibi site içerisinde ki gezinme oranlarını olumlu yönde etkilemektedir.
Arama sonuçlarında sıralama rekabetinin artması breadcrumb kullanmanın önemini oldukça arttırıyor bu yüzden sizler için breadcrumb nedir ve breadcrumb nasıl yapılır yazısını hazırladık.
Breadcrumb Nedir?
Breadcrumb, ekmek kırıntısı demektir. Arama motoru optimizasyonu ve kullanıcı deneyimi açısından web siteler için önem arz etmektedir. Sitenizde sayfalar ve kategoriler arasında dolaşan ziyaretçilere rehberlik etmek ziyaretçinin hangi sayfadan hangi sayfaya geçtiğini göstermektedir.
Jakob Nielsen 1995 yılında internet sitesi ve işletim sistemelrinde breacrumb yapısını kullanmasını tavsiye ettiğini söylüyor. Çünkü breadcrumbs yapıları kullanıcıların web sitede dolaşması sırasında sorun oluşturmaz kafa karışıklığı yaratmaz.
Breadcrumb yapısı kullanan web sitelerde %30 oranında trafik artışı ve site içi dolaşımın arttığı gözlemlenmektedir. Site içerisinde çok az yer kaplaması ve SEO için oldukça önemli bir kriter olmasından dolayı her web site sahibinin kullanması gerektiğini savunuyoruz.
Breadcrumb, hem kullanıcı deneyimini arttırır hemde googlebotlarına rehberlik etmesini sağlar. Breadcrumb yapısı googlebotları siteyi taradığı sırada belli bir hiyerarşik yapı içerisinde nerede olduklarını takip ederek taramasını kolaylaştırır.
Breadcrumb, kullanıcılar web sitede dolaşırken hangi sayfada ve kategoride olduklarını anlamalarına yardımcı olur.
Breadcrumb Nasıl Yapılır?
Breadcrumb nasıl yapılır diye internette pek çok yalan ve yanlış bilgi bulunmaktadır. Eğer wordpress tabanlı bir siteniz var ise breadcrumb yapısını kullanmak için yapmanız gereken bir kaç eklentiyi sitenize kurmaktır.
Breadcrumb yapısı için wordpress tabanlı sitenize kurmanız gereken eklentiler rankmath, yoast seo ve schema.org popüler eklentilerdir.
Breadcrumb ayracı pek çok farklı şekilde kullanılmaktadır. Sıklıkla kullanılan breadcrumb ayracı “>” şekildedir.
- Tire
- Nokta
- Eğik çizgi ve
- Büyüktür işareti
E-ticaret Siteleri İçin Breadcrumb Kodları
Breadcrumb Kod Yapısı:
<ol itemscope itemtype="https://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="https://orneksite.com"> <span itemprop="name">Ana Sayfa</span></a> <meta itemprop="position" content="1" /> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href=" https://orneksite.com/yemek-tarifleri"> <span itemprop="name">Yemek Tarifleri</span></a> <meta itemprop="position" content="2" /> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href=" https://orneksite.com/sağlikli-yemek-tarifleri"> <span itemprop="name">Sağlıklı Yemek Tarifleri</span></a> <meta itemprop="position" content="3" /> </li> </ol>
Üst kısımda yer alan breadcrumb kodlamasını doğru uyguladığınız takdirde siteniz google da uygun bir yapıda gözükecektir.
Breadcrumb Yapısının Faydaları
- Siteniz içerisinde dolaşan ziyaretçilerin bir önceki sayfaya geri dönmesini sağlar.
- Ziyaretçilerin, sitenizin kategori ve sayfa kısımlarında dolaşımını kolaylaştırır.
- Breadcrumb yapısı doğru tasarıma sahipse kullanıcı deneyimi açısından faydalıdır.
- Site içi link inşaası için breadcrumb yapısı önemli bir faktördür.
- Ziyaretçilerin site içerisindeki doğru iç linkleme ile dolaşmasını sağlar.
- Googlebotları siteyi tararken sitenin yapısını anlamasında yardımcı olur.
- Breadcrumbg yapısı ile chema entegrasyonu kullanılarak arama botlarına link yapısıyla ilgili bil verilmesini sağlar.
- Arama motoru optimizasyonu açısından faydalıdır.
Breadcrumb Çeşitleri Nelerdir?
Breadcrumb nedir ve breadcrumb nasıl yapılır ile ilgili aramalar yapıldığında gözden kaçan bir şey bulunmaktadır. Breadcrumb çeşitleri sitenize göre kullanacağınız yapıyı belirlemektedir.
1. Location Breadcrumb – Konumsal Breadcrumb
Breadcrumb çeşitleri arasında en sık kullanılan bir yapıdır. Location breadcrumb, sitenizde ki ziyaretçilerin site içerisinde kategori ve sayfalar arasında dolaşımını kolaylaştırmaktadır. Sitenizde dolaşmakta olan ziyaretçi bir önceki sayfaya geri dönmek istediğinde bunu kolaylıkla yapabilmektedir. Ziyaretçi bulunduğu kategori veya sayfanın hiyerarşik yapısını daha iyi anlayabilir.
Örnek: Anasayfa>Telefon&Aksesuarları>Cep telefonu Aksesuarları>Kılıf
2. Attribute Breadcrumb – Niteliksel Breadcrumb
Attribute breadcrumb yapısında ise sayfaların isimleri değil daha sıklıkla sayfaların niteliksel özellikleri kullanılmaktadır. Bu yapıda asıl önemli olan sayfanın bulunduğu konum değil sayfanın sahip olduğu özellik önemlidir. Attribute breadcrumb yapısı genellikle e-ticaret sitelerinde filtre görevi gören arama kısımlarında kullanılmaktadır.
3. Patch Breadcrumb – Dinamik Yapı
Patch breadcrumb ise tanımı gereği ekmek kırıntısıdır. Ziyaretçi bir sayfadan diğer sayfaya geçerken tıkladığı linklerin konumunu belirlemesidir. Ziyaret ettiği sayfalar breadcrumb menüsü içerisinde bir yol haritası şeklinde yer alır.
Patch breadcrumb yapısı kullanırken bazı sorunlarla karşılaşabilirsiniz bunlar arasında kopya sayfa sorunu başınıza gelebilir. Bir sayfaya birden farklı şekilde ulaşım sağlanılabildiği herkes tarafından bir gerçek bu yüzden canonical ve benzersiz url yapısı kullanmaya özen gösterin.
İlginizi Çekebilecek Yazılarımız
Breadcrumb Yapısında Dikkat Etmeniz Gerekenler
Breadcrumb yapısını kullanmadan önce dikkat etmeniz gereken bir kaç husus bulunmaktadır. Breadcrumb yapıları birden farklı yapılarda bulunması farklı amaçlar için kullanılması sitenizin uygun olup olmamasında karar vermenizi gerektiriyor.
Breadcrumb Ayraç Seçimi
Breadcrumb ayraçları sıklıkla “>” şeklinde kullanılmaktadır. Bu sıklıkla kullanılan ayraç dışında farklı ayraçlarda bulunmaktadır.
- Tire
- Nokta
- Eğik çizgi ve
- Büyüktür işareti
Breadcrumb Konumu
Breadcrumb konumu kullanıcılar siteyi ziyaret ettiğinde veya site içerisinde dolaşım yaparken onları rahatsız etmeyecek bir konumda bulunması önemlidir.
Breadcrumb yapısının konumu sıklıkla kategori başlığın altında soldan sağa doğru uzanan bir yapı içerisinde bulunmaktadır. Kullanıcı hangi sayfada olduğunu ve hangi sayfaları ziyaret ettiğini anlaması ve geri dönüş yapması kolaylaşır.
Breadcrumb WordPress Eklentileri
WordPress tabanlı web site sahipleri breadcrumb nasıl yapılır diye arama yaptığında karşılarına karmakarışık bir çok eklenti çıkmaktadır.
Bu eklentilere bakıldığında hangisini breadcrumb nasıl yapılır sorusuna cevap veremiyor aşağıda hazırladığımız wordpress breadcrumb eklentileri kullanarak breadcrumb nasıl yapılır sorusunu ortadan kaldıracaksınız.
- Rankh Math Seo
- Yoast Seo
- Schema.Org
- Breadcrumb
Html Breadcrumb, Breadcrumb Css ve Bootstrap Breadcrumb Kodları
WordPress tabanlı web siteler için breadcrumb yapısını kullanmak bir kaç eklenti ile çözülebilir. Fakat özel tasarımlarla oluşan siteler için breadcrumb yapısı kodlardan oluşmaktadır. aşağıda yer alan kodlar html breadcrumb kodları ve css breadcrumb kodları yer almaktadır.
HTML Breadcrumb Kodları
Bread crumb html kodlarını web sitenizin html dosyası içerisine ekleyerek sitenizde breadcrumb yapısını kullanabilirsiniz.
<ul class="breadcrumb"> <li><a href="#">Ürünler</a></li> <li><a href="#">Teknoloji</a></li> <li><a href="#">Bilgisayar</a></li> <li>Acer</li> </ul>
Breadcrumb CSS Kodları
Bread crumb css kodlarını web sitenizin css dosyası içerisine ekleyerek sitenizde breadcrumb yapısını kullanabilirsiniz.
ul.breadcrumb { padding: 10px 16px; list-style: none; background-color: #eee; } ul.breadcrumb li { display: inline; font-size: 20px; color: currentColor; } ul.breadcrumb li + li:before { padding: 8px; color: cornflowerblue; content: "/0a0"; } ul.breadcrumb li a { color: cornflowerblue; text-decoration: none; } ul.breadcrumb li a:hover { color: #01447e; text-decoration: underline; }
Breadcrumb Bootstrap Kodları
Breacrumb bootstrap kodları. Aşağıda yer alan breadcrumb bootstarp kodlarını kullanarak web siteniz içerisinde breadcrumb yapısı oluşturabilirsiniz.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>BONUS: YOAST SEO BREADCRUMB NASIL YAPILIR?
Breadcrumb nasıl yapılır? breadcrumb nedir yazımızı buraya kadar okuduysanız yoast seo tarafından hazırlanan breadcrumb nasıl yapılır videosunu yazımıza ekledik. Breadcrumb nedir diye soruyorsanız yoast seo tarafından hazırlanan video size yardımcı olacaktır.
İlginizi Çekebilir WordPress Hızlı index Alma Teknikleri
Kaynaklar
Breadcrumb nasıl yapılır breadcrumb nedir adlı yazımızda kullandığımız kaynaklar aşağıda yer almaktadır.
Kitaplar
- Sorularla Seo – Kaan Gülten
- Uzmanından Seo – Kaan Gülten
- Stratejik Seo – Enver Çakır
- Kültür Üniversitesi – Bilgisayar Mühendisliği Ders Notları
- İstanbul Üniversitesi – Yönetim Bilişim Sistemleri Ders Notları
Web Site
