Seo Uyumlu Html Slider Ekleme Rehberi

HTML slider, web sitenizde öne çıkan hizmetleri, kampanyaları, referansları veya portföy çalışmalarını etkileyici şekilde sergilemenin en pratik yollarından biridir. Ancak slider’ı sadece “gösterişli” yapmak yetmez:SEO, performans ve mobil uyumluluk doğru kurgulanmazsa sayfa hızını düşürür, kullanıcı deneyimini bozar ve sıralamayı olumsuz etkileyebilir.

Bu rehberde, Urfa Web Tasarım olarak SEO’yu bozmadan, hızlı ve mobil uyumlu bir slider’ı nasıl ekleyebileceğinizi anlatıyoruz.

Slider SEO’yu Etkiler mi?

Evet. Slider şu noktalarda SEO’yu etkiler:

Sayfa hızı (Core Web Vitals): Büyük görseller LCP’yi yükseltir, sayfa yavaşlar.

İçerik önceliği: En değerli metinler slider içinde görsel olarak kalırsa arama motorları için zayıf kalabilir.

Erişilebilirlik: Alt metin (alt), başlık hiyerarşisi ve buton etiketleri önemlidir.

Mobil deneyim: Dokunmatik kaydırma, okunabilir yazı ve uygun görsel oranı gerekir.

İyi haber:Doğru tekniklerle hem şık hem SEO dostu slider yapmak mümkün.

1) SEO Dostu Slider Tasarımının Altın Kuralları

 1. Görselleri optimize edin

WebP kullanın (varsa AVIF daha da iyi).

Görseli yüklemeden önce sıkıştırın.

Boyutları gereğinden büyük tutmayın.

 2. Lazy-load ve doğru öncelik

İlk görsel genelde “hero” ise bazen lazy-load yapmak yerine optimize etmek daha iyi olur.

Diğer slayt görsellerinde loading="lazy" kullanın.

 3. Mutlaka ALT metni ekleyin

Her görsel için açıklayıcı alt yazın:

“Urfa web tasarım kurumsal site örneği”

“Şanlıurfa e-ticaret sitesi tasarımı”

 4. Slider metni gerçekten HTML metni olsun

Görselin içine yazı gömmek yerine, başlık ve açıklamayı HTML metin olarak verin. Bu SEO için çok kritiktir.

2) Basit ve SEO Uyumlu HTML Slider Örneği (Kod)

Aşağıdaki slider; hafif, mobil uyumlu, SEO dostu olacak şekilde örneklendirildi.

<section class="hero-slider" aria-label="Öne Çıkan İçerikler">
  <div class="slides" id="slides">
    <article class="slide is-active">
      <img
        src="images/urfa-web-tasarim-1.webp"
        alt="Urfa Web Tasarım - Kurumsal Web Sitesi Tasarımı"
        width="1200"
        height="600"
        decoding="async"
      />
      <div class="content">
        <h1>Urfa’da Kurumsal Web Tasarım</h1>
        <p>Hızlı, mobil uyumlu ve SEO odaklı modern web siteleri.</p>
        <a class="btn" href="/kurumsal-web-tasarim">Detaylı İncele</a>
      </div>
    </article>

    <article class="slide">
      <img
        src="images/e-ticaret-slider.webp"
        alt="E-ticaret sitesi kurulumu ve yönetimi"
        width="1200"
        height="600"
        loading="lazy"
        decoding="async"
      />
      <div class="content">
        <h2>E-Ticaret Sitesi Kurulumu</h2>
        <p>Satışa hazır, hızlı ödeme altyapısı ve SEO destekli e-ticaret.</p>
        <a class="btn" href="/e-ticaret">Hemen Başlayın</a>
      </div>
    </article>

    <article class="slide">
      <img
        src="images/seo-hiz-optimizasyon.webp"
        alt="SEO ve hız optimizasyonu hizmeti"
        width="1200"
        height="600"
        loading="lazy"
        decoding="async"
      />
      <div class="content">
        <h2>SEO & Hız Optimizasyonu</h2>
        <p>Google’da daha görünür olun, sayfanız daha hızlı açılsın.</p>
        <a class="btn" href="/seo">SEO Hizmeti</a>
      </div>
    </article>
  </div>

  <button class="nav prev" aria-label="Önceki स्लayt" type="button">‹</button>
  <button class="nav next" aria-label="Sonraki स्लayt" type="button">›</button>
</section>

.hero-slider { position: relative; overflow: hidden; border-radius: 16px; }
.slides { position: relative; }
.slide { display: none; position: relative; }
.slide.is-active { display: block; }
.slide img {
 width: 100%;
 height: auto;
 display: block;
}
.slide .content {
 position: absolute;
 left: 6%;
 bottom: 10%;
 max-width: 560px;
 padding: 16px 18px;
 background: rgba(0,0,0,.45);
 color: #fff;
 border-radius: 12px;
}
.slide .content h1, .slide .content h2 { margin: 0 0 8px; line-height: 1.2; }
.slide .content p { margin: 0 0 12px; }
.btn {
 display: inline-block;
 padding: 10px 14px;
 background: #fff;
 color: #000;
 border-radius: 10px;
 text-decoration: none;
 font-weight: 600;
}
.nav {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 border: 0;
 width: 42px;
 height: 42px;
 border-radius: 999px;
 cursor: pointer;
 background: rgba(0,0,0,.35);
 color: #fff;
 font-size: 24px;
}
.prev { left: 10px; }
.next { right: 10px; }
@media (max-width: 768px) {
 .slide .content { left: 4%; right: 4%; bottom: 6%; max-width: none; }
 .slide .content h1, .slide .content h2 { font-size: 18px; }
}

JavaScript (Basit geçiş)

<script>
  (function () {
    const slides = Array.from(document.querySelectorAll(".slide"));
    const prevBtn = document.querySelector(".prev");
    const nextBtn = document.querySelector(".next");
    let index = 0;

    function show(i) {
      slides.forEach(s => s.classList.remove("is-active"));
      slides[i].classList.add("is-active");
    }

    prevBtn.addEventListener("click", () => {
      index = (index - 1 + slides.length) % slides.length;
      show(index);
    });

    nextBtn.addEventListener("click", () => {
      index = (index + 1) % slides.length;
      show(index);
    });

    // Otomatik geçiş (isterseniz kaldırın)
    setInterval(() => {
      index = (index + 1) % slides.length;
      show(index);
    }, 6000);
  })();
</script>

3) Urfa Web Tasarım İçin SEO İpucu:Slider’dan Sonra Metin Alanı Ekleyin

Slider görsel ağırlıklı olduğundan, hemen altına 150–250 kelimelik bir tanıtım metni eklemek SEO’ya iyi gelir:

“Urfa web tasarım”

“Şanlıurfa kurumsal web sitesi”

“SEO uyumlu site”

gibi anahtar kelimeler doğal biçimde geçebilir.

4) Sık Yapılan Hatalar

Slider yazılarını görselin içine gömmek (SEO kaybı)

Çok büyük görseller (LCP artar)

Her slaytta aynı H1 kullanmak (hiyerarşi bozulur)

Mobilde yazıların taşması / butonların tıklanamaması