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

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

يعمل "التصميم سريع الاستجابة" على عرض الرموز نفسها لجميع الأجهزة بطريقة تتكيف مع حجم الشاشة.

TL;DR

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

استخدام meta 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.

إرسال تعليقات حول...