تحسين محركات البحث على الصفحة (On Page SEO)

على مستوى عالٍ، يشير تحسين محركات البحث على الصفحة إلى العناوين والروابط التي تشكل الهيكل العام للصفحة. تشير العناوين إلى الأهمية في المستند وتصل الروابط الويب معًا.

العناوات و H1

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

تتراوح العناوين من 1 إلى 6، ويعتبر العنوان 1 الأكثر أهمية. يُنصح باستخدام وسم H1 في كل صفحة. يجب أن يمثل H1 موضوع الصفحة ويكون مشابهًا لوسم title.

function Page() {
  return <h1>عنوان الصفحة الرئيسي</h1>;
}

الروابط الداخلية

يتصل الإنترنت عبر الروابط. بدون روابط من موقع إلى آخر، ربما لم يكن الإنترنت ليكون موجودًا. تميل المواقع التي تحصل على المزيد من الروابط إلى تمثيل مواقع موثوقة أكثر من قبل المستخدمين.

بدأت جوجل هذا المبدأ باختراع خوارزمية PageRank.

على مستوى عالٍ، خوارزمية PageRank هي خوارزمية تمر عبر كل رابط في قاعدة بيانات وتقيّم النطاقات بناءً على عدد الروابط التي تتلقاها (الكمية) ومن أي نطاقات (الجودة). العديد من الروابط من مواقع غير مرغوب فيها غالبًا ما تكون ذات قيمة قليلة أو معدومة.

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

next/link

يوفر Next.js مكون Link الذي يمكّن الانتقال بين المسارات من جانب العميل. ستبدو حالة الاستخدام البسيطة كما يلي:

function NavLink({ href, name }) {
  return (
    <Link href={href}>
      <a>{name}</a>
    </Link>
  );
}
 
export default NavLink;

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

ومع ذلك، إذا كان العنصر الفرعي لـ Link هو مكون مخصص يلف وسم a، فيجب عليك إضافة passHref إلى Link. هذا ضروري إذا كنت تستخدم مكتبات مثل styled-components. بدون هذا، لن يحتوي وسم a على سمة href، مما يؤثر على تحسين محركات البحث لموقعك.

كيفية استخدام passHref:

import Link from 'next/link';
import styled from 'styled-components';
 
// هذا ينشئ مكونًا مخصصًا يلف وسم <a>
const RedLink = styled.a`
  color: red;
`;
 
function NavLink({ href, name }) {
  // يجب إضافة passHref إلى Link
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  );
}
 
export default NavLink;

إذا كنت تستخدم ESLint، فإن Next.js لديه قاعدة للحماية من حدوث ذلك.

قراءة إضافية

• Next.js: رابط (Link)
• Next.js: eslint-plugin-next