تطبيقات الويب التقدمية (PWA) وتحسين محركات البحث (SEO)

تطبيق الويب التقدمي (PWA) هو برنامج تطبيقي يتم تقديمه عبر الويب. تم إنشاؤه باستخدام تقنيات الويب القياسية مثل HTML و CSS و JavaScript وما إلى ذلك. تُستخدم PWAs بشكل شائع لتعزيز معدل التحويل وحركة المرور لموقع الويب. اعتبارًا من عام 2021 ، يتم دعم PWAs (كليًا أو جزئيًا) بواسطة Google Chrome و Apple Safari و Firefox لنظام Android و Microsoft Edge.

نظرًا لكونه تطورًا جديدًا نسبيًا ، لا يزال تحسين PWA يؤدي إلى نتائج إيجابية في معظم الحالات ولديه إحصائيات مذهلة. تقوم PWA Stats بالإبلاغ باستمرار عن الفوائد التي حققتها الخدمات التي نفذت PWA.

بشكل عام ، وفقًا لتقرير TOP 30 PWAs ، "كان متوسط ​​معدل التحويل لتطبيقات الويب التقدمية أعلى بنسبة 36٪ من تطبيقات الأجهزة المحمولة الأصلية".

تعد PWAs مساعدين رائعين عندما يتعلق الأمر بالتسويق عبر الإنترنت. هذا هو السبب في أنها تحظى بشعبية بين حشد تحسين محركات البحث. ومع ذلك ، تمامًا مثل React و SEO ، فإن مجموعة PWA SEO تواجه صعوباتها. في هذه المقالة ، سنلقي الضوء على كيفية عمل PWAs مع مُحسّنات محرّكات البحث.

أمثلة وفوائد رئيسية لـ PWA

أي خدمة ويب يمكن أن تكون PWA. هناك ثلاثة متطلبات رئيسية لذلك:

1. يعمل تحت HTTPS.
2. يتضمن بيان تطبيق الويب.
3. ينفذ عامل خدمة.

الغرض الرئيسي من PWA هو توفير وظائف فائقة لكل مستخدم. فيما يلي قائمة بالمزايا الرئيسية التي تقدمها PWAs:

1. يجلب PWA فرصًا ونموًا جديدًا لأي عمل تجاري حرفيًا. فهو يجمع بين أفضل صفات التطبيق والويب ، كونه متجاوبًا وقادرًا على العمل على أي جهاز ، ولا يتطلب بالضرورة شبكة سريعة.
2. أمان طبقة النقل يجعلها آمنة.
3. عامل الخدمة (برنامج نصي خاص يعمله متصفحك في الخلفية) يسمح لـ PWAs بالعمل في وضع عدم الاتصال.

دعنا نلقي نظرة على بعض من أعظم الأمثلة على اعتماد PWA:

موصى به لك: الأطر الأكثر شيوعًا لبناء تطبيقات الويب التقدمية (PWAs).

1. ستاربكس

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

2. بينتيريست

بعد اكتشاف أن 1٪ فقط من مستخدمي Pinterest على الهاتف المحمول يقومون بتنزيل تطبيق وتسجيل الدخول بسبب أدائه الضعيف ، تمت إعادة بناء تطبيق الهاتف المحمول على أساس تقنية PWA. بفضل ذلك ، زادت المؤشرات مثل الوقت المستغرق وعائدات الإعلانات والتفاعلات الأساسية بنسبة تصل إلى 40٪ - 60٪.

3. أوبر

تمت إعادة بناء تطبيق ويب أوبر باعتباره PWA بهدف تقديم خدمة سريعة على الشبكات منخفضة السرعة وعلى الهواتف الذكية القديمة غير المتوافقة مع تطبيق أوبر الأصلي. بفضل ذلك ، يتم تحميل التطبيق الأساسي فائق الخفة في حوالي 3 ثوانٍ على شبكات 2G.

أهمية تحسين محركات البحث

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

تحسين محركات البحث لتطبيقات الويب التقدمية: ما هي المشكلة؟

على الرغم من كل الفوائد التي تقدمها PWA ، لا يزال العديد من مالكي مواقع الويب مترددون في تطبيق التكنولوجيا. هناك سببان رئيسيان لذلك:

1. الخوف من تغيير النظام الحالي الذي يعمل بالفعل بشكل جيد.
2. فهم ضعيف لكيفية عمل PWA مع مُحسّنات محرّكات البحث.

كما ذكر جون مولر (محلل في Google) ، "لا تتمتع PWAs حاليًا بأي ميزة في بحث Google".

تم تصميم العديد من تطبيقات الويب التقدمية باستخدام أطر عمل جافا سكريبت غير المعروفة بطبيعتها الملائمة لتحسين محركات البحث.

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

التقديم من جانب الخادم والعرض من جانب العميل

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

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

ومع ذلك ، لماذا لا يزال العديد من مالكي مواقع الويب يرفضون استخدام المسؤولية الاجتماعية للشركات؟ المشكلة هي Google bot. يمكنه قراءة محتوى موقع الويب في الكود المرئي بالكامل في مستند HTML. CSR ، في حالتها ، تعتمد بشكل كامل على قدرة محرك البحث على معالجة JavaScript. هذا هو سبب وجود رأي مفاده أنه لا يمكن فهرسة تطبيقات CSR. ومع ذلك ، في الواقع ، من بين جميع محركات البحث ، يعتبر Google الأفضل في معالجة JavaScript.

ومع ذلك ، لا يزال هذا لا يعني أن مشكلة JavaScript و SEO قد تم حلها: تعترف Google بأن معالجة JS ليست مثالية. أي أن عملية الزحف إلى صفحة تستند إلى JavaScript تستغرق وقتًا أطول من تلك الخاصة بصفحة HTML. في الواقع ، هذا يعني أنه سيتعين عليك الانتظار المزيد من الوقت حتى يظهر محتوى JavaScript في صفحات نتائج محرك البحث.

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

كيف تنفذ PWA دون أن تفقد محرك البحث الأمثل؟

قد يعجبك: Magento PWA Studio: أداة تطبيق الويب التقدمي لـ Magento!

1. تطبيق العرض الديناميكي

يُظهر العرض الديناميكي إصدارات مختلفة من المحتوى لمصادر مختلفة. يحصل الزائر على إصدار CSR ، ويحصل الزاحف على نسخة معروضة من جانب الخادم. يسمح هذا بتحسين فهرسة الصفحات المستندة إلى JavaScript بواسطة Google bot. بهذه الطريقة ، ستوفر تجربة المستخدم الأكثر ملاءمة لعملائك دون المخاطرة بـ SEO الخاص بالموقع.

2. الجمع بين SSR و CSR

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

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

توصيتنا الرائعة هي GatsbyJS. من السهل جدًا إنشاء موقع ويب PWA باستخدام هذا الإطار (بالإضافة إلى تحويل موقع Gatsby الحالي إلى PWA). إنه يعرض موقع الويب الخاص بك مسبقًا في خطوة بناء للحصول على أداء رائع وخالٍ من التأخير ، حتى لو كان اتصال الإنترنت بطيئًا. بفضل ذلك ، يحصل زوار موقعك على تجربة تصفح تشبه التطبيقات.

4. اللجوء إلى حلول PWA الجاهزة للاستخدام

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

5. استوديو PWA

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

6. سكانديبوا

ScandiPWA هو حل مفتوح المصدر ، يعتمد على React و Redux. إنه مصمم بهدف تحسين مواقع الويب بسرعة والقدرة على العمل دون اتصال بالإنترنت. يتم أيضًا تحديثه باستمرار ، لذلك ستحصل دائمًا على وظائف جديدة.

7. Vue Storefront

هذا هو أحد حلول PWA الأولى المتوفرة في السوق. في الواقع ، يعد Vue Storefront حلاً شاملاً وشاملًا ، ولكنه يتطلب موارد صيانة إضافية.

كيف تتجنب الأخطاء المتعلقة بتحسين محركات البحث أثناء تنفيذ PWA؟

لتطوير PWA جيد التصميم يساعدك على الفوز في مُحسنات محركات البحث من خلال توفير تجربة مستخدم مُحسّنة ، يجب عليك:

1. قم بإجراء تدقيق تحسين محركات البحث. سيساعد هذا في تحديد وإصلاح جميع المشكلات المتعلقة بتحسين محركات البحث.
2. استشر المتخصصين في تحسين محركات البحث. عندما تقوم ببناء PWA باستخدام React (على سبيل المثال) ، يجب أن يعرف متخصصو تحسين محركات البحث (SEO) بالضبط كيفية الجمع بين React و SEO. بهذه الطريقة سوف تتجنب معظم المشكلات المحتملة التي يمكن أن تظهر بعد التنفيذ.
3. التزم بمبادئ تحسين محركات البحث الأساسية عند تطوير PWA. في المقالة المتعلقة بـ Progressive Web Apps SEO ، التي نشرتها Google ، تقدم الشركة نصائح حول كيفية إنشاء PWAs قابلة للفهرسة. البعض منهم على هذا النحو:
   • يجب أن تكون كل صفحة متاحة عبر عنوان URL محدد. بفضل ذلك ، سيتم الزحف إلى كل صفحة بشكل مستقل.
   • يجب أن يكون لموقع الويب تصميم سريع الاستجابة وأن يكون مُحسَّنًا للأجهزة المحمولة.
   • استخدم التحسين التدريجي. بفضل هذه الإستراتيجية ، تعمل PWAs بشكل جيد حتى على المتصفحات القديمة.
   • تحقق من كيفية عرض Google لصفحتك باستخدام Google Search Console على أساس منتظم. وبالتالي ، ستعرف دائمًا متى حان وقت ترقية شيء ما أو تغييره.
   • راقب وقت تحميل الصفحة. يقيس Google سرعة تحميل كل صفحة ، وإذا تباطأت سرعة تحميل صفحتك ، فسيقوم Google بتخفيضها في الترتيب.

قد يعجبك أيضًا: React Native vs Flutter vs PWA: Battle of Trending Mobile App Frameworks.

الخط السفلي

يوفر تحسين PWA الكثير من الفرص للتسويق عبر الإنترنت ويجلب النمو إلى الغالبية العظمى من الشركات. في الواقع ، أفضل ممارسات تحسين محركات البحث (SEO) التي تطبقها PWA عادةً هي الواجهة سهلة الاستخدام: فهي سريعة الاستجابة ومنظّمة وسريعة. ومع ذلك ، لا تزال PWAs لا تعطي ميزة مباشرة لـ SEO ، والمشاكل المتعلقة بـ SEO هي التي تمنع العديد من التجار من تطبيق PWA على مواقعهم الإلكترونية. لهذا السبب من المهم توخي الحذر واستخدام تقنيات مختلفة مثل العرض الديناميكي أو الجمع بين SSR و CSR أو حلول PWA الجاهزة للاستخدام. يجب عليك أيضًا إشراك متخصصي تحسين محركات البحث في العملية من البداية.

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

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