Erişilebilirlik için AJAX destekli siteler tasarlama

Birçok web yöneticisi sitelerindeki kullanıcı deneyimini artırmaya, etkili web uygulamaları gibi dinamik sayfalar oluşturmaya yönelik AJAX kullanma avantajlarını keşfetmiştir. Ancak teknoloji dikkatli bir şekilde uygulanmadığı taktirde, Flash gibi AJAX da, bir sitenin arama motorları tarafından dizine eklenmesini zorlaştırabilir. AJAX ile ilgili iki ana arama motoru sorunu vardır: Arama motoru bot'larının içeriğinizi görebilmelerini sağlamak ve gezinmenizi görebilmelerini ve izleyebilmelerini sağlamak.

Googlebot, HTML bağlantılarının yapısını anlama konusunda mükemmel olmasına karşın, gezinme için JavaScript kullanan sitelerde yolunu bulma konusunda güçlük çekebilir. JavaScript’i anlama konusunda iyi bir iş çıkarmaya çalışıyoruz, ancak sizin Google ve diğer arama motorları tarafından taranabilen bir site oluşturmaya yönelik en iyi çözümünüz, içeriğinize HTML bağlantıları vermektir.

Erişilebilirlik tasarımı

Web yöneticilerine, sayfaları sadece arama motorlarına değil, kullanıcılara da yönelik olarak hazırlamalarını öneriyoruz. AJAX sitenizi tasarlarken, JavaScript uyumlu tarayıcılar kullanamayan kullanıcılar da (örneğin, ekran okuyucuları veya mobil cihazlar kullanan kişiler) dahil olmak üzere, kullanıcılarınızın ihtiyaçlarını düşünün. Sitenizin erişilebilirliğini test etmenin en kolay yollarından birisi, JavaScript devre dışıyken sitenin önizlemesini gerçekleştirmek veya Lynx gibi bir salt metin tarayıcısında siteyi görüntülemektir. Bir siteyi salt metin olarak görüntülemek, resimlere veya Flash’a katıştırılmış metin gibi Googlebot’un görmekte zorluk çektiği diğer içeriği de tanımlamanıza yardımcı olacaktır.

iFrames'ten Kaçının ya da içeriklerine ayrı olarak bağlantı verin

iFrames yoluyla görüntülenen içerik dizine eklenmeyebilir ve Google'ın arama sonuçlarında görüntülenmeyebilir. İçerik görüntülemek için iFrames kullanmaktan kaçınmanızı öneririz. İç Çerçeveler eklerseniz, Googlebot'un bu içeriği tarayabilmesi ve dizine ekleyebilmesi için çerçevelerin görüntüledikleri içeriğe ek metne dayalı bağlantılar sağlamayı unutmayın.

Aşamalı ilerleme ile geliştirme

Sıfırdan başlıyorsanız, sitenizin yapısını ve gezinme sistemini oluşturmak sadece HTML ile oluşturmak iyi bir yaklaşım olacaktır. Sitenizin sayfalarını, bağlantılarını ve içeriğini yerleştirdikten sonra da, AJAX ile görünümde ve arayüzde düzeltmeler yapabilirsiniz. Modern tarayıcılara sahip kullanıcılar AJAX'ın sunduğu avantajların keyfini çıkarırken Googlebot da HTML'yi memnuniyetle kabul edecektir.

Elbette, Ajax işlevselliği için JavaScript gerektiren bağlantılarınız olacaktır. Web geliştiricisi Jeremy Keith bu tekniği Hijax olarak adlandırmıştır ve bu teknik, AJAX ile statik bağlantıların birlikte kullanılmasını sağlamanın bir yoludur.

Bağlantılarınızı oluştururken, onları, JavaScript işlevi çağırmalarının yanı sıra statik bir bağlantı da sunacak şekilde biçimlendirin. Bu yolla, JavaScript kullanıcıları için AJAX işlevselliğine sahip olursunuz ve JavaScript kullanıcısı olmayanlar da komut dizisini yok sayıp bağlantıyı izleyebilirler. Örneğin:

<a href="ajax.htm?foo=32" onClick="navigate('ajax.html#foo=32');
 return false">foo 32</a>

Statik bağlantının URL'sinde bir parça (#foo=32) değil, AJAX kodu tarafından kullanılan bir parametre (?foo=32) bulunduğuna dikkat edin. Arama motorlarının URL parametrelerini tanıyıp, kod parçalarını genellikle yok saymaları nedeniyle, bu önemli bir husustur. Artık statik bağlantılar sunduğunuz için, kullanıcılar ve arama motorları paylaşmak veya başvurmak istedikleri içeriğe bağlantı verebilirler.

Tarama kabiliyetimizi sürekli geliştirmemize rağmen, HTML bağlantılarının kullanımı sitenizin yapısını daha iyi anlamamıza (ve diğer arama motorlarının, mobil cihazların ve kullanıcıların da daha iyi anlamasına) yardımcı olan etkin bir yöntem olarak kalmaktadır.

Yönergeleri izleyin

Bir sitenin Google ve kullanıcılarınız için iyi olmasını sağlayabilen şeylerin neler olduğu konusunda daha fazla bilgi için burada açıklanan ipuçlarına ek olarak, Web Yöneticisi Yönergelerimizi de incelemenizi öneririz. Yönergeler, gizli JavaScript yönlendirmeleri dahil olmak üzere, kaçınılması gereken bazı uygulamalara da işaret etmektedir. Uyulması gereken genel bir kural, kullanıcılara kapasitelerine göre farklı deneyimler sunarken, içeriğin aynı kalması gerektiğidir. Örneğin, Wysz'nin Hamster Çiftliği için bir sayfa oluşturduğumuzu düşünelim. Sayfanın en üstünde "Wysz'nin Hamster Çiftliği" başlığı ve altında da en son gelen hamsterların AJAX destekli slayt gösterisi bulunmaktadır. Aynı sayfada JavaScript’in devre dışı bırakılması, aşağıdaki ek metni görüntüleyerek kullanıcıyı şaşırtmamalıdır:

Wysz'ın Hamster Çiftliği -- hamster'lar, en iyi hamster'lar, ucuz hamster'lar, bedava hamster'lar, evcil hayvanlar, çiftlikler, hamster yetiştirenler, dans eden hamster'lar, kemirgenler, hampster'lar, hamser'lar, en iyi hamster kaynağı, evcil hayvan oyuncakları, dans dersleri, şirin, hamster ipuçları, evcil hayvan yemi, hamster ortamı, hamster oteller, hamster doğum günü hediyesi fikirleri ve daha fazlası!

Daha iyi bir uygulama, JavaScript etkinleştirilsin veya etkinleştirilmesin aynı metni görüntüler, üstelik en iyi senaryoya göre JavaScript kullanıcısı olmayan kullanıcılara slayt gösterisinin HTML sürümünü sunar. Gizli metin hakkında daha fazla bilgi.

Bu size yardımcı oldu mu?
Bunu nasıl iyileştirebiliriz?