كما تعلم ، فإن تحسين محرك البحث لتطبيقات الصفحة الواحدة ليس بالمهمة السهلة وقد يتطلب حلها تكاليف عمالة كبيرة ومهارات خاصة من المطورين والتكاليف المالية من العميل. ما هي الحلول التي يقدمها المجتمع لجعل محرك بحث موقع الويب
React سهل الاستخدام وبأقل تكلفة ممكنة؟
بعض المألوف حول تحسين محركات البحث
تأتي حوالي 92٪ من الزيارات من الصفحة الأولى لنتائج بحث محرك البحث ، مع 75٪ من الزيارات تأتي من المواقع الخمسة الأولى.
تحتل Google أكثر من 90٪ من سوق محركات البحث.
تحسين محركات البحث (SEO) هي عملية هيكلة وتنظيم الموقع من أجل زيادة حجم وتحسين جودة حركة المرور من خلال زيادة موقعه وتكرار حدوثه في نتائج محركات البحث ، مع التركيز على الكلمات الرئيسية التي تكشف عن تفاصيل الموقع.
الهدف الرئيسي من عملية تحسين محركات البحث هو تحسين رؤية الموقع على الإنترنت وزيادة حركة المرور على موقع الويب.
تعتمد محركات البحث على التخزين المؤقت المستمر لمحتوى الموقع. نظرًا لحقيقة أن العملية مؤتمتة ، فمن المهم جدًا أن يتم تنظيم المحتوى وتنسيقه بطريقة يفهمها الجهاز. تتضمن عملية تحسين محركات البحث تحسين أداء موقع الويب ومعالجة محتواه من أجل زيادة ملاءمة المحتوى للكلمات الرئيسية ، بالإضافة إلى تزويد الموقع بالأدوات التي تساعد روبوتات البحث على فهمه.
قد يبدو هذا بسيطًا إلى حد ما ، ولكن في حالة المواقع المبنية على React ، فإن هذا ليس هو الحال دائمًا.
تفاعل وكبار المسئولين الاقتصاديين
باختصار حول SPA
تطبيق الصفحة الواحدة أو SPA هو تطبيق ويب أو موقع ويب يتفاعل مع المستخدم من خلال تغيير الصفحات الحالية ديناميكيًا ، بدلاً من تحميل صفحات جديدة من الخادم. SPA تعمل بسرعة بسبب يتم تحميل معظم الموارد (HTML + CSS + Scripts) مرة واحدة فقط طوال حياتهم. التطبيق يتلقى ويعيد البيانات فقط.
أحد الأمثلة على التكنولوجيا التي يمكن استخدامها لإنشاء SPAs هي ReactJS ، وهي مكتبة تم تحسينها بشكل جيد للعمل على المتصفحات المخصصة ( المزيد هنا. )
مشاكل SPA الرئيسية مع تحسين محركات البحث
إن SPA ، في الواقع ، هو برنامج JavaScript قيد التشغيل في المستعرض ، وإذا لم يكن روبوت الويب للبحث يعرف كيفية تنفيذ البرامج النصية ، فلن يتمكن من الحصول على الصفحة المعروضة بشكل صحيح وفهرستها.
أعلنت Google في أكتوبر 2015 عن إعلان مهم بأن برامج الروبوت الخاصة بها ستقوم بتشغيل ملفات JS على مواقع الويب إذا تم منحها الحق في ذلك. وعلى الرغم من أن هذه العبارة تبدو إيجابية للغاية ، وأصبحت روبوتات البحث الخاصة بها أكثر تعقيدًا ، إلا أن الاعتماد على قدرتها على تنفيذ JavaScript أمر محفوف بالمخاطر . يمكن لـ Googlebot رفض JavaScript لأسباب عديدة ( مزيد من التفاصيل هنا ):
- عدم الامتثال لقاعدة "Golden 5 sec" (مزيد من التفاصيل هنا وهنا) ؛
- عدم القدرة على الزحف إلى الموقع: يجب أن تكون أنظمة Google قادرة على الزحف إلى الموقع ، نظرًا لهيكله (مزيد من التفاصيل هنا) ؛
- استحالة تحليل الموقع: يجب ألا تواجه أنظمة Google مشكلات أثناء تحليل الموقع باستخدام التقنيات المستخدمة لتكوين صفحاته (المزيد هنا) ؛
- أخطاء في التعليمات البرمجية ، إلخ.
الروبوتات من محركات البحث الأخرى مثل Yahoo و Bing و Baidu وغيرها لا تدعم JavaScript وترى صفحات SPA فارغة.
لهذه الأسباب ، يجب عليك البحث عن طرق لتقديم موقع SPA على جانب الخادم من أجل إعطاء فرصة مضمونة لبرامج البحث لمشاهدة محتوياتها في الشكل الصحيح.
حلول تحسين محركات البحث لمواقع SPA
هناك طريقتان رئيسيتان لحل مشكلات تحسين محركات البحث التي تواجه مواقع SPA:
- Isomorphic (عالمي) SPA ؛
- التقديم المسبق.
أدوات تحسين تحسين محركات البحث
الإضافية لمواقع الويب التفاعلية:
- React Router v4 : مكون لإنشاء -s "توجيه" صديقة لكبار المسئولين الاقتصاديين في تطبيقات React ؛
- React Helmet : ربما يكون العنصر الأكثر أهمية لتوفير تطبيقات SEO React ، مما يمنح القدرة على إدارة العلامات الوصفية للتطبيق ويتميز بسهولة الاستخدام.
كيف يساعد التفاعل المتماثل مع تحسين محركات البحث؟
يكتشف موقع التفاعل المتماثل تلقائيًا ما إذا كان JavaScript من جانب العميل معطلاً. إذا تم تعطيل JavaScript ، يتم تنفيذ البرنامج النصي على الخادم ويتم إرسال النتيجة (HTML + CSS ثابتة) إلى العميل. في هذه الحالة ، توجد جميع السمات والمحتوى الضروري لتحسين محركات البحث في وقت التمهيد.
إذا تم تمكين جافا سكريبت ، يمكن تحميل موقع رد الفعل المتماثل في أبسط الحالات بالطريقة المعتادة ، عندما يتم تقديم كل شيء في المتصفح ، أو بذكاء : يتم العرض الجزئي على جانب الخادم ، مما يعني أنه يتم تقديم DOM الأول فقط على الخادم ، ويتم تنفيذ جميع المواقع اللاحقة مباشرة في المتصفح بمعنى آخر ، يتلقى المستعرض كل من DOM وجافا سكريبت الأصليين ، وعندما تتغير حالة التطبيق ، يكون مسؤولاً عن جميع التحديثات اللاحقة.
يُعتقد أن الحل المتماثل هو أفضل طريقة لحل مشكلات تحسين محركات البحث لتطبيقات الويب SPA ، ولكن المشكلة ، للأسف ، هي أن مثل هذه الحلول لـ React SPA ، في الوقت الحالي ، يصعب تنفيذها :
- لوحات مرجعية تفاعلية شائعة ، على سبيل المثال إنشاء-رد فعل-تطبيق ، رد فعل- دعامة لا تدعم التشكل. دان أبراموف ، مطور إنشاء تطبيق تفاعلي :
في النهاية ، من الصعب جدًا إضافة العرض من جانب الخادم بطريقة ذات معنى ، دون اتخاذ قرارات حاسمة أيضًا. في الوقت الحالي ، لن نتخذ مثل هذه القرارات ؛
- يصعب تعلم الغلايات المتشابهة الموجودة ؛
- الحلول الحالية غير كاملة:
- غالبًا ما يكون للكود الموجود على الخادم وعلى العميل العديد من الاختلافات ؛
- في حالة مصادفة شبه كاملة لقاعدة الكود ، يصبح الكود بطيئًا وعرضة للفشل.
يبدو أن العديد من المطورين سيؤيدون الرأي الذي عبر عنه MrCheater في مناقشة مقالة "تطبيقات التفاعل المتشابه : الأداء والقياس" :
موضوع "تطبيقات الويب المتشابهة" له الكثير من الكارهين. للأسف. على الرغم من أنه من السهل فهم السبب ، يصعب برمجة كل شيء ، مئات المقالات حول هذا الموضوع ، ولكن لا يزال الإخراج عميلًا مخيفًا يزن 3 ميغابايت. ولكن في يوم من الأيام ، سيتم توحيد جميع المشكلات والأساليب المتبعة في حلها قريبًا ، وسيكون لدينا تطبيق خفيف الوزن من صفحة واحدة.
حل مشكلة تحسين محركات البحث من خلال التقديم
التقديم المسبق هو عملية التقديم المسبق للصفحات على موقع الويب من أجل إعدادها للعرض بواسطة روبوت بحث الويب. تعترض خدمة العرض المسبق الطلبات إلى موقع الويب ، وتحدد نوع العميل حسب طلب "وكيل المستخدم" ، وإذا تم تقديم الطلب بواسطة برنامج الويب ، تقوم الخدمة بإعادة النسخة الثابتة المخزنة سابقًا من الموقع. إذا تم تقديم الطلب بواسطة روبوت ويب غير بحث ، فسيتم تحميل الصفحة العادية. يتم استخدام العرض المسبق فقط لتحسين العمل مع روبوت الويب ، وربما المتصفحات القديمة. تستخدم خدمات Prerender مثل Prerender.cloud وما شابه ذلك متصفحات بدون رأس ، غالبًا بدون Chrome . يسمح لك هذا الأسلوب باستخدام أحدث أطر عمل JavaScript مثل React و Ember و Angular لإنشاء موقع ويب وعدم الاعتماد على العرض من جانب الخادم.
مزايا العرض المسبق:
- العارض قادر على تنفيذ جميع أنواع جافا سكريبت الحديثة وينتج HTML ثابت ؛
- العرض المسبق يدعم أحدث ابتكارات الويب ؛
- الحد الأدنى من تعديل قاعدة التعليمات البرمجية لتطبيق الويب مطلوب ، على الإطلاق ؛
- تخفيض تكاليف تطوير الموقع وصيانته ؛
- سهولة التنفيذ.
مساوئ العرض المسبق :
- غير مناسب للصفحات التي تعرض بيانات متغيرة بشكل متكرر ؛
- غير مقبول للصفحات التي تحتوي على بيانات شخصية للمستخدم. ومع ذلك ، فإن هذه الصفحات ليست مفيدة جدًا لكبار المسئولين الاقتصاديين ولا يجب فهرستها ؛
- في حالة وجود موقع كبير به عدد كبير من الصفحات ، يمكن أن تستغرق عملية العرض المسبق وقتًا طويلاً ؛
- يتم دفع خدمات العرض المسبق.
العروض المسبقة ، أين يمكن الحصول عليها
طور المجتمع عددًا كبيرًا من العروض المسبقة: انظر ، على سبيل المثال ، هنا.
من بين العديد من الخيارات ، يعتبر OpenSource Prerender مثيرًا للاهتمام - إصدار مفتوح المصدر من العارض المستخدم في خدمة prerender.io ، والذي يمكن تنفيذه على خادمك الخاص الذي يدعم Node.js.
شيء آخر مثير للاهتمام هو أنه لا يتطلب خادمًا ، العرض المسبق هو Prerender SPA Plugin ، والذي يتم توصيله ببساطة عن طريق تعديل webpack.config.js ، على سبيل المثال ، إنشاء-رد فعل-تطبيق أو رد الفعل . تتم عملية العرض المسبق في عملية "بناء" الموقع ويتم وضع النتيجة في index.html.
يمكنك استخدام الخدمات الجاهزة التي تقدم خدمات العرض المسبق ، وهناك قائمة بالبعض هنا وهنا.
هنا يمكنك أيضًا التعرف على الخبرة العملية في العمل مع العروض المسبقة.
من الأهمية بمكان خدمة Roast.io ، التي توفر كلاً من CDN وخدمات ما قبل التقديم (!) . تقوم الخدمة تلقائيًا أيضًا (في حالة عدم وجود أي منها) بإضافة علامات تعريف "لقطة شاشة رابط" تعمل على تحسين عرض موقع الويب على الشبكات الاجتماعية.
تقع الخدمة على AWS CDN ، وتعمل على بروتوكول HTTPS ، والتي تم تكوينها لـ SPA و React على وجه الخصوص ، فهي سهلة الاستخدام للغاية. هناك خيار استضافة مجاني (عرض نطاق 10 جيجا بايت ، 500 صفحة SSR).
لذا:
التقديم المسبق ، كونه ليس حلاً مثاليًا ، يبدو مفضلاً لجزء كبير من مطوري تطبيقات React بسبب حقيقة ما يلي:
- لا يلزم إكمال رمز التطبيق - يمكنك استخدام لوحة مرجعية المفضلة لديك بأمان ؛
- هناك مجموعة واسعة من عمليات التنفيذ - "البرامج الوسيطة" ، و "webpack" ، و "CDN + prerender" ، و "openource" ، والمدفوعة ؛
- يعد تقديم العرض المسبق عملية بسيطة ، خاصة في حالة تنفيذ "CDN + prerender" ؛
- هناك دعم جاد من Google في شكل Headless Chrome ؛
- يتم تخفيض تكاليف تطوير التطبيقات والدعم.
- هناك خيارات للاستخدام المجاني لخدمات الويب المقدمة مسبقًا.
ومع ذلك ، تحتاج إلى التفكير في إصدار متماثل (عالمي) من الموقع إذا:
- يعرض تطبيق الويب البيانات المتغيرة بشكل متكرر ؛
- يحتوي تطبيق الويب على مئات الصفحات ، لأن عملية العرض المسبق يمكن أن تستغرق وقتًا طويلاً.
إذا كان موقع الويب يحتوي على صفحات ثابتة فقط (HTML + CSS) ، فليس هناك حاجة إلى التماثل ولا العرض المسبق.