كيفية تحسين محركات البحث باستخدام Next.js

تم إعداد ترجمة المقال استعدادًا لبدء الدورة التدريبية "JavaScript Developer. أساسي " .

تريد معرفة المزيد عن دورة "JavaScript Developer. الأساسي "؟ ندعوك لحضور ندوة مجانية عبر الإنترنت ، يقدم خلالها مدرس الدورة إجابات لجميع أسئلتك.

---

هناك العديد من الأساليب الحديثة لتطوير التطبيقات. وهما الأكثر شعبية هي تطبيقات صفحة واحدة (SPA) و التطبيقات المقدمة الخادم .



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



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

ما الخطأ في تطبيقات الصفحة الواحدة؟

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







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



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



من ناحية أخرى ، فإن التطبيقات المقدمة من الخادم ، وخاصة تلك التي تم إنشاؤها باستخدام Next.js ، تتباهى بالأداء الجيد وكفاءة تحسين محركات البحث.

SEO (تحسين محرك البحث)

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



Next.js



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



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



دعونا نأخذ مثالا لكيفية Next.js يعمل . يتيح لك



Next.js إنشاء تطبيق بأمر واحد باستخدام بنية Create Next App :

npx create-next-app

بمجرد إنشاء المشروع ، ستلاحظ أنه يختلف قليلاً عن القوالب الأخرى التي تم إنشاؤها باستخدام ، على سبيل المثال ، إنشاء تطبيق React . سيتم تخزين جميع الصفحات في التطبيق في مجلد pagesوسيكون كل منها مكون React.



لإنشاء مسار جديد داخل التطبيق ، ما عليك سوى إنشاء ملف جديد في المجلد pagesومكون React جديد له:

// pages/about.js
const About = () => (
  <div>
    <h1>About page</h1>
  </div>
);
export default About;

ملحوظة. أثناء عملك على تطبيقك ، يمكنك الاطلاع على تقارير ترتيب تحسين محركات البحث حتى في المراحل المبكرة ، على سبيل المثال ، باستخدام خدمة Lighthouse .

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

كيفية تحسين محركات البحث باستخدام Next.js

باستخدام Next.js ، يمكنك تحسين نتائج تحسين محركات البحث بشكل كبير ، ولكن لا يجب أن تنسى الجوانب الأخرى للتطبيق. إذا كنت تريد نتائج جيدة لتحسين محركات البحث ، ففكر في ما يلي:

• العلامات الفوقية
• قدرات خاصة
• تطبيقات الويب التقدمية

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



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



يحتوي Next.js على مكون مدمج يضيف علامات وصفية إلى حاوية <head>صفحتك:

import Head from 'next/head'

لإدراج علامة وصفية في إحدى الصفحات ، استخدم المكون المضمن Head:

import Head from 'next/head'

const Example = () => {
  return (
    <div>
      <Head>
        <title>Example</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hi Next.js!</p>
    </div>
  )
}

export default Example



Headيتجنب المكون المضمن تكرار العلامات الوصفية على الموقع - إذا أضفت خاصية المفتاح ، فسيتم عرض العلامة الوصفية مرة واحدة فقط:

<meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />

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



تحقق من الكود الخاص بك الآن لمعرفة ما إذا كانت به علامات وصفية ، وهل هذه هي العلامات الوصفية التي تريدها؟ صدقني ، العلامات الوصفية الصحيحة هي ما تحتاجه لتحسين جودة الفهرسة وزيادة حركة المرور العضوية.



الإنتاجية



اعتاد المستخدمون على تحميل الصفحات بسرعة وليسوا مستعدين للانتظار إلى الأبد. عند تطوير تطبيق ، فكر في الأداء أولاً. إنه أيضًا أحد عوامل الترتيب الرئيسية لمحركات البحث.



