Web sitenizin yeni bir ziyaretçi türü var. Bazı kullanıcılar, manuel gezinmeden hedef odaklı yolculukları yapay zeka aracılarının yönetmesine geçiş yapıyor. Bu otonom sistemler, girişleri yorumlayabilir, plan yapabilir ve kullanıcı adına işlemleri gerçekleştirebilir.
Ancak web sitelerimizin çoğu, karmaşık fareyle üzerine gelme durumları, değişen düzenler ve akıcı hareketlerle insanlara hitap edecek şekilde tasarlanır. Bu işlev, temsilciler için çalışmıyor.
Temsilciler sitenizi nasıl görüntüler?
Temsilciler, web sitenize monitörden bakmaz. Sitenizin makine tarafından okunabilir bir gösterimi üzerinde çalışırlar. Bu temsilin kalitesi, performanslarını belirler.
Temsilciler, web sitenizi 3 temel şekilde görüntüleyebilir: ekran görüntüleri, ham HTML ve erişilebilirlik ağacı.
Ekran görüntüleri
Aracı, oluşturulan sayfanın anlık görüntüsünü alır ve öğeleri tanımlamak için bir görsel model kullanır. Ekran görüntüsüne göre, aracı sağ üstteki arama çubuğunun genel arama olduğunu, ortadaki kutunun ise büyük olasılıkla bir form alanı olduğunu anlayabilir. Temsilciler, önem derecesini belirlemek için renk, boyut ve yakınlık gibi görsel ipuçlarından yararlanabilir. Büyük bir Sil düğmesi, küçük bir "Yardım" bağlantısına kıyasla daha dikkatli bir şekilde yorumlanabilir. Ancak ekran görüntülerini analiz etmek yavaş ve maliyetli (kullanılan jetonlar açısından) olabilir. Bu nedenle, yapının kafa karıştırıcı olduğu durumlarda yedek olarak kullanılması daha uygundur.
HTML
Temsilci, DOM'u analiz eder ve HTML'yi okur. Öğelerin nasıl iç içe yerleştirildiğini, DOM ağacının mantıksal hiyerarşisini, yapıyı tanımlayan kimlikler ve sınıflar gibi özellikleri ve sitenin bilgi omurgasını oluşturan ham veri dizelerini anlar. Bu, temsilcinin öğeler arasındaki ilişkiyi anlamasına yardımcı olur. Bir ürün kapsayıcısının içinde "Hemen Satın Al" düğmesi varsa aracı, bu düğmenin o ürüne ait olduğunu varsayar.
Erişilebilirlik ağacı
Erişilebilirlik ağacı, DOM'u en önemli öğelere (roller, adlar ve etkileşimli öğelerin durumları) dönüştüren tarayıcıya özgü bir API'dir. Bu, sayfanın anlamsal özetidir ve yardımcı teknoloji tarafından kullanılır. Yapay zeka aracısı için, saf faydaya odaklanmak üzere CSS'nin görsel "gürültüsünü" yok sayan, son ürünün tasarıma uygunluğu yüksek bir harita işlevi görür. Bir temsilci, bu ağacı yorumlayarak her açma/kapatma düğmesinin, kaydırma çubuğunun ve giriş alanının işlevsel amacını öğrenebilir.
Birleştirilmiş yöntemler
Tek bir girişe güvenmek anlamsal bir boşluk oluşturur. Örneğin, DOM'da bir aracı, CSS ve JavaScript ile işlevsel bir düğme olarak yapılandırdığınızı bilmeden <div> görebilir. Ekran görüntülerinde, temsilci düğmenin ekrandaki yerini belirleyebilir ancak düğmenin amaçlanan hedefi veya tetiklemek üzere tasarlandığı işlem hakkında bilgi sahibi olamaz.
Bu nedenle modern temsilciler birden fazla modaliteyi birleştirir. Etkileşimli öğelerin temiz ve yapılandırılmış bir listesini almak için DOM'u ve erişilebilirlik ağacını kullanır, ardından düzeni, gruplandırmayı ve görsel ipuçlarını anlamak için bunu görsel bir oluşturmayla çapraz referans verirler.
Görevimiz, bu kanalların tümünde temiz sinyaller sağlamaktır.
Ajan dostu web siteleri oluşturun
Temsilcilerin web sitenizde gezinmesine yardımcı olmak için aşağıdakileri göz önünde bulundurun:
- Gerçek bir kişi veya temsilci tarafından gerçekleştirilen tüm gerekli işlemler arayüze açıkça yansıtılmalıdır.
- Düzenin sabit olduğundan emin olun. Web sitenizin düzeni sürekli değişiyorsa (ör. ürün sayfasındaki Sepete ekle düğmesi her ürün kategorisinde farklı bir konumdaysa) ekran görüntüsü alan aracılar büyük ihtimalle kafası karışır.
- Etkileşimli öğeleri gizleyebilecek "hayalet" öğelerden veya şeffaf yer paylaşımlarından kaçının. Aracı tarafından yapılan görsel analiz, şeffaf görünse bile kapalı olan düğümleri atabilir.
- Semantik HTML ile işlem yapılabilir öğeler tasarlayın. Değiştirilmiş
<div>ve<span>öğeleri yerine<button>ve<a>etiketlerini tercih edin. Aracılar bunları etkileşimli olarak tanır.- Semantik HTML kullanamıyorsanız öğeye her zaman uygun
rolevetabindexözelliklerini ekleyin. Örneğin,<div role="button">.
- Semantik HTML kullanamıyorsanız öğeye her zaman uygun
- CSS'de
cursor: pointerdeğerini ayarlayın. Bu, işlem yapılabilirliğe dair güçlü bir sinyaldir. - Girişlere bağlamak için
<label>etiketlerineforözelliğini ekleyin. Bu, yapay zeka aracısının, işlem dizesine doğrudan eklenen etiket metnini belirterek bir alanın amacını anlamasına yardımcı olur. - Kullanıcı yolculuğuna devam etmek için gereken etkileşimli öğelerin, görsel analiz tarafından filtrelenmemek için 8 piksel kareden büyük görünür bir alana sahip olduğundan emin olun.
Sonraki adımlar
Bir siteyi "aracıya hazır" hale getirmek için önerdiğimiz her şey, siteleri insanlar için de daha iyi hale getirir.
Web sitelerini yapay zeka aracısı dostu hale getirmek, iyi yapılandırılmış, erişilebilir ve semantik web siteleri oluşturmanın temel ilkelerine yeniden bağlı kalmak için bir teşviktir.
- Web sitelerinin aracılarla etkileşim kurmasına yardımcı olmak için önerilen bir web standardı olan WebMCP hakkında bilgi edinin ve denemeye başlamak için erken erişim programına kaydolun.
- Erişilebilirlik ağacınızı denetleyin: Sitenizin hiyerarşisinin makine tarafından okunabilir ve kararlı olduğundan emin olmak için mevcut araçları kullanın.