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

يُعدّ تصميم الويب السريع الاستجابة (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.

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