Breadcrumbs, modern web tasarımının ve kullanıcı deneyiminin vazgeçilmez unsurlarından biri haline gelmiştir. Web sitelerinde gezinmeyi kolaylaştıran ve kullanıcıların bulundukları konumu net bir şekilde görmelerini sağlayan bu küçük gezinme yardımcıları, hem kullanıcı dostu arayüz oluşturur hem de arama motoru optimizasyonuna (SEO) katkıda bulunur. Bir yandan kullanıcıların sitenizde daha rahat dolaşmasını sağlarken, diğer yandan arama motorlarının sitenizi daha iyi anlamasına yardımcı olur. Bu makalede, breadcrumbs’un ne olduğu, nasıl çalıştığı ve etkili bir şekilde nasıl kullanılabileceği konuları ele alınacaktır.
Breadcrumb Nedir?
Breadcrumb, bir web sitesinde kullanıcının mevcut sayfasının hiyerarşik yapısını gösteren, genellikle yatay olarak dizilmiş bir gezinme yoludur. Bu yol, kullanıcının hangi sayfada olduğunu ve bu sayfaya hangi yollardan ulaştığını adım adım gösterir. Adını Hansel ve Gretel masalında çocukların ormanda yollarını bulmak için bıraktığı ekmek kırıntılarından alan bu terim, web tasarımında kullanıcıların sitenin yapısını anlamalarına yardımcı olan bir araç olarak kullanılır.
Niçin Kullanılır?
Breadcrumbs, özellikle büyük ve karmaşık web sitelerinde kullanıcı deneyimini iyileştirmek için kullanılır. İşlevleri şunlardır:
- Gezinmeyi Kolaylaştırmak: Kullanıcıların sitenin hiyerarşisini anlamalarına ve daha önce ziyaret ettikleri sayfalara hızlıca geri dönmelerine olanak tanır.
- Kullanıcı Yolunu Göstermek: Kullanıcının mevcut konumunu net bir şekilde gösterir, böylece kullanıcı nerede olduğunu ve site içinde nasıl ilerlediğini bilir.
- SEO’ya Katkı: Arama motorları, breadcrumbs’u sitenin yapısını anlamak ve içeriği daha iyi indekslemek için kullanır, bu da arama motoru sıralamalarını olumlu etkileyebilir.
Avantajları
Breadcrumbs kullanmanın çeşitli avantajları vardır:
Kullanıcı Deneyimini İyileştirir:
- Kolay Gezinme: Kullanıcıların birden fazla tıklama yapmadan ana sayfaya veya önceki sayfalara geri dönmelerini sağlar.
- Yer Duysusu: Kullanıcılara site içinde nerede olduklarını ve nasıl geldiklerini göstererek yön duygusu kazandırır.
SEO’yu Destekler:
- Daha İyi İndeksleme: Arama motorları, breadcrumbs’u sitenin içeriğini ve hiyerarşisini anlamak için kullanır, bu da daha iyi indeksleme sağlar.
- Anahtar Kelime Optimizasyonu: Breadcrumbs’larda kullanılan metinler, arama motorlarına ekstra anahtar kelime sinyalleri gönderir.
Hemen Çıkma Oranını Azaltır:
- Kullanıcı Tutulumu: Kullanıcılar, istedikleri bilgiye veya sayfaya hızlıca ulaşabildiklerinde sitede daha uzun süre kalma eğiliminde olurlar.
- Daha Fazla Etkileşim: Kullanıcıların site içinde daha fazla sayfa gezmesini teşvik eder.
Mobil Uyumlu:
- Kompakt Tasarım: Mobil cihazlarda gezinmeyi kolaylaştıran basit ve kompakt bir navigasyon çözümü sunar.
Breadcrumbs, kullanıcı deneyimini artırmak ve SEO performansını iyileştirmek için önemli bir araçtır. Doğru kullanıldığında, hem kullanıcıların sitenizde daha verimli bir şekilde gezinmesini sağlar hem de arama motorlarında daha iyi performans göstermenize yardımcı olur.
Breadcrumb Nasıl Oluşturulur?
Breadcrumbs oluşturmak, hem kullanıcı deneyimini artırmak hem de SEO’yu desteklemek açısından oldukça önemlidir. İşte breadcrumbs oluşturma sürecine dair adımlar ve dikkat edilmesi gereken noktalar:
1. Hiyerarşik Yapıyı Belirleyin
Öncelikle web sitenizin hiyerarşik yapısını belirlemeniz gerekir. Ana sayfadan başlayarak alt sayfalara doğru mantıklı ve düzenli bir yapı oluşturun. Örneğin:
Ana Sayfa > Kategori > Alt Kategori > Ürün Sayfası
2. HTML ve CSS ile Breadcrumbs Oluşturma
Basit bir HTML ve CSS kullanarak breadcrumbs oluşturabilirsiniz. İşte temel bir örnek:
html:
<nav aria-label="Breadcrumb">
<ol>
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="kategori.html">Kategori</a></li>
<li><a href="alt-kategori.html">Alt Kategori</a></li>
<li>Ürün Sayfası</li>
</ol>
</nav>
Css:
nav[aria-label="Breadcrumb"] ol {
list-style: none;
padding: 0;
display: flex;
}
nav[aria-label="Breadcrumb"] li {
margin-right: 5px;
}
nav[aria-label="Breadcrumb"] li+li:before {
content: ">";
margin-right: 5px;
}3. Yapısal Veri İşaretlemesi Ekleyin
Arama motorlarının breadcrumbs’u anlamasına yardımcı olmak için yapısal veri işaretlemesi (structured data) ekleyin. Bu işaretleme, özellikle Google gibi arama motorları tarafından kullanılmaktadır.
JSON-LD ile Yapısal Veri:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Ana Sayfa",
"item": "https://www.orneksite.com"
},{
"@type": "ListItem",
"position": 2,
"name": "Kategori",
"item": "https://www.orneksite.com/kategori"
},{
"@type": "ListItem",
"position": 3,
"name": "Alt Kategori",
"item": "https://www.orneksite.com/kategori/alt-kategori"
},{
"@type": "ListItem",
"position": 4,
"name": "Ürün Sayfası",
"item": "https://www.orneksite.com/kategori/alt-kategori/urun-sayfasi"
}]
}
</script>
4. JavaScript ile Dinamik Breadcrumbs
Eğer sitenizdeki içerik dinamik olarak değişiyorsa, breadcrumbs’u JavaScript ile dinamik hale getirebilirsiniz.
Örnek JavaScript Kodu:
document.addEventListener('DOMContentLoaded', function () {
var breadcrumb = document.querySelector('nav[aria-label="Breadcrumb"] ol');
var path = window.location.pathname.split('/').filter(function (segment) {
return segment.length > 0;
});
path.forEach(function (segment, index) {
var li = document.createElement('li');
if (index < path.length - 1) {
var a = document.createElement('a');
a.href = '/' + path.slice(0, index + 1).join('/');
a.textContent = segment;
li.appendChild(a);
} else {
li.textContent = segment;
}
breadcrumb.appendChild(li);
});
});5. Kullanıcı Deneyimi ve SEO için İpuçları
- Açıklayıcı ve Kısa Metinler: Breadcrumbs’ta kullanılan metinlerin açıklayıcı ve kısa olmasına dikkat edin.
- Tutarlılık: Tüm sayfalarda breadcrumbs’u aynı formatta ve aynı yerde gösterin.
- Mobil Uyum: Breadcrumbs’un mobil cihazlarda da düzgün çalıştığından emin olun.
Değerlendirme
Breadcrumbs, kullanıcıların web sitenizde kolayca gezinmelerini sağlayan ve aynı zamanda SEO performansını artıran önemli bir araçtır. Hiyerarşik yapınızı iyi belirleyerek, doğru HTML, CSS ve yapılandırılmış veri işaretlemesi kullanarak etkili breadcrumbs oluşturabilirsiniz. Bu sayede kullanıcı deneyimini iyileştirirken arama motorlarında daha iyi performans gösterebilirsiniz.
