ننقل لكم في مدونة مؤسسة إشراق العالم مقالاً بعنوان “كيف يعمل ولماذا يهم
“ يفيدك في تنفيذ تجربتك في تحسين SEO موقعك ومتجرك الإلكتروني.
إذا كان موقعك يعمل على إطار عمل مثل 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 غير صالح يعيد المتصفح كتابته في الخلفية، مما ينتج عنه بنية لم يتوقعها إطار العمل.
في هذه الحالات، لا يمكن للترطيب التوفيق بين الإصدارين، لذلك يتخلص إطار العمل من الجزء غير المتطابق ويعيد عرضه. تعتمد العملية الدقيقة على الإطار.
هنا، أ <time> القيمة من جديد Date() يتم عرضه بشكل مختلف على الخادم وفي المتصفح، مما يفرض إعادة العرض.
وهذا يخلق مشاكل على ثلاث جبهات. إعادة العرض تجعل الصفحة تبدو بطيئة (INP) وتغير التخطيط (CLS). يمكن أيضًا أن يترك الصفحة معطلة تمامًا لأن مستمعي الأحداث قد يفشلون في إرفاقها، مما يتسبب في توقف الأزرار والنماذج عن العمل.
في الحالات الشديدة، نظرًا لأن Google قد يقرأ HTML الأولي للخادم قبل عرض JavaScript، فيمكنه فهرسة الإصدار الذي على وشك التخلص منه، مما يؤدي إلى تخزين المحتوى الذي لا يراه الزائرون أبدًا.
يمكن للمطورين حل هذه المشكلات عن طريق إصلاح الأسباب الأساسية لعدم التطابق. على سبيل المثال، يمكنهم استخدام HTML صالح حتى لا يقوم المتصفح بإعادة كتابته خلف الكواليس.
احصل على النشرة الإخبارية التي يعتمد عليها مسوقو البحث.
كيفية اكتشاف مشاكل الترطيب في موقع مباشر
لا تكون أخطاء الترطيب واضحة في الموقع المباشر كما هي أثناء التطوير. ابدأ بالتحقق من وحدة تحكم أدوات المطور بالمتصفح بحثًا عن تحذيرات الترطيب أو جافا سكريبت، ثم استخدم عمليات التحقق الإضافية التالية:
- شاهد تحميل الصفحة للمحتوى الذي يتغير أو يومض أو يظل غير مستجيب.
- قم بتشغيل النماذج المهمة من خلال أداة فحص عنوان URL الخاصة بـ Google Search Console لمعرفة كيفية عرض الصفحة.
- قم بالزحف في وضع عرض JavaScript (Screaming Frog وSitebulb) لمقارنة المخرجات المعروضة مقابل HTML الخام على نطاق واسع.
كيف تتعامل الأطر مع الماء
تتخذ الأطر الحديثة طرقًا مختلفة للترطيب، بما في ذلك طرق تقليله أو تخطيه، لتحقيق التوازن بين الأداء والتفاعل وتنفيذ JavaScript.
الأساليب الأكثر شيوعًا هي:
- الترطيب الكامل: يتم ترطيب الصفحة بأكملها دفعة واحدة. يبدو الأمر بسيطًا، لكنه يشحن معظم جافا سكريبت ويضع معظم العمل على الموضوع الرئيسي.
- الترطيب الجزئي: فقط البتات التفاعلية (“الجزر”) هي التي ترطب. تظل الأجزاء الثابتة بتنسيق HTML عادي ولا يتم لمسها أبدًا. تم بناء الهندسة المعمارية لجزر أسترو حول هذا الأمر.
- الترطيب التدريجي: يتم ترطيب الصفحة على شكل أجزاء، إما أثناء تمرير الأقسام إلى العرض أو وفقًا لجدول زمني، بدلاً من كل ذلك مرة واحدة. يعمل الترطيب المتزايد في Angular بهذه الطريقة.
هناك طريقتان جديدتان تتجنبان الترطيب:
- مكونات خادم التفاعل: يتم عرض بعض المكونات بالكامل على الخادم ولا يتم شحن JavaScript إليها، لذلك لا يوجد شيء يمكن ترطيبه على العميل.
- القابلية للاستئناف: إنه يتخطى الترطيب تمامًا. تبدأ الصفحة بالضبط من حيث توقف الخادم، دون إعادة تشغيل أي مكونات عند التحميل. كويك يفعل هذا. إنها أيضًا أحدث هذه الأساليب والأقل اختبارًا في المعركة.
وإليك كيفية المقارنة:
| تقنية | ما يرطب | تم شحن جافا سكريبت | مثال |
|---|---|---|---|
| ترطيب كامل | الصفحة بأكملها | معظم | Next.js (جهاز توجيه الصفحات) |
| الترطيب الجزئي (الجزر) | المكونات التفاعلية فقط | أقل | استرو |
| الترطيب التدريجي | الصفحة، في أجزاء مع مرور الوقت | نفس المجموع، منتشرة | الزاوي |
| رد فعل مكونات الخادم | لا شيء (لأجزاء الخادم فقط) | أقل | Next.js (جهاز توجيه التطبيقات) |
| القابلية للاستئناف | لا شيء، يتم تخطي الماء | الأقل | كويك |
ماذا يعني هذا لموقعك
في معظم الأحيان، لا يمثل الترطيب مشكلة في تحسين محركات البحث. ويصبح واحدًا فقط عندما يختلف HTML الخاص بالخادم والإصدار المقدم للمتصفح.
تترك الأطر الأحدث مساحة أقل لحدوث ذلك لأن كل جيل يشحن كمية أقل من JavaScript ويقوم بعمل أقل في المتصفح. ومع ذلك، فإن حالات عدم التطابق التي تظهر على السطح مهمة، خاصة عندما تقوم محركات البحث بفهرسة نسخة من الصفحة التي لا يراها زوارك أبدًا.
تتم دعوة المؤلفين المساهمين لإنشاء محتوى لـ Search Engine Land ويتم اختيارهم لخبرتهم ومساهمتهم في مجتمع البحث. يعمل المساهمون لدينا تحت إشراف هيئة التحرير ويتم فحص المساهمات للتأكد من جودتها وملاءمتها لقرائنا. Search Engine Land مملوكة لشركة Semrush. لم يُطلب من المساهم الإشارة بشكل مباشر أو غير مباشر إلى Semrush. الآراء التي يعبرون عنها هي آرائهم الخاصة.
🚀 انطلق الآن لتحسين SEO موقعك ومتجرك الإلكتروني
إذا كنت ترغب في رفع ترتيب موقعك في نتائج Google، وزيادة الزيارات المجانية، وبناء باك لينك قوي عبر شبكة مواقع موثوقة، فاطلع على باقات تحسين محركات البحث من إشراق.
اكتشاف المزيد من مؤسسة اشراق العالم لتقنية المعلومات-خدمات مواقع ومتاجر الإنترنت
اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.