تحسين محركات البحث (SEO): بنية عنوان URL

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

قد ترغب في اتباع بعض المبادئ:

دلالي: من الأفضل استخدام عناوين URL ذات معنى، أي تلك التي تستخدم الكلمات بدلاً من المعرفات أو الأرقام العشوائية. مثال: /learn/basics/create-nextjs-app أفضل من /learn/course-1/lesson-1
أنماط منطقية ومتسقة: يجب أن تتبع عناوين URL نمطًا معينًا يكون متسقًا بين الصفحات. على سبيل المثال، قد ترغب في وجود مجلد يجمع جميع صفحات المنتجات، بدلاً من وجود مسارات مختلفة لكل منتج لديك.
مركز على الكلمات المفتاحية: لا تزال Google تعتمد جزءًا كبيرًا من أنظمتها على الكلمات المفتاحية التي يحتويها الموقع. قد ترغب في استخدام الكلمات المفتاحية في عناوين URL الخاصة بك لتسهيل فهم الغرض من الصفحات.
لا تعتمد على المعاملات: استخدام المعلمات لبناء عناوين URL الخاصة بك ليس فكرة جيدة في العادة. فهي ليست دلالية في معظم الحالات، وقد تخلط محركات البحث بينها وتخفض تصنيفها في النتائج.

كيف يتم تعريف المسارات في Next.js؟

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

لنلقِ نظرة على بعض عناوين URL البسيطة وكيفية إضافتها إلى جهاز التوجيه في Next.js:

الصفحة الرئيسية: https://www.example.com → pages/index.js
القوائم: https://www.example.com/products → pages/products.js أو pages/products/index.js
التفاصيل: https://www.example.com/products/product → pages/products/product.js

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

المنتج: https://www.example.com/products/nextjs-shirt → pages/products/[product].js
المدونة: https://www.example.com/blog/seo-in-nextjs → pages/blog/[blog-name].js

لاستخدام التوجيه الديناميكي، يمكنك إضافة أقواس إلى اسم صفحة داخل مجلد products أو blogs.

إليك مثالاً على صفحة محسنة لهذا باستخدام SSG:

// pages/blog/[slug].js
 
import Head from 'next/head';
 
export async function getStaticPaths() {
  // استدعاء نقطة نهاية API خارجية للحصول على المنشورات
  const res = await fetch('https://www.example.com/api/posts');
  const posts = await res.json();
 
  // الحصول على المسارات التي نريد تقديمها مسبقًا بناءً على المنشورات
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  // تعيين fallback إلى blocking. الآن أي منشور جديد يضاف بعد البناء سيستخدم SSR
  // لضمان تحسين محركات البحث. سيكون بعد ذلك ثابتًا لجميع الطلبات اللاحقة
  return { paths, fallback: 'blocking' };
}
 
export async function getStaticProps({ params }) {
  const res = await fetch(`https://www.example.com/api/blog/${params.slug}`);
  const data = await res.json();
 
  return {
    props: {
      blog: data,
    },
  };
}
 
function BlogPost({ blog }) {
  return (
    <>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </>
  );
}
 
export default BlogPost;

إليك مثال آخر باستخدام SSR:

// pages/blog/[slug].js
 
import Head from 'next/head';
function BlogPost({ blog }) {
  return (
    <div>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </div>
  );
}
 
export async function getServerSideProps({ query }) {
  const res = await fetch(`https://www.example.com/api/blog/${query.slug}`);
  const data = await res.json();
 
  return {
    props: {
      blog: data,
    },
  };
}
 
export default BlogPost;

بنية عنوان URL

كيف يتم تعريف المسارات في Next.js؟

قراءة إضافية

On this page