الترطيب وتحسين محركات البحث: كيف يعمل وسبب أهميته
إذا كان موقعك يعمل على إطار عمل مثل Next.js أو Nuxt، فإن الترطيب يشكل كيفية تفاعل صفحاتك، ولكن نادرًا ما يتم شرحه بمصطلحات تهم مُحسنات محركات البحث.
إنه ودود أكثر مما يبدو. إليك ما هو الترطيب، وكيف يعمل، وأين يؤثر على تحسين محركات البحث (وأين لا يؤثر)، وكيف تتعامل معه الأطر المختلفة.
ما هو الترطيب؟
الترطيب هو عملية تشغيل جافا سكريبت في متصفحك “للسيطرة” على HTML الثابت المبني على الخادم، وتحويله إلى صفحة يمكنك التفاعل معها فعليًا.
ها هي العملية:
ينشئ الخادم HTML كاملاً ومكتملًا ويرسله إلى متصفحك. ترى المحتوى على الفور، لكنه ليس تفاعليًا. الأزرار لا تعمل بعد، ولا شيء يستجيب للنقرات.
يحدث الترطيب عندما ينتهي تحميل إطار عمل الصفحة (Next.js وNuxt وSvelteKit وغيرها). فهو يمر عبر HTML الموجود، ويرفق مستمعي الأحداث، ويعيد ربط العلامات المرئية بالمنطق الذي يجعلها تعمل.
بعد الترطيب، تعمل الصفحة مثل التطبيق التفاعلي العادي.
يتم رسم HTML المعروض بواسطة الخادم بسرعة، وهو أمر رائع للانطباعات الأولى وغالبًا ما يكون لأكبر طلاء محتوى (LCP). كما يوضح الجدول الزمني أدناه، فإن الترطيب التقليدي يعني أن الصفحة غير قابلة للاستخدام فعليًا حتى انتهاء الترطيب.
كن العلامة التجارية التي يجدها العملاء أولاً.
تتبع ونمو وقياس ظهورك عبر Google وبحث الذكاء الاصطناعي والوسائط الاجتماعية والمحلية وكل قناة تؤثر على قرارات الشراء.
ابدأ تجربتك المجانية
يضيف الترطيب التفاعل، وليس المحتوى
الترطيب لا يضيف محتوى إلى الصفحة. لقد وصل النص والصور والتخطيط بالفعل من الخادم. فهو يضيف السلوك فقط، ويقوم بتوصيل HTML الموجود حتى يتمكن من الاستجابة لك. ببساطة، قبل الترطيب يمكنك قراءة الصفحة، وبعد الترطيب يمكنك استخدامه.
يمكنك رؤية هذا جنبًا إلى جنب أدناه. والفرق الوحيد بين الصفحتين هو ما إذا كان الزر يستجيب أم لا.
لا تخلط بين الترطيب ونمط العرض، الذي يحدد مكان وزمان إنشاء الصفحة. يحدد كل من العرض من جانب الخادم (SSR)، وإنشاء الموقع الثابت (SSG)، والعرض من جانب العميل (CSR) مقدار الصفحة التي تصل كـ HTML نهائيًا مقابل مقدار إنشاء JavaScript لاحقًا في المتصفح.
نظرًا لأن الترطيب يتم تشغيله على الصفحات المعروضة بواسطة الخادم (SSR) والصفحات الثابتة (SSG)، فإن المحتوى موجود بالفعل في HTML الأولي. يمكن لـ Google فهرسة هذا المحتوى من HTML الأولي بدلاً من الاعتماد على خطوة العرض، والتي تعتبر أكثر موثوقية من الصدفة الفارغة المقدمة من قبل العميل.
عندما يصبح الترطيب مشكلة في تحسين محركات البحث
في معظم الأحيان، لا يمثل الترطيب مشكلة تتعلق بتحسين محركات البحث بشكل مباشر. تصبح واحدة فقط عندما ينكسر شيء ما، وعادةً ما يكون غير متطابق. يحدث هذا عندما لا يتفق HTML الخاص بالخادم وما ينشئه إطار العمل في المتصفح.
عادةً ما يأتي عدم التطابق من أحد المصادر القليلة:
المحتوى المقدم من واجهة برمجة التطبيقات للمتصفح فقط والتي لا يمكن للخادم الوصول إليها، مثل localStorage.
قيمة تتغير بين الخادم والعميل، مثل new Date().
برنامج نصي أو ملحق متصفح تابع لجهة خارجية يقوم بتغيير DOM قبل أن يقوم إطار العمل بترطيبه.
HTML غير صالح يعيد المتصفح كتابته في الخلفية، مما ينتج عنه بنية لم يتوقعها إطار العمل.
في هذه الحالات، لا يمكن للترطيب التوفيق بين الإصدارين، لذلك يتخلص إطار العمل من الجزء غير المتطابق ويعيد عرضه. تعتمد العملية الدقيقة على الإطار.
هنا، يتم عرض قيمة
وهذا يخلق مشاكل على ثلاث جبهات. إعادة العرض تجعل الصفحة تبدو بطيئة (INP) وتغير التخطيط (CLS). يمكن أيضًا أن يترك الصفحة معطلة تمامًا لأن مستمعي الأحداث قد يفشلون في إرفاقها، مما يتسبب في توقف الأزرار والنماذج عن العمل.
في الحالات الشديدة، نظرًا لأن Google قد يقرأ HTML الأولي للخادم قبل عرض JavaScript، فيمكنه فهرسة الإصدار الذي على وشك التخلص منه، مما يؤدي إلى تخزين المحتوى الذي لا يراه الزائرون أبدًا.
يمكن للمطورين حل هذه المشكلات عن طريق إصلاح الأسباب الأساسية لعدم التطابق. على سبيل المثال، يمكنهم استخدام HTML صالحًا حتى لا يعيد المتصفح كتابته خلف الكواليس.
احصل على النشرة الإخبارية التي يعتمد عليها مسوقو البحث.
انظر الشروط.
كيفية اكتشاف مشاكل الترطيب في موقع مباشر
لا تكون أخطاء الترطيب واضحة في الموقع المباشر كما هي أثناء التطوير. ابدأ بالتحقق من وحدة تحكم أدوات المطور بالمتصفح بحثًا عن تحذيرات الترطيب أو جافا سكريبت، ثم استخدم عمليات التحقق الإضافية التالية:
شاهد تحميل الصفحة للمحتوى الذي يتغير أو يومض أو يظل غير مستجيب.
قم بتشغيل النماذج المهمة من خلال أداة فحص عنوان URL الخاصة بـ Google Search Console لمعرفة كيفية عرض الصفحة.
قم بالزحف في وضع عرض JavaScript (Screaming Frog وSitebulb) لمقارنة المخرجات المعروضة مقابل HTML الخام على نطاق واسع.
كيف تتعامل الأطر مع الماء
تتخذ الأطر الحديثة طرقًا مختلفة للترطيب، بما في ذلك طرق تقليله أو تخطيه، لتحقيق التوازن بين الأداء والتفاعل وتنفيذ JavaScript.
الأساليب الأكثر شيوعًا هي:
ترطيب كامل: يتم ترطيب الصفحة بأكملها دفعة واحدة. يبدو الأمر بسيطًا، لكنه يشحن معظم جافا سكريبت ويضع معظم العمل على الموضوع الرئيسي.
الترطيب الجزئي: فقط الأجزاء التفاعلية (“الجزر”) هي التي ترطب. تظل الأجزاء الثابتة بتنسيق HTML عادي ولا يتم لمسها أبدًا. تم بناء الهندسة المعمارية لجزر أسترو حول هذا الأمر.
الترطيب التدريجي: يتم ترطيب الصفحة على أجزاء، إما أثناء تمرير الأقسام إلى العرض أو وفقًا لجدول زمني، بدلاً من ترطيبها كلها مرة واحدة. يعمل الترطيب المتزايد في Angular بهذه الطريقة.
هناك طريقتان جديدتان تتجنبان الترطيب:
مكونات خادم React: يتم عرض بعض المكونات بالكامل على الخادم ولا تشحن أي JavaScript، لذلك لا يوجد شيء يمكن ترطيبه على العميل.
القابلية للاستئناف: يتخطى الترطيب تمامًا. تبدأ الصفحة بالضبط من حيث توقف الخادم، دون إعادة تشغيل أي مكونات عند التحميل. كويك يفعل هذا. إنها أيضًا أحدث هذه الأساليب والأقل اختبارًا في المعركة.
وإليك كيفية المقارنة:
التقنية ما يرطب جافا سكريبت المشحونة مثال الترطيب الكامل الصفحة بأكملها MostNext.js (جهاز توجيه الصفحات) الترطيب الجزئي (الجزر) المكونات التفاعلية فقط أقل أسترو الترطيب التقدمي الصفحة، في أجزاء مع مرور الوقت نفس الإجمالي، موزعة على مكونات AngularReact Server لا شيء (لأجزاء الخادم فقط) أقل Next.js (التطبيق) جهاز التوجيه) القابلية للاستئناف لا شيء، يتم تخطي الترطيب على الأقل Qwik
ماذا يعني هذا لموقعك
في معظم الأحيان، لا يمثل الترطيب مشكلة في تحسين محركات البحث. ويصبح واحدًا فقط عندما يختلف HTML الخاص بالخادم والإصدار المقدم للمتصفح.
تترك الأطر الأحدث مساحة أقل لحدوث ذلك لأن كل جيل يشحن كمية أقل من JavaScript ويقوم بعمل أقل في المتصفح. ومع ذلك، فإن حالات عدم التطابق التي تظهر على السطح مهمة، خاصة عندما تقوم محركات البحث بفهرسة نسخة من الصفحة التي لا يراها زوارك أبدًا.
إرسال التعليق