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, kullanıcı adına girişleri yorumlayabilir, planlayabilir ve 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 tasarlanmıştır. Bu işlev, temsilciler için çalışmamaktadır.
Ajanlar sitenizi nasıl görüntüler?
Temsilciler web sitenizi monitörde görmez. 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, önemi 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ı, tarayıcıya özgü bir API'dir. DOM'u en önemli öğelere (roller, adlar ve etkileşimli öğelerin durumları) indirger. Bu, yardımcı teknoloji tarafından kullanılan sayfanın anlamsal özetidir. Bir yapay zeka aracısı için, CSS'nin görsel "gürültüsünü" yok sayarak tamamen faydaya odaklanan yüksek doğruluklu bir harita görevi 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, bir temsilci düğmenin ekranda nerede bulunduğunu belirleyebilir ancak düğmenin amaçlanan hedefi veya tetiklemek üzere tasarlandığı işlem hakkında bilgi sahibi olamaz.
Bu nedenle modern ajanlar 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 bu listeyi görsel bir oluşturmayla çapraz referans verir.
Görevimiz, bu kanalların tümünde net 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 temsilciler 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 göz ardı edebilir.
- Semantik HTML ile işlem yapılabilir öğeler tasarlayın. Değiştirilmiş
<div>ve<span>öğeleri yerine<button>ve<a>etiketlerini tercih edin. Ajanlar bunları etkileşimli olarak tanır.- Semantik HTML kullanamıyorsanız öğeye her zaman uygun
rolevetabindexdeğerlerini sağlayın. Ö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 tüm etkileşimli öğelerin, görsel analiz tarafından filtrelenmemek için 8 kare pikselden büyük görünür bir alana sahip olduğundan emin olun.
Sonraki adımlar
Bir siteyi "ajanlara hazır" hale getirmek için önerdiğimiz her şey, siteleri insanlar için de daha iyi kılar.
Web sitelerini yapay zeka ajanlarıyla uyumlu 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 ajanlarla 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.