الزاوي العالمي مقابل Prerender.io

إذا كنت مطورًا زاويًا ، فأنت تعلم أن مُحسّنات محرّكات البحث هو وضع مشعر. وإذا كنت مثلنا ، فمن المحتمل أنك بحثت في Google عن حلين رئيسيين. في هذه المقالة ، نريد تقسيم هذا إلى مدى تعقيد كل عملية ومدى فعاليتها. لاحظ أن كل هذا يعتمد على تجاربنا. إذا كنت تعتقد خلاف ذلك ، فلا تتردد في الاتصال بنا!

1. الزاوي العالمي

الوثائق: https://angular.io/guide/universal
التعقيد: 7/10
الفعالية: 6/10

في حالة استخدامنا ، لم نستخدم بداية عالمية Angular. لقد بنينا بالفعل موقعنا على الإنترنت بدون واحد (مشروع Angular 7). على الرغم من أن هذه العملية لم تستغرق وقتًا طويلاً لدمجها في مشروع Angular الحالي ، إلا أن الأمر سيستغرق بعض الوقت لفهم ما يجري. لتخفيض التفسير ، يقوم Angular Universal بإنشاء نسختين من التطبيق الخاص بك. أحد تطبيقات "الخادم" الذي يعرض صفحاتك مسبقًا إلى html ثابت. يحدث هذا أولاً وهو ما ستنسحب منه برامج تحسين محركات البحث (SEO). الإصدار الآخر هو تطبيق "المتصفح". هذا هو تطبيق الزاوي الديناميكي وتعمل بكامل طاقتها. تقوم العالمية بتبديل التطبيق المقدم من جانب الخادم الخاص بك مع تطبيق المتصفح الخاص بك بمجرد الانتهاء من التحميل. وبالتالي قد ترى غضب طفيف ، خاصة على سرعات أبطأ.

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

ومع ذلك ، فنحن نريد تقديم تعليقات حول المشكلات التي واجهناها والأشياء التي يتعين علينا القيام بها للتغلب عليها:
1. أضف البرامج النصية التي يقترحها المستند لك في package.json. سيؤدي وضعه في هدف خادم angular.json إلى حدوث خطأ.
2. بالنسبة لملف server.ts ، عند استيراد AppServerModuleNgFactory ، احصل عليه من ملف "./dist/server/main" وليس ملف "./dist/server/main.bundle"
3. إذا كنت تستخدم SCSS لمشروعك ، فتأكد من إضافة هذا المقتطف تحت هدف خادم angular.json. خلاف ذلك ، فإنه يلقي أخطاء عند بناء الهدف الخادم.

"stylePreprocessorOptions": {"includePaths": ["src / scss"]}

4. تأكد أيضًا من التحقق من مسارات الإخراج الخاصة بك للتأكد من هدف البنية المعتاد والخادم المستهدف. يجب أن يكون مسار إخراج الإنشاء مثل dist / project-name / browser ، ويجب أن يكون مسار إخراج الخادم مثل dist / project-name / server

بعد انتهائنا ، يمكننا رؤية كل شفرة صفحتنا من "عرض مصدر الصفحة" على chrome. نحن أيضًا ندمج العلامات الوصفية الديناميكية (باستخدام خدمة التعريف) لمشروعنا ويمكننا رؤيتها عندما نتفحص صفحتنا. حتى الآن هنا هي إيجابيات وسلبيات بعد نشر موقعنا وفهرسة صفحاتنا على جوجل:

الايجابيات
- جميع صفحاتنا كانت قابلة للبحث على جوجل
- لقد نجحت برامج Google في سحب النص من صفحاتنا

سلبيات
- كان النص الذي تم سحبه باستخدام برامج روبوت Google عبارة عن نص عشوائي من صفحاتنا (مثل أسماء الروابط ، والأشياء الموجودة في تذييل الصفحة ، والأوصاف البديلة على الصور ، والنص الأساسي ، وما إلى ذلك)
- إذا كنت تحاول تشغيل طرق مخصصة صريحة ، فستواجه مشكلة. الاحتمالات أنك أفضل حالاً في تشغيل مثيل خادم آخر للمسارات المخصصة.

2. Prerender.io

الوثائق: https://prerender.io/documentation
التعقيد: 2/10
الفعالية: 7/10

قبل أن نجرب Angular Universal ، جربنا Prerender.io. هذا هو بالتأكيد الطريق مع أقل قدر من المتاعب. لتنفيذ ذلك بطريقة تعمل مع Google و bing bots ، لا يتطلب الأمر سوى سطور متعددة من التعليمات البرمجية والتسجيل في موقعه على الرمز. وفي هذا المثال ، نستخدم خادم Express Node:

var prerender = require ('prerender-node'). set ('prerenderToken'، 'YOUR_TOKEN')؛
prerender.crawlerUserAgents.push ( 'غوغلبوت')؛
prerender.crawlerUserAgents.push ( 'bingbot')؛
prerender.crawlerUserAgents.push ( 'ياندكس')؛
app.use (عرض مسبق)؛

إذا كنت تستخدم Express / Node ، فتأكد من امتلاك سطر app.use (prerender) أعلى الوسيطة Express.static التي قد تخدم دليل dist.

مع prerender.io ، سوف تفعل الشيء نفسه مع عالمية. سيؤدي ذلك إلى تخزين هتمل ثابت لصفحاتك وخدمتها حتى روبوتات جوجل عندما يزحفون عبر موقعك.

لذلك كان من السهل للغاية ويعمل بشكل جيد مع واس ، ولكن هل كانت فعالة؟

الايجابيات
- مجموعة سريعة جدا تصل
- يمكن للنسخة المجانية تخزين ما يصل إلى 250 صفحة
- نتائج بحث google لصفحاتنا كلها حسب الوصف الذي حددناه في خدمة التعريف

سلبيات
- ما يصل إلى 250 صفحة مجانية من الأصوات ، يمكن إجراء التخزين المؤقت على إصدارات متعددة من عنوان url الخاص بك (باستخدام موقعنا كمثال) https://www.brewcrewlabs.com و https://brewcrewlabs.com. الطبقة التالية هي 20،000 صفحة لمدة 15 دولار في الشهر.

3. الحكم

الحكم هو أن الزاوي العالمي ليست جاهزة بعد. على الرغم من أنه قد يكون هناك أشياء يمكن أن ننظر فيها لزيادة حدة تحسين محركات البحث لدينا ، إلا أن Prerender.io أكثر بساطة وفعالية. إذا كنت لا تفكر في إنتاج وفرة من الصفحات كل أسبوع ، فقد يكون Prerender.io هو الحل المناسب لك. على الرغم من أن Angular universal تعمل في بعض النواحي ، إلا أنها تتطلب مزيدًا من العمل في الساق للعمل بنفس مستوى Prerender.io. ربما لا نعرف فقط الصلصة السرية لـ Angular Universal - إذا كنت تعرف ذلك ، فيرجى إخبارنا بتجربتك!

نأمل أن يكون هذا المقال ساعد أي شخص آخر في وضع مماثل!