تصميم الويب السريع الاستجابة

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

يعمل التصميم السريع الاستجابة على توفير رمز موحّد لجميع الأجهزة، ما يساعد على التكيف مع حجم الشاشة.

TL;DR

  • استخدِم العلامة meta name="viewport" لإعلام المتصفّح بطريقة ضبط المحتوى.
  • راجع أساسيات الويب للاطّلاع على مزيدٍ من الوثائق.

استخدام العلامة الوصفية name="viewport"

لإرسال إشارة إلى المتصفِّحات بأنّه سيتم ضبط الصفحة بحيث تتناسب مع جميع الأجهزة، عليك إضافة العلامة الوصفية إلى رأس المستند.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

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

بالنسبة إلى الصور السريعة الاستجابة، يُمكنك تضمين العنصر <picture>.

كقاعدة عامة، إذا كان موقعك يعمل بمتصفح حديث مثل Google Chrome أو Apple Mobile Safari، فذلك يعني أنه سيعمل مع خوارزمياتنا.

أسباب أهمية التصميم السريع الاستجابة

نوصي باستخدام التصميم السريع الاستجابة للأسباب التالية:

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

إذا كنت تهتم بتصميم الويب السريع الاستجابة، يُمكنك البدء بالاطّلاع على مشاركة المدونة التابعة لنا في "مجموعة خدمات مشرفي المواقع" والانتقال إلى موقع أساسيات الويب الإلكتروني.

جافا سكريبت

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

يصف هذا القسم طُرُقًا مختلفة لاستخدام جافا سكريبت ومدى ارتباطها بتوصيات Google باستخدام تصميم الويب السريع الاستجابة.

عمليات الضبط الشائعة

ثلاث طرق لتطبيق لجافا سكريبت للمواقع المناسبة للجوّال:

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

في ما يلي نلقي نظرة على كل عملية ضبط من هذه العمليات بالتفصيل.

التوافق مع جافا سكريبت

من خلال عملية الضبط هذه، يعرض عنوان URL المحتويات نفسها (HTML وCSS وجافا سكريبت وصورة) لكل الأجهزة. وفقط عندما يتم تنفيذ جافا سكريبت على الجهاز، يتم تعديل طريقة عرض أو أسلوب عمل الموقع. ويعتبر هذا مماثلاً لطريقة عمل تصميم الويب السريع الاستجابة باستخدام الاستعلامات عن وسائط CSS.

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

وهذا الضبط مرتبط إلى حد كبير بتصميم الويب السريع الاستجابة ويمكن لخوارزمياتنا اكتشاف هذا الإعداد تلقائيًا. علاوة على ذلك، ليست لهذه التهيئة متطلب متعلق برأس Vary HTTP لأن عناوين URL للصفحة وأصولها لا تعرض المحتوى ديناميكيًا. وبسبب هذه المزايا، إذا كان موقعك الإلكتروني يتطلب استخدام جافا سكريبت، فهذه هي التهيئة التي نوصي بها.

الاكتشاف المختلَط لإمكانيات الجهاز

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

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

ولأن الخادم يعرض رمز HTML مختلفًا لوكلاء مستخدم مختلفين، يُعتبر الاكتشاف المختلط لإمكانيات الجهاز نوعًا من ضبط العرض الديناميكي. وقد تم توضيح التفاصيل بالكامل في قسم العرض الديناميكي، ولكن لتلخيصها بإيجاز، يجب على الموقع الإلكتروني تضمين رأس استجابة HTTP‏ "Vary: User-agent" عند طلب عنوان URL يوفّر محتوى HTML مختلفًا لمختلف وكلاء المستخدم.

رموز جافا سكريبت المعروضة ديناميكيًا

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

في هذه الحالة، نقترح عرض ملف جافا سكريبت مع رأس HTTP‏ "Vary: User-agent". وهذه إشارة إلى ذاكرات الإنترنت المؤقتة وGooglebot بأن شفرة جافا سكريبت يمكن أن تختلف باختلاف وكلاء المستخدم، كما أنها إشارة إلى Googlebot بالزحف إلى ملف جافا سكريبت باستخدام وكلاء مستخدم مختلفين لبرنامج Googlebot.