بطّل تخمّن جوجل بيعمل ريندر للجافاسكريبت بتاعك ولا لأ

سؤال الريندر (يعني جوجل بيشغّل الجافاسكريبت ويبني الصفحة ولا لأ) بيطلع في كل مراجعة تقنية لأي موقع حديث، وتقريبًا دايمًا الناس بتتجادل فيه بدل ما تختبره. المطوّر بيقول جوجل بيعمل ريندر للجافاسكريبت عادي. والمسوّق قرا إنه لأ. والاتنين بينقلوا من مقالات.

تقدر تحسمها لموقعك بالدليل في حوالي ربع ساعة. ودي التلات اختبارات، وتعمل إيه لو الإجابة طلعت وحشة.

جوجل بيعمل ريندر للصفحة إزاي، خطوة بخطوة

فيه أربع مراحل، والوقت اللي بين كل مرحلة والتانية هو أصل المشكلة.

1. الزحف. Googlebot بيجيب الـHTML الخام اللي السيرفر بيبعته. لسه مافيش حاجة اشتغلت.
2. المعالجة الأولى. الروابط اللي في الـHTML الخام ده بتدخل طابور الزحف على طول. وعلشان كده الروابط اللي بتظهر بس بعد ما الجافاسكريبت يشتغل، جوجل بيلاقيها متأخر، أو ما بيلاقيهاش خالص.
3. الريندر. الصفحة بتستنى في طابور الريندر، ونسخة حديثة من Chromium بتشغّل الجافاسكريبت. زمان ده كان بياخد أيام. دلوقتي غالبًا أسرع بكتير، لكنه لسه خطوة منفصلة ليها طابورها.
4. الفهرسة. اللي بيتفهرس هو الصفحة بعد الريندر.

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

افتكر أربع حاجات عن بوت الريندر، لأن أغلب المشاكل بترجع لواحدة منهم. ما بيدوسش على حاجة، ولا بيلمس الشاشة، ولا بيقف بالماوس على حاجة. ما بيعملش scroll زي البني آدم. ما بيوافقش على بانر الكوكيز ولا بيعمل تسجيل دخول. وكل زيارة بتبدأ من الصفر، مافيش حاجة بتتنقل من اللي قبلها.

الاختبار 1: الـHTML بعد الريندر في فحص الرابط

ده أوثق اختبار عندك، لأنه بيستخدم الريندر بتاع جوجل نفسه، مش أداة بتقلّده.

في Search Console، افحص الرابط، وشغّل الاختبار المباشر، وافتح الصفحة المختبرة واقرا تبويب HTML. ده شكل الصفحة زي ما جوجل بناها بعد الريندر.

تراجع إيه، بالترتيب ده:

• المحتوى الأساسي موجود؟ دوّر في الـHTML على جملة مميزة من نص الصفحة. لو مش موجودة، مافيش حاجة تانية تفرق.
• الروابط الداخلية موجودة كروابط حقيقية؟ دوّر على <a href وعدّهم. الروابط اللي معمولة كـspan بتدوس عليه، بوت الزحف ما بيشوفهاش أصلًا.
• العنوان والوصف هما اللي إنت قاصدهم؟
• بص على السكرين شوت. لو السكرين شوت فاضي أو الصفحة باينة فيه مش مكتملة، والـHTML كامل، فده غالبًا معناه مشكلة توقيت تستاهل تدوّر وراها.
• اقرا موارد الصفحة ورسايل الكونسول. سكريبت محجوب أو خطأ في الجافاسكريبت بيكون هو السبب في حالات أكتر من الفريموورك نفسه.

ملاحظة هتوفّر عليك نقاش كتير: الاختبار المباشر بيستنى الصفحة أكتر من الفهرسة الحقيقية، فصفحة بالكاد بتعدّي الاختبار المباشر ممكن تفشل في الواقع. يعني إنها تعدّي الاختبار شرط، لكن مش كفاية.

الاختبار 2: افتح الصفحة من غير جافاسكريبت

اختبار بسيط وسريع، وبيوريك قد إيه من الصفحة معتمد على الريندر أصلًا.

افتح DevTools، واقفل الجافاسكريبت، واعمل reload. اللي هيفضل قدامك هو تقريبًا الموجود قبل الريندر: اللي Googlebot بيشوفه في المرحلة الأولى، واللي يقدر يتعامل معاه على طول.

قارن view-source: بلوحة Elements لنفس الصفحة. الأول هو الـHTML الخام، والتاني هو الصفحة بعد ما السكريبتات تشتغل. وكل ما الفرق يكبر، الخطر بيكبر.

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

الاختبار 3: ازحف بالطريقتين وقارن

أول اختبارين بيبصوا على صفحة واحدة. الاختبار ده بيبص على الموقع كله، وهنا بتبان مشاكل القوالب.

اعمل زحف للموقع مرتين بنفس الأداة، مرة من غير ريندر للجافاسكريبت ومرة بالريندر، وقارن. وتلات أعمدة هيقولولك تقريبًا كل حاجة:

• الروابط اللي اتلاقت. فرق كبير معناه إن التنقل في موقعك معتمد على الجافاسكريبت.
• عدد الكلمات في الصفحة. فرق كبير معناه إن المحتوى معتمد عليه.
• الروابط الخارجة من كل صفحة. فرق كبير معناه إن قيمة الروابط الداخلية مش ماشية في المكان اللي إنت فاكره.

اختبار النتائج المنسّقة (Rich Results Test) رأي تاني مفيد، لأنه هو كمان بيعمل ريندر وبيوريك السورس بعده. وفي الموقع الكبير، اللوجز بتكمّل الصورة: بتبيّن هل Googlebot بيجيب ملفات الجافاسكريبت والـAPI بتوعك فعلًا، وده الفرق بين «المفروض يتعمله ريندر» و«اتعمله ريندر فعلًا». الطريقة في تحليل لوجز السيرفر.

