كيفية إضافة رؤوس ملائمة لتحسين محركات البحث إلى موقع ويب Next.js

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

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

اجعل فيديو اليوم

إضافة علامة رأس عالمية إلى جميع صفحات Next.js

يوفر Next.js _app.js لتهيئة الصفحات. يمكنك استخدامه لإنشاء العلامات الوصفية المشتركة عبر جميع الصفحات.

import '../styles/globals.css' 
import Head from 'next/head' 
  
function MyApp({ Component, pageProps }) { 
  return <> 
    <Head> 
      <meta name="author" content="John Doe"/> 
    </Head> 
    <Component {...pageProps} /> 
  </> 
} 
  
export default MyApp

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

إضافة العلامات الوصفية والوصف إلى صفحة Next.js محددة

تعتبر العلامات الوصفية والأوصاف الثابتة مناسبة للصفحات التي يظل محتواها كما هو ، على سبيل المثال ، الصفحة الرئيسية.

افتح الملف /pages/index.js وقم بتعديل علامة الرأس بالعنوان والوصف المناسبين.

import Head from "next/head"; 
  
const Home= () => { 
  return ( 
    <> 
    <Head> 
      <title>Blog</title> 
      <meta name="viewport" content="initial-scale=1.0, width=device-width" /> 
      <meta name='description' content='Programming Articles'/> 
    </Head> 
    <main> 
      <h1>Welcome to my blog!</h1> 
    </main> 
    </> 
  ); 
}; 
  
export default Home;

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

موقع pc gamer لا يتم تحميله بشكل صحيح

تضمن إضافة العنوان وعرض منفذ العرض والوصف في ملف _app.js أن جميع الصفحات لها نفس البيانات الوصفية.

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

إضافة عنوان Meta ديناميكي وأوصاف إلى صفحة Next.js

اعتمادًا على حالة الاستخدام ، يمكنك استخدام getStaticProps () أو getStaticPaths () أو getServerSideProps () لجلب البيانات في Next.js. تحدد هذه البيانات محتوى الصفحة. استخدمه لإنشاء البيانات الوصفية للصفحة.

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

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

import { getAllPosts, getSinglePost } from "../../utils/mdx"; 
import Head from "next/head"; 
  
const Post = ({ title, description, content }) => { 
  return ( 
    <> 
      <Head> 
        <title>{title}</title> 
        <meta name="description" content={description} /> 
      </Head> 
      <main>{/* page content */}</main> 
    </> 
  ); 
}; 
  
export const getStaticProps = async ({ params }) => { 
  // get a single post 
  const post = await getSinglePost(params.id, "posts"); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export const getStaticPaths = async () => { 
  // Retrieve all posts 
  const paths = getAllPosts("posts").map(({ id }) => ({ params: { id } })); 
  
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export default Post;

تمرر الدالة getStaticProps بيانات التدوين إلى مكون Post كعناصر. يتلف مكون Post العنوان والوصف والمحتوى من الدعائم. ثم يستخدم مكون الرأس العنوان والوصف في العلامات الوصفية.

Next.js هو إطار عمل محسن

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

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