HTML Tıklayınca Açılan Yazı: SEO Uyumlu Rehber

2025-05-30 11:19:27

Web sitelerinde kullanıcı deneyimini artırmak ve içeriği düzenli bir şekilde sunmak için tıklayınca açılan yazı özelliği sıkça kullanılır. Bu yazıda, HTML, CSS ve JavaScript kullanarak nasıl tıklayınca açılan yazı (accordion) oluşturacağınızı ve bunu SEO uyumlu hale getireceğinizi adım adım açıklayacağız.

Tıklayınca Açılan Yazı Nedir?

Tıklayınca açılan yazı, genellikle accordion veya toggle olarak bilinen bir web bileşenidir. Kullanıcı bir başlık veya düğmeye tıkladığında, ilgili içerik açılır veya kapanır. Bu, özellikle uzun içerikleri organize etmek ve kullanıcı dostu bir deneyim sunmak için idealdir.

Neden Tıklayınca Açılan Yazı Kullanmalısınız?

Kullanıcı Deneyimi: İçeriği kompakt bir şekilde sunarak kullanıcıların ilgisini çeker.
SEO Avantajı: Doğru yapılandırıldığında, arama motorlarının içeriği daha iyi anlamasını sağlar.
Site Hızı: Gereksiz içeriği gizleyerek sayfa yükleme süresini optimize eder.
Mobil Uyumluluk: Mobil cihazlarda daha az yer kaplar ve gezinmeyi kolaylaştırır.

HTML ile Tıklayınca Açılan Yazı Nasıl Yapılır?

Basit bir accordion oluşturmak için HTML, CSS ve JavaScript kombinasyonunu kullanabilirsiniz. İşte adım adım bir örnek:

1. HTML Yapısı

Aşağıdaki HTML kodu, temel bir accordion yapısı oluşturur:

        
<div class="accordion">
    <div class="accordion-item">
        <h3 class="accordion-header">Tıklanabilir Başlık 1</h3>
        <div class="accordion-content">
            <p>Bu, tıklayınca açılan içerik alanıdır.</p>
        </div>
    </div>
    <div class="accordion-item">
        <h3 class="accordion-header">Tıklanabilir Başlık 2</h3>
        <div class="accordion-content">
            <p>Bu başka bir içerik alanıdır.</p>
        </div>
    </div>
</div>

2. CSS ile Stil Verme

Accordion’a estetik bir görünüm kazandırmak için CSS kullanabilirsiniz:

        
.accordion-item {
    margin-bottom: 10px;
}
.accordion-header {
    background-color: #f4f4f4;
    padding: 15px;
    cursor: pointer;
}
.accordion-content {
    display: none;
    padding: 15px;
    background-color: #fff;
}
.accordion-content.active {
    display: block;
}

3. JavaScript ile İnteraktiflik Ekleme

Tıklama olayını yönetmek için aşağıdaki JavaScript kodunu kullanabilirsiniz:

        
document.querySelectorAll('.accordion-header').forEach(header => {
    header.addEventListener('click', () => {
        const content = header.nextElementSibling;
        content.classList.toggle('active');
    });
});

SEO Uyumlu Tıklayınca Açılan Yazı İçin İpuçları

Arama motorlarının içeriğinizi doğru bir şekilde dizine eklemesi için aşağıdaki noktalara dikkat edin:

Semantik HTML Kullanın: Başlıklar için h3, h4 gibi etiketler kullanın ve içeriği p etiketleriyle yapılandırın.
Aria Etiketleri: Erişilebilirlik için aria-expanded ve aria-controls gibi ARIA özelliklerini ekleyin.
JavaScript Bağımlılığını Azaltın: İçeriğin varsayılan olarak görünür olduğundan emin olun, böylece JavaScript devre dışı olsa bile içerik erişilebilir olur.
Anahtar Kelime Optimizasyonu: Başlıklarınızda ve içeriklerinizde hedef anahtar kelimeleri doğal bir şekilde kullanın.

Örnek SEO Uyumlu Accordion Yapısı

Aşağıdaki tablo, SEO uyumlu bir accordion oluştururken dikkat edilmesi gereken noktaları özetler:

Özellik	Açıklama
Semantik Etiketler	H2, H3, P gibi etiketler kullanarak içeriği yapılandırın.
Erişilebilirlik	ARIA etiketleri ile ekran okuyuculara uyumluluk sağlayın.
Mobil Uyumluluk	Responsive tasarım için CSS medya sorguları kullanın.
Hız Optimizasyonu	Gereksiz JavaScript ve CSS kodlarını minimize edin.

Sık Yapılan Hatalar ve Çözümleri

Accordion oluştururken yapılan bazı hatalar SEO performansını olumsuz etkileyebilir:

Hata: İçeriğin tamamen JavaScript ile yüklenmesi. Çözüm: İçeriği varsayılan olarak HTML içinde tutun.
Hata: Başlıklarda anahtar kelime eksikliği. Çözüm: Başlıklarda hedef anahtar kelimeleri kullanın.
Hata: Erişilebilirlik eksikliği. Çözüm: ARIA etiketleri ve klavye navigasyonu ekleyin.

Benzer Makaleler

Kategoriler