المشاكل اللي بتحصل فعلًا

مترتبة حسب قد إيه بقابلها، من الأكتر للأقل.

روابط مش روابط. div أو span عليه حدث نقر بينقل المستخدم. شغال تمام مع الناس، بس بوت الزحف ما بيشوفهوش خالص. كل رابط داخلي لازم يبقى <a> عليه href حقيقي، وده يشمل القايمة، وأرقام الصفحات، وشبكات المنتجات.

محتوى بيظهر لما تدوس. تبويبات وأكورديون ولوحات «اقرا المزيد» بتجيب محتواها لما تدوس عليها. و Googlebot ما بيدوسش. لو المحتوى مهم، لازم يبقى في الصفحة من أول ما تفتح. لو مخفي بـCSS مافيش مشكلة، إنما لو مش موجود أصلًا لحد ما حد يدوس، تبقى مشكلة.

scroll لا نهائي من غير روابط. العناصر بتحمّل وإنت نازل، ومافيش واحد فيهم ليه رابط بوت الزحف يقدر يوصله. فأي حاجة بعد أول شاشة كأنها مش موجودة. وحط معاه صفحات مترقّمة ليها روابط حقيقية.

ملفات محجوبة. قاعدة في robots.txt بتحجب مجلد السكريبتات أو مسار API الصفحة محتاجاه. ساعتها الريندر بيطلّع صفحة فاضية، والكل بيلوم الفريموورك. راجع قايمة موارد الصفحة في فحص الرابط.

محتوى معتمد على حالة متخزنة. محتوى بيظهر بس بعد حاجة متخزنة في localStorage، أو اختيار كوكيز، أو تسجيل دخول. البوت بييجي من غير أي حاجة من دول وبيشوف الباب المقفول.

تحويلات بالجافاسكريبت. تحويل بسكريبت بعد ما الصفحة تفتح. جوجل يقدر يمشي وراها، لكنها أبطأ وأضعف من 301 من السيرفر، ومن الأسباب المشهورة اللي بتخلي نقل الموقع يجيب نتايج أضعف من المتوقع من غير ما حد ياخد باله.

تحويل حسب المكان أو اللغة بالجافاسكريبت. نفس المشكلة اللي فاتت، بس في المواقع اللي بلغتين، ومن الطرق المشهورة اللي بتخلي مواقع عربي تخسر لغة كاملة من الفهرس. اتكلمت عنها في سبع أخطاء بتكسر hreflang في المواقع العربي.

الريندر من السيرفر، والريندر المسبق، والريندر الديناميكي

لو الاختبارات طلعت وحشة، فيه تلات حلول، ومش متساويين.

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

الريندر المسبق (Prerendering) معناه إنك تجهّز HTML ثابت لكل مسار وقت البناء وتقدّمه. بيشتغل كويس في المواقع اللي عدد صفحاتها محدود، ووحش في أي موقع كبير أو بيتغير باستمرار.

الريندر الديناميكي (Dynamic Rendering) معناه إنك تتعرف على البوتات وتقدّملهم نسخة متجهزة مسبقًا. جوجل بطّل ينصح بيه وبيسميه حل مؤقت. بيضيف نسخة كود تانية بتختلف شوية بشوية عن اللي الزوار بيشوفوه، والاختلاف ده هو الخطر. استخدمه بس ككوبري مؤقت لحد ما تعمل الريندر من السيرفر.

وفيه خطوة وسط أرخص وكتير بتكفي: سيب الفريموورك زي ما هو، بس اتأكد إن الحاجات المهمة (العنوان، ووسوم الميتا، والـH1، والمحتوى الأساسي، والروابط الداخلية، والبيانات المنظمة) موجودة في الـHTML الخام، حتى لو الباقي بيحمّل بعدها. ده لوحده بيشيل أغلب الخطر من غير إعادة بناء.

أسئلة شائعة

جوجل بيعمل ريندر للجافاسكريبت؟

أيوه، بنسخة Chromium حديثة، في خطوة منفصلة بطابور بعد أول زحف. السؤال المفيد هو هل الإعداد بتاعك بالذات بيدّيله كل اللي محتاجه.

React أو Vue وحشين للسيو؟

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

محركات البحث التانية وبوتات الذكاء الاصطناعي بتعمل ريندر للجافاسكريبت؟

مش بنفس كفاءة جوجل، وكذا بوت ذكاء اصطناعي بيقرا الـHTML الخام بس. لو مهم عندك إن أدوات الذكاء الاصطناعي تلاقيك، دي حجة زيادة للريندر من السيرفر. شرحت ليه في إيه اللي بيخلي أدوات الذكاء الاصطناعي تذكر البراند بتاعك.

أقدر أحط وسوم الميتا بالجافاسكريبت؟

غالبًا بيشتغل، بس هش ومن غير أي فايدة زيادة. العناوين والأوصاف ووسوم canonical مكانها في رد السيرفر. وبوتات معاينة السوشيال بالذات كتير ما بتعملش ريندر خالص.

صفحتي بتعدّي الاختبار المباشر بس مش متفهرسة. ليه؟

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

اقرا كمان: السيو التقني ومراجعة السيو. ولو مش متأكد إن جوجل شايف محتواك، ابعتلي رابط وأعملّك الاختبارات.

محمد عمار

استشاري سيو وتسويق رقمي من 2015، بيشتغل مع شركات في مصر والسعودية والإمارات.

عن الكاتب ومعايير الكتابة