إنشاء مواقع إلكترونية متوافقة مع برامج الزحف

Kasper Kulikowski

Omkar More

يتضمّن موقعك الإلكتروني نوعًا جديدًا من الزوّار. يتّجه بعض المستخدمين البشريين من التنقّل اليدوي إلى تفويض رحلات موجّهة نحو تحقيق أهداف إلى وكلاء يعملون بالذكاء الاصطناعي. يمكن لهذه الأنظمة المستقلة تفسير المدخلات والتخطيط وتنفيذ الإجراءات نيابةً عن المستخدم.

ومع ذلك، تم تصميم العديد من مواقعنا الإلكترونية لتكون جذابة للمستخدمين، مع حالات معقّدة عند التمرير، وتصاميم متغيرة، وحركة سلسة. هذه الميزة لا تعمل بشكل صحيح مع الوكلاء.

الطريقة التي ترى بها البرامج الآلية موقعك الإلكتروني

لا ينظر الوكلاء إلى موقعك الإلكتروني على شاشة. وهي تعمل على تمثيل قابل للقراءة آليًا لموقعك الإلكتروني. وتحدّد جودة هذا التمثيل مستوى أدائها.

يمكن للوكلاء الاطّلاع على موقعك الإلكتروني بثلاث طرق أساسية: لقطات الشاشة ورمز HTML الأولي وشجرة تسهيل الاستخدام.

لقطات الشاشة

يلتقط الوكيل لقطة للصفحة المعروضة ويستخدم نموذجًا مرئيًا لتحديد العناصر. استنادًا إلى لقطة الشاشة، يمكن للوكيل التعرّف على أنّ شريط البحث في أعلى اليسار هو بحث عام، بينما المربّع في المنتصف هو على الأرجح حقل نموذج. يمكن أن تكون الإشارات المرئية مفيدة، إذ يمكن للوكلاء استخدام اللون والحجم والقرب لتحديد الأهمية. من المرجّح أن يتم التعامل مع زر حذف كبير بحذر أكبر من رابط "مساعدة" صغير. ومع ذلك، يمكن أن يكون تحليل لقطات الشاشة بطيئًا ومكلفًا (من حيث الرموز المميزة المستخدَمة)، ما يجعله خيارًا احتياطيًا أفضل عندما يكون الهيكل مربكًا.

HTML

يحلّل الوكيل نموذج المستند (DOM) ويقرأ HTML. يفهم هذا النظام كيفية تضمين العناصر، والتسلسل الهرمي المنطقي لشجرة نموذج العناصر في المستند، والسمات مثل المعرّفات والفئات التي تحدّد البنية، وسلاسل البيانات الأولية التي تشكّل البنية الأساسية للمعلومات في الموقع الإلكتروني. يساعد ذلك الوكيل على فهم العلاقة بين العناصر.

إذا كان زر الشراء الآن داخل حاوية منتج، يفترض الوكيل أنّ الزر يخصّ هذا المنتج المحدّد.

شجرة تسهيل الاستخدام

شجرة تسهيل الاستخدام هي واجهة برمجة تطبيقات أصلية في المتصفح تعمل على تلخيص نموذج المستند (DOM) في أهم العناصر، وهي الأدوار والأسماء والحالات الخاصة بالعناصر التفاعلية. وهو عبارة عن ملخّص دلالي للصفحة تستخدمه التكنولوجيا المساعِدة. بالنسبة إلى وكيل الذكاء الاصطناعي، يعمل هذا المخطط كخريطة عالية الدقة تتجاهل "التشويش" المرئي الناتج عن CSS للتركيز على الفائدة المجردة. ومن خلال تفسير هذه الشجرة، يمكن للوكيل التعرّف على الغرض الوظيفي لكل زر تبديل وشريط تمرير وحقل إدخال.

أدوات WebMCP

WebMCP هو معيار ويب مقترَح لسدّ الفجوة بين المواقع الإلكترونية والوكلاء، وذلك من خلال مشاركة الأغراض والمهام الواضحة مع الوكلاء. ويتم ذلك من خلال تحديد الأدوات، وهي عبارة عن تعليقات توضيحية بلغة JavaScript أو HTML. تفسّر البرامج الآلية هذه الأدوات بشكل أسرع وأكثر دقةً من التنشيط العادي.

يمكن استخدام أدوات WebMCP لتقديم دعم العملاء والتجارة الإلكترونية والاستكشاف وغير ذلك. بعض الإجراءات حسّاسة، مثل إجراء عملية شراء. يمكنك تضمين أمر لطلب تفاعل المستخدم مع مربّع حوار التأكيد.

يمكنك التعرّف على حالات استخدام WebMCP وكيفية إنشاء أدوات فعّالة.

