تصميم الويب السريع الاستجابة
السلام عليكم ورحمة الله وبركاته
مدونة كن محترف
إرسال إشارة بالتهيئة إلى محركات البحث
يعني تهيئة مدونتك الى جميع محركات البحث
السلام عليكم ورحمة الله وبركاته
مدونة كن محترف
إرسال إشارة بالتهيئة إلى محركات البحث
يعني تهيئة مدونتك الى جميع محركات البحث
تصميم الويب السريع الاستجابة
يُعدّ تصميم الويب السريع الاستجابة (RWD) عملية إعداد يُرسل فيها الخادم دائمًا نفس شفرة HTML إلى جميع الأجهزة، ويتم استخدام CSS لتغيير عرض الصفحة على الجهاز.
تمتلك خوارزميات Google القدرة على اكتشاف عملية الإعداد هذه عند السماح لجميع وكلاء مستخدم Googlebot بالزحف إلى الصفحة ومواد العرض (CSS وجافا سكريبت والصور).
المهم الان اضافة العلامة الوصفية الى قالب موقعك
تزهب الى :
- لوحة التحكم
- قالب
- تحرير html
يعمل تصميم الويب السريع الاستجابة على توفير نفس الشفرة لجميع الأجهزة والتي تساعد على التكيف مع حجم الشاشة.
هذه العلامة الوصفية تضاف مع علامات meta
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ملحوظة تحسين مدونتك لمحرك بحث الجوال فى بعض الاحيان قد تكون العلامة الوصفية موجودة فى مدونتك
شاهد مثالاً على التغيرات بعض اضافة العلامة الوصفية
مثالاً
تحسين مدونتك لمحرك بحث الجوال
فوائد العلامة الصفية
تعطي علامة viewport الوصفية إرشادات للمتصفّح حول كيفية ضبط الأبعاد وقياس الصفحة وفقًا لحجم الجهاز. وعند غياب عنصر viewport الوصفي، تعرض متصفّحات الجوال الصفحة بشكل افتراضي بحجم شاشة سطح المكتب (عادة ما تكون حوالي 980 بكسل، ومع ذلك تختلف باختلاف الأجهزة). وبعد ذلك تحاول متصفّحات الجوّال تحسين مظهر المحتوى عبر زيادة حجم الخط، ثم ضبط قياس المحتوى ليناسب الشاشة أو الاقتصار على عرض الجزء من المحتوى الذي يناسب الشاشة.
بالنسبة إلى المستخدمين، أن أحجام الخطوط قد تبدو متفاوتة، وقد يضطر المستخدمون إلى النقر المزدوج أو القرص للتكبير/التصغير حتى يتسنى لهم الاطلاع على المحتوى والتفاعل معه. وبالنسبة إلى Google، قد لا نقيّم صفحة باعتبارها متوافقة مع الجوّال نظرًا لأنها تطلب هذا النوع من التفاعل على جهاز الجوّال.
في الجانب الأيسر يتم عرض صفحة لا تتضمن علامة viewport وصفية - ومن ثمّ يفترض متصفّح الجوّال عرض جهاز سطح المكتب ويضبط الصفحة على أن تتناسب مع الشاشة، الأمر الذي يصعب معه قراءة المحتوى. وعلى اليمين يتم عرض الصفحة ذاتها ولكن مع تحديد viewport الذي يطابق عرض الجهاز - ومن ثمّ لا يعمل متصفّح الجوّال على ضبط المحتوى، حيث يكون المحتوى قابلاً للقراءة.
هااام جداً
أسباب أهمية التصميم السريع الاستجابة بالنسبة لجوجل
يوصي جوجل باستخدام التصميم السريع الاستجابة للأسباب التالية:
يُسهّل على المستخدمين مشاركة المحتوى والربط معه باستخدام عنوان URL مفرد.
يساعد خوارزميات Google على تعيين خصائص الفهرسة بدقة إلى الصفحة بدلاً من الحاجة إلى الإشارة إلى وجود صفحات سطح المكتب / الجوّال المماثلة.
يتطلب وقتًا أقل في العملية الهندسية لإصلاح العديد من الصفحات لنفس المحتوى.
يُقلل من احتمال الأخطاء الشائعة التي تؤثر على مواقع الجوّال.
لا يتطلب أي توجيه للمستخدمين باستخدام عرض جهاز محسّن، مما يقلل من وقت التحميل. يجب أيضًا توضيح أن عمليات إعادة التوجيه استنادًا إلى وكيل المستخدم عرضة للأخطاء ويمكن أن تترك انطباعًا سيئًا لدى المستخدم عن موقعك (راجع قسم "المخاطر التي قد تنجم عند اكتشاف وكلاء المستخدم" للحصول على تفاصيل).
يوفّر الموارد عند زحف Googlebot إلى موقعك. وبالنسبة إلى صفحات تصميم الويب السريع الاستجابة، يلزم زحف وكيل مستخدم Googlebot واحد إلى صفحتك مرة واحدة، بدلاً من زحف العديد من وكلاء مستخدم Googlebot عدة مرات لاسترداد جميع إصدارات المحتوى. ويعمل هذا التحسّن في كفاءة الزحف على مساعدة Google بطريق غير مباشر في فهرسة مزيد من محتوى موقعك والحفاظ على تحديثه بشكل مناسب.
لرؤية كيف يظهر موقعك على الجوال
شاهد مثالاً على التغيرات بعض اضافة العلامة الوصفية
مثالاً
فوائد العلامة الصفية
تعطي علامة viewport الوصفية إرشادات للمتصفّح حول كيفية ضبط الأبعاد وقياس الصفحة وفقًا لحجم الجهاز. وعند غياب عنصر viewport الوصفي، تعرض متصفّحات الجوال الصفحة بشكل افتراضي بحجم شاشة سطح المكتب (عادة ما تكون حوالي 980 بكسل، ومع ذلك تختلف باختلاف الأجهزة). وبعد ذلك تحاول متصفّحات الجوّال تحسين مظهر المحتوى عبر زيادة حجم الخط، ثم ضبط قياس المحتوى ليناسب الشاشة أو الاقتصار على عرض الجزء من المحتوى الذي يناسب الشاشة.
بالنسبة إلى المستخدمين، أن أحجام الخطوط قد تبدو متفاوتة، وقد يضطر المستخدمون إلى النقر المزدوج أو القرص للتكبير/التصغير حتى يتسنى لهم الاطلاع على المحتوى والتفاعل معه. وبالنسبة إلى Google، قد لا نقيّم صفحة باعتبارها متوافقة مع الجوّال نظرًا لأنها تطلب هذا النوع من التفاعل على جهاز الجوّال.
في الجانب الأيسر يتم عرض صفحة لا تتضمن علامة viewport وصفية - ومن ثمّ يفترض متصفّح الجوّال عرض جهاز سطح المكتب ويضبط الصفحة على أن تتناسب مع الشاشة، الأمر الذي يصعب معه قراءة المحتوى. وعلى اليمين يتم عرض الصفحة ذاتها ولكن مع تحديد viewport الذي يطابق عرض الجهاز - ومن ثمّ لا يعمل متصفّح الجوّال على ضبط المحتوى، حيث يكون المحتوى قابلاً للقراءة.
هااام جداً
أسباب أهمية التصميم السريع الاستجابة بالنسبة لجوجل
يوصي جوجل باستخدام التصميم السريع الاستجابة للأسباب التالية:
يُسهّل على المستخدمين مشاركة المحتوى والربط معه باستخدام عنوان URL مفرد.
يساعد خوارزميات Google على تعيين خصائص الفهرسة بدقة إلى الصفحة بدلاً من الحاجة إلى الإشارة إلى وجود صفحات سطح المكتب / الجوّال المماثلة.
يتطلب وقتًا أقل في العملية الهندسية لإصلاح العديد من الصفحات لنفس المحتوى.
يُقلل من احتمال الأخطاء الشائعة التي تؤثر على مواقع الجوّال.
لا يتطلب أي توجيه للمستخدمين باستخدام عرض جهاز محسّن، مما يقلل من وقت التحميل. يجب أيضًا توضيح أن عمليات إعادة التوجيه استنادًا إلى وكيل المستخدم عرضة للأخطاء ويمكن أن تترك انطباعًا سيئًا لدى المستخدم عن موقعك (راجع قسم "المخاطر التي قد تنجم عند اكتشاف وكلاء المستخدم" للحصول على تفاصيل).
يوفّر الموارد عند زحف Googlebot إلى موقعك. وبالنسبة إلى صفحات تصميم الويب السريع الاستجابة، يلزم زحف وكيل مستخدم Googlebot واحد إلى صفحتك مرة واحدة، بدلاً من زحف العديد من وكلاء مستخدم Googlebot عدة مرات لاسترداد جميع إصدارات المحتوى. ويعمل هذا التحسّن في كفاءة الزحف على مساعدة Google بطريق غير مباشر في فهرسة مزيد من محتوى موقعك والحفاظ على تحديثه بشكل مناسب.
لرؤية كيف يظهر موقعك على الجوال
مدونة : كن محترف
الموضوع: تحسين مدونتك للجوال
المصدر : Developers Google
مواضيع قد تهمك
مع تمنياتي لكم بالنجاح والتفوق
أزال أحد مشرفي المدونة هذا التعليق.
ردحذفأزال المؤلف هذا التعليق.
ردحذف