Ana içeriğe atla

Modern Web Standartları: SEO ve Performans Optimizasyonu Rehberi

 Bir web projesinin başarısı, sadece görselliğiyle değil; kullanıcı deneyimi (UX), erişilebilirlik, SEO ve performans gibi "kaputun altındaki" teknik detaylarla ölçülür. Yakın zamanda bir web projemizde gerçekleştirdiğimiz kapsamlı revizyon sürecini ve Lighthouse skorlarını maksimize etmek için uyguladığımız teknikleri bu yazıda derledik.

1. Erişilebilirlik (Accessibility) İyileştirmeleri

Webin herkes için eşit derecede ulaşılabilir olması bir tercih değil, zorunluluktur. Bu doğrultuda şu adımları uyguladık:

  • Görsel ve ARIA Etiketleri: Tüm görsellere anlamlı alt metinleri eklendi. Sadece ikon içeren (sosyal medya butonları gibi) elemanlara, ekran okuyucuların ne olduğunu anlaması için aria-label tanımlamaları yapıldı.

  • Form Erişilebilirliği: İletişim formlarındaki her input, bir label etiketiyle (for niteliği kullanılarak) eşleştirildi. Bu, hem ekran okuyucular hem de tıklama kolaylığı açısından kritik bir dokunuş.

  • Hiyerarşik Yapı: Başlık etiketlerinin (h1...h6) sırasıyla gitmesi sağlandı. Atlamalı başlıklar (örneğin h2'den direkt h4'e geçiş) düzeltilerek sayfa yapısı semantik hale getirildi.

  • Ana İçerik İşaretçisi: Tarayıcıların sayfanın özünü daha hızlı kavraması için <main> etiketi ile içerik alanı netleştirildi.

2. Güvenlik ve En İyi Uygulamalar (Best Practices)

Modern web standartlarına uyum sağlamak adına güvenlik ve tarayıcı etkileşimlerini optimize ettik:

  • Güvenli Dış Bağlantılar: Yeni sekmede açılan (target="_blank") linklere rel="noopener noreferrer" eklenerek hem güvenlik açıkları kapatıldı hem de performans kaybı önlendi.

  • Form Otomatik Tamamlama: Kullanıcı kolaylığı için form alanlarına uygun autocomplete (name, email, tel) nitelikleri tanımlandı.

  • Görsel Boyutlandırma: Görsellerin en-boy oranının bozulmaması için HTML üzerindeki katı yükseklik değerleri yerine, CSS ile esnek (width: auto) bir yapıya geçildi.

3. Arama Motoru Optimizasyonu (SEO)

Sitenin arama motoru sonuçlarında (SERP) daha sağlıklı görünmesi için:

  • Meta Açıklamaları: Her sayfanın içeriğini doğru özetleyen, anahtar kelime uyumlu <meta name="description"> etiketleri standart hale getirildi.

4. Performans ve Hız Optimizasyonu

Hız, hem kullanıcıyı sitede tutmak hem de Google sıralamalarında yükselmek için en önemli faktörlerden biridir:

  • Lazy Loading reCAPTCHA: Google reCAPTCHA gibi ağır scriptlerin sayfa açılışında yüklenmesi engellendi. Bunun yerine kullanıcı etkileşime geçtiğinde (fare hareketi veya tuş basımı) yüklenen bir "akıllı yükleme" mekanizması kuruldu.

  • Gelişmiş Önbellekleme (Caching): .htaccess üzerinden statik dosyalar (resim, CSS, JS) için uzun süreli önbellekleme kuralları eklendi.

  • Script Yönetimi: Harici scriptlere async ve defer özellikleri verilerek, scriptlerin sayfa yüklemesini "bloklamasının" önüne geçildi.

  • Preconnect: Google Fonts veya Gstatic gibi kaynaklara daha hızlı bağlanabilmek için tarayıcıya önceden komut veren preconnect kuralları uygulandı.

Sonuç

Bu teknik dokunuşlar sonucunda; daha güvenli, erişilebilir ve arama motorları tarafından "sevilen" bir web yapısı ortaya çıktı. Unutmayın, iyi bir web sitesi sadece çalışan değil, aynı zamanda hızlı ve herkes tarafından kullanılabilen bir yapıdır.

Okuduğunuz için teşekkür ederim. Bu makaleyi zenginleştirmek için yorum yapabilirsiniz. 

Etiketler:
Yer: Bursa, Türkiye

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Windows, Docker ve VSCode ile Kusursuz PHP Debug Ortamı Kurulumu

Windows üzerinde PHP geliştirirken performans sorunları ve "dosya yolunda çalışmama" gibi hatalardan sıkıldınız mı? Bu rehberde; Apache, MySQL ve Xdebug 3 kullanarak, VSCode ile tam senkronize çalışan, yüksek performanslı bir geliştirme ortamını nasıl kuracağınızı anlatıyorum. ⚠️ Gereksinimler Windows 10/11 (WSL 2 yüklü olması önerilir). Docker Desktop. VSCode. 1. Proje Yapısı Öncelikle projenizin ana dizininde ( C:\Users\user\htdocs_debug ) aşağıdaki klasör ve dosyaları oluşturun: /html (Kodlarınız burada olacak) /mysql_data (Veritabanı verileriniz burada saklanacak) docker-compose.yml Dockerfile 2. Docker Yapılandırması docker-compose.yml dosyanıza aşağıdaki içeriği ekleyin. Bu yapı, Apache'yi 8888 portunda, MySQL'i ise 3312 portunda çalıştıracaktır: YAML version: '3.8' services: web: build: . container_name: phpserver_debug ports: - "8888:80" volumes: - ./html:/var/www/html extra_hosts: -...
Yorum Gönder
Devamı

Web Sitelerinde Kullanıcı Rızası ve Google Analytics Entegrasyonu: Neden ve Nasıl?

 Dijital dünyada kullanıcı gizliliği artık bir tercih değil, yasal bir zorunluluktur. Eğer bir web siteniz varsa ve ziyaretçi trafiğini analiz etmek için Google Analytics kullanıyorsanız, kullanıcılarınızdan izin almadan veri toplamanın ciddi sonuçları olabilir. Bu yazımızda, kullanıcı rızasının önemini inceleyecek ve PHP kullanarak basit ama etkili bir rıza yönetim mekanizmasını nasıl kurabileceğinizi öğreneceğiz. 1. Kullanıcı Rızası (Consent) Neden Önemli? Web sitenize giren bir kullanıcının davranışlarını takip etmek, aslında onun kişisel verilerine dokunmak demektir. İşte rıza almanız için 3 temel sebep: Yasal Uyumluluk (KVKK & GDPR): Türkiye’de KVKK , Avrupa’da ise GDPR yasaları, kullanıcıların çerezler (cookies) aracılığıyla takip edilmeden önce bilgilendirilmesini ve onayının alınmasını şart koşar. Dijital Etik ve Güven: Ziyaretçilerinize verilerini nasıl kullandığınızı sormak, markanızın şeffaflığını ve profesyonelliğini gösterir. Veri Kalitesi: Google’ın yeni Con...
Yorum Gönder
Devamı