الوسائل المجمّعة

الاعتماد على إدخال واحد يؤدي إلى حدوث فجوة دلالية. على سبيل المثال، في نموذج DOM، قد يرى وكيل <div> بدون أن يعرف أنّك ضبطت هذا العنصر كزر وظيفي باستخدام CSS وJavaScript. باستخدام لقطات الشاشة، قد يتمكّن أحد العملاء من تحديد موضع الزر على الشاشة، ولكنّه سيظل غير مدرك للوجهة المقصودة للزر أو الإجراء الذي تم تصميمه لتشغيله.

لذلك، تجمع الوكلاء الحديثون بين وسائط متعددة. يستخدمون نموذج المستند (DOM) وشجرة تسهيل الاستخدام للحصول على قائمة منظَّمة وواضحة بالعناصر التفاعلية، ثم المقارنة بين مصادر بيانات متعددة مع عرض مرئي لفهم التنسيق والتجميع والإشارات المرئية.

مهمتنا هي تقديم إشارات واضحة على جميع هذه القنوات.

إنشاء مواقع إلكترونية متوافقة مع برامج الزحف

لمساعدة البرامج الآلية في التنقّل في موقعك الإلكتروني، يجب أن تنعكس بوضوح في واجهة الموقع جميع الإجراءات التي يجب أن يتّخذها المستخدم أو البرنامج الآلي. في ما يلي بعض أفضل الممارسات:

• تجنُّب العناصر الوهمية: تجنَّب العناصر المركّبة الشفافة التي تحجب العناصر التفاعلية. قد يتجاهل التحليل المرئي الذي يجريه البرنامج المساعد العُقد التي تم تغطيتها، حتى إذا بدت العقدة شفافة.
• استخدام ترميز HTML الدلالي: تصميم عناصر قابلة للتنفيذ باستخدام ترميز HTML الدلالي على سبيل المثال، استخدِم علامتَي <button> و<a> بدلاً من العنصرَين <div> و<span> المعدَّلين. تتعرّف البرامج الآلية على النوع الأول باعتباره عناصر تفاعلية.
  • إذا تعذّر عليك استخدام HTML الدلالي، احرص دائمًا على تزويد العنصر بالسمتَين role وtabindex المناسبتَين. على سبيل المثال، <div role="button">.
  • أضِف السمة for إلى علامات <label> لربطها بحقول الإدخال. يساعد ذلك وكيل الذكاء الاصطناعي على فهم الغرض من الحقل من خلال الإشارة إلى نص التصنيف المرفق مباشرةً بسلسلة الإجراء.
• استخدام CSS للإشارات المرئية اضبط cursor: pointer في CSS، وهي إشارة قوية إلى إمكانية اتّخاذ إجراء.
• استيفاء الحدّ الأدنى للحجم المطلوب لإجراء التحليل المرئي تأكَّد من أنّ أي عناصر تفاعلية مطلوبة لإكمال إجراء ما مرئية وأكبر من 8 وحدات بكسل مربّعة، وذلك لتجنُّب استبعادها في التحليل المرئي للنموذج.
• ضمان ثبات التنسيق: من المحتمل أن تواجه البرامج التي تلتقط لقطات شاشة صعوبة إذا كان تخطيط موقعك الإلكتروني يتغيّر باستمرار، مثلاً عندما يكون زر الإضافة إلى سلة التسوّق في صفحة المنتج في موقع مختلف لكل فئة منتجات.
• إنشاء أدوات WebMCP لتحديد المهام والإجراءات الواضحة للوكلاء الذين تتوافق معهم واجهة برمجة التطبيقات

الخطوات التالية

إنّ كل ما نقترحه لجعل الموقع الإلكتروني "متوافقًا مع البرامج الآلية" يساهم أيضًا في تحسينه للمستخدمين.

إنّ جعل المواقع الإلكترونية متوافقة مع وكلاء الذكاء الاصطناعي يشكّل حافزًا لإعادة الالتزام بالمبادئ الأساسية لإنشاء مواقع إلكترونية منظَّمة بشكل جيد وسهلة الوصول إليها ودلالية.

• تدقيق شجرة تسهيل الاستخدام: استخدِم الأدوات الحالية للتأكّد من أنّ التسلسل الهرمي لموقعك الإلكتروني قابل للقراءة آليًا وثابت.
• مزيد من المعلومات حول WebMCP، وهو معيار ويب مقترح لمساعدة المواقع الإلكترونية في التفاعل مع الوكلاء. تتوفّر واجهات برمجة التطبيقات هذه للتجربة في بيئة الإنتاج في Chrome، وذلك من خلال مرحلة التجربة والتقييم.