تستخدم محركات البحث ، وخاصة Google ، أوقات عرض المحتوى الأولى(First Contentful Paint أو FCP) كمقياس أداء رئيسي. يقيس FCP الوقت من وقت بدء تحميل الصفحة حتى يتم عرض عنصر المحتوى الأول على الشاشة. سيكون لـ FCP المنخفض تصنيف SEO منخفض.



باستخدام Next.js ، يمكنك تحليل مقاييس FCP و LCP (وقت العرض لمعظم المحتوى ، أكبر رسم محتوى) عن طريق إنشاء مكون تطبيق مخصص وإعلان وظيفة reportWebVitals:

// pages/_app.js
export function reportWebVitals(metric) {
  console.log(metric)
}

reportWebVitalsسيتم استدعاء الوظيفة عند حساب القيم المترية النهائية للصفحة. يمكنك قراءة



المزيد حول قياس الأداء في Next.js هنا . إليك ما تحتاج إلى العمل عليه لتحسين FCP.

شهادة SSL

في أغسطس 2014 ، أعلنت Google أنها ستأخذ HTTPS في الاعتبار عند الترتيب. يوفر بروتوكول اتصال HTTPS الآمن طبقة إضافية من الحماية للمستخدمين الذين ينقلون بياناتهم إلى موقعك.



لتوصيل HTTPS ، تحتاج إلى الحصول على شهادة SSL. يمكن أن تكلف شهادة SSL الجيدة فلساً واحداً. كيف تحصل على شهادة SSL مجانًا مع Next.js ؟



للقيام بذلك ، يجب نشر التطبيق على منصة سحابية مثل Vercel . Vercel هي الشركة التي تقف وراء Next.js ، لذا فإن التكامل سيمر بسلاسة. لنشر Next.js على منصة Vercel ، تحتاج إلى تثبيت Vercel CLI:

yarn global add vercel

ثم انتقل إلى المشروع وقم بتشغيل الأمر:

vercel

سيتم نشر المشروع على Vercel وحمايته بشهادة SSL.

المحتوى مهم

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



يعتمد التطبيق المطلوب تطويره - يتم عرض صفحة واحدة أو جانب الخادم - على نوع المحتوى الذي تريد عرضه وكيف تريد الحصول على تعليقات من العملاء.



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



حسنًا ، حان الوقت للانتقال إلى Next.js واستكشاف الإمكانات الكاملة لتطبيقات العرض من جانب الخادم. ستكون مفيدة لك ولشركتك ، وبشكل عام - إنها مذهلة! أؤكد لك أنك ستفاجأ.

خاتمة

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

LogRocket : رؤية كاملة لتطبيق الويب

LogRocket هي خدمة مراقبة تطبيق ويب تتيح لك تكرار مشكلات المستخدم كما لو حدثت في متصفحك. الآن ليست هناك حاجة لتخمين سبب حدوث الخطأ ، أو اطلب من المستخدمين لقطات شاشة أو تفريغ السجل. يتيح لك LogRocket تشغيل جلسة ومعرفة سبب المشكلة. تعمل خدمة Etot بسلاسة مع أي إطار عمل للتطبيق ، علاوة على ذلك ، يمكنك استخدام المكونات الإضافية لإضافة سياق إضافي لـ Redux و Vuex و @ngrx/store.



بالإضافة إلى إضافة إجراءات وحالات Redux ، سجلات وحدة التحكم في سجلات LogRocket وأخطاء JavaScript وتتبعات المكدس وطلبات الشبكة والاستجابات مع الرؤوس والهيئات والبيانات الوصفية للمتصفح والسجلات المخصصة. يستخدم DOM لكتابة HTML و CSS على الصفحة ، مما يوفر عمليات إعادة فيديو لكل بكسل لكل بكسل حتى لأكثر تطبيقات الصفحة الفردية تعقيدًا.



جربه مجانا .

اقرأ أكثر:

• الأسئلة التي تم طرحها علي في المقابلات الأمامية