أفضل ممارسات تحسين محركات البحث لمواقع التجارة الإلكترونية من React

برز React كواحد من أطر عمل JavaScript الرائدة المستخدمة عبر مجموعة متنوعة من مواقع الويب المختلفة ، وخاصة على مواقع التجارة الإلكترونية.

نظرًا لطريقة بنائها ، فإن مواقع React لها بعض الاعتبارات المحددة عندما يتعلق الأمر بتحسين محرك البحث (SEO) ، مع مجموعة مميزة من أفضل ممارسات تحسين محركات البحث لتطبيقات الصفحة الواحدة (SPA).

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

ما هي React؟

React هي مكتبة JavaScript يمكن استخدامها لبناء واجهات مستخدم بناءً على مكونات واجهة المستخدم الشائعة. تتم صيانته من قبل شركة Meta الأم لفيسبوك ، جنبًا إلى جنب مع مجتمع مفتوح المصدر من المطورين بما في ذلك الشركات والأفراد.

نظرًا لأنه مفتوح المصدر ، فإن React مجاني أيضًا للاستخدام. يمكن أن يشكل الإطار الأساسي لتطبيق من صفحة واحدة (SPAs المذكورة أعلاه) أو تطبيق جوال.

لماذا تعتبر React جيدة للتجارة الإلكترونية؟

يعني تركيز React على واجهة المستخدم أنها أداة مفيدة لإنشاء مواقع تجارة إلكترونية سلسة وسلسة تضع تجربة المستخدم (UX) في قلب التصميم.

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

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

هل يمكن لمحركات البحث الزحف إلى مواقع الويب التي تتفاعل معها؟

كما هو الحال مع أي موقع ويب محسّن للبحث ، من المهم أن تفهم كيف ترى الروبوتات (وخاصة Googlebot) المحتوى على موقع React.

بشكل عام ، يزحف محرك بحث Google إلى موقع الويب على مرحلتين ، ويحدد المحتوى كما هو.

الزحف إلى شفرة المصدر

أولاً ، سيقوم Googlebot بالزحف إلى موقع الويب واسترداد شفرة المصدر ، بما في ذلك HTML ورؤوس الصفحات وما إلى ذلك.

تقديم DOM

ثانيًا ، يعرض Googlebot نموذج كائن المجال (DOM) بما في ذلك أي JavaScript مستخدم في الصفحة - يمكنك تحديد ذلك باستخدام أدوات المطور المضمنة في Chrome والميزات المماثلة في المتصفحات الأخرى.

React هو إطار عمل JavaScript من جانب العميل ، مما يعني أن Googlebot قد يواجه صعوبة في تحديد الصفحات. هذا لأنه على عكس مواقع الويب التقليدية ، لا يرسل React طلبات إلى الخادم عند التنقل من صفحة إلى أخرى - مما يجعل من الصعب على Google رؤية الصفحات المختلفة.

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

مشاكل SEO الشائعة مع React

هناك العديد من مشكلات تحسين محركات البحث الشائعة في مواقع التجارة الإلكترونية لـ React:

المحتوى غير مكتشف / بطيء الفهرسة

يخصص Googlebot "ميزانية عرض" لكل موقع ويب يزحف إليه ويترك عادةً بمجرد إنفاق هذه الميزانية. يضمن ذلك حصول مواقع الويب الصغيرة على نصيبها من انتباه الزاحف ويمنع حلقات الزحف اللانهائية ، على سبيل المثال على مواقع الويب التي تنشئ عناوين URL ديناميكية أثناء التنقل.

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

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

بحث الروبوتات بطيئة في ملاحظة المحتوى المحدث

هذا فرع من المشكلة أعلاه - عند تغيير صفحة ، قد يستغرق الأمر بعض الوقت قبل تصفية هذه التغييرات في نتائج البحث.

مرة أخرى ، هذا بسبب كيفية عرض الصفحات عند استخدام React ، والذي يمكن أن يؤدي إلى ظهور الصفحات المحدثة دون أن يلاحظها أحد لفترة أطول بواسطة موارد الزاحف المحدودة من Google.

نادرًا ما يتم الزحف إلى الصفحات "العميقة" (أو عدم الزحف مطلقًا)

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

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

[كتاب إلكتروني] قابلية الزحف

تأكد من أن مواقع الويب الخاصة بك تلبي متطلبات محرك البحث الخاصة بإمكانية الزحف لتعزيز أداء تحسين محركات البحث.

اقرأ الكتاب الإلكتروني

كيفية تحسين مواقع التجارة الإلكترونية React

مع بعض أفضل الممارسات لـ React e-commerce SEO ، يمكنك منح موقعك - ​​وصفحاتك الفردية - فرصة أفضل لإدراجها في فهرس البحث.

عناوين URL الفريدة للصفحة

أفضل الممارسات النظيرة لمشكلة عناوين URL الديناميكية المذكورة أعلاه هي إعطاء كل صفحة عنوان URL الفريد والثابت الخاص بها على موقع الويب الخاص بك. ثم يتم ربط المحتوى بموقع دائم واحد - عنوان URL أساسي للصفحة - يمكن لمحركات البحث الزحف إليه وفهرسته وتصنيفه بثقة في صفحات النتائج الخاصة بهم.

React Router هو وسيلة لتحقيق ذلك على مواقع React. يمكن لـ React Router إعطاء كل صفحة على الموقع عنوان URL الدائم الخاص بها ، بالإضافة إلى محاذاة واجهة المستخدم مع عنوان URL محدد.

تفاعل متماثل

التفاعل المتماثل هو طريقة لتمكين العرض من جانب الخادم ، لتخفيف الضغط على ميزانيات تصيير برامج الزحف. إنه يعمل عن طريق اكتشاف متى يتم تعطيل JavaScript من جانب العميل ، وإنشاء نموذج يتم عرضه من جانب الخادم من HTML لموقع الويب. إذا كان العرض من جانب العميل متاحًا ، فسيتم تحميل موقع الويب باعتباره React SPA بالطريقة المعتادة.

من خلال القيام بذلك ، يتغلب Isomorphic React على مشاكل الرؤية لبرامج زحف البحث ، مما يحسن إمكانية اكتشاف الصفحات ، دون أي ضرر بتجربة React السلسة والسلسة للزوار البشريين مع تشغيل JavaScript من جانب العميل.

التقديم المسبق

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

يتلقى الزوار من البشر موقع React من جانب العميل ، مما يمنحهم مرة أخرى جميع مزايا السبا السلس والسريع. هناك العديد من خدمات العرض المسبق للاختيار من بينها ، بما في ذلك Google Puppeteer و Prerender.io و SEO4Ajax.

تحسين البيانات الوصفية

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

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

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