কিভাবে একটি Next.js ওয়েবসাইটে SEO-বন্ধুত্বপূর্ণ শিরোনাম যোগ করবেন

পৃষ্ঠার শিরোনাম, মেটা ট্যাগ এবং মেটা বর্ণনা SEO এর জন্য গুরুত্বপূর্ণ। সেগুলি হল প্রথম জিনিস যা একজন ব্যবহারকারী 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 পৃষ্ঠা . আপনি এই উপাদানটি কোথায় রাখবেন তার উপর নির্ভর করে, মেটা ট্যাগ এবং বিবরণ সমগ্র অ্যাপ্লিকেশন জুড়ে বা পৃথক পৃষ্ঠাগুলিতে উপলব্ধ হবে।

_app.js ফাইলে শিরোনাম, ভিউপোর্ট প্রস্থ এবং বিবরণ যোগ করা নিশ্চিত করে যে সমস্ত পৃষ্ঠার একই মেটাডেটা আছে।

এই পৃষ্ঠায় স্থির বিষয়বস্তু রয়েছে, তবে কখনও কখনও, আপনি এমন পৃষ্ঠাগুলি তৈরি করতে চাইতে পারেন যা গতিশীল সামগ্রী ব্যবহার করে।

একটি Next.js পৃষ্ঠায় ডায়নামিক মেটা শিরোনাম এবং বিবরণ যোগ করা

ব্যবহারের ক্ষেত্রে নির্ভর করে, আপনি Next.js-এ ডেটা আনতে getStaticProps(), getStaticPaths() বা getServerSideProps() ব্যবহার করতে পারেন। এই ডেটা পৃষ্ঠার বিষয়বস্তু নির্ধারণ করে। পৃষ্ঠার জন্য মেটাডেটা তৈরি করতে এটি ব্যবহার করুন।

উদাহরণস্বরূপ, 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 ফাংশন প্রপস হিসাবে পোস্ট কম্পোনেন্টে পোস্ট ডেটা পাস করে। পোস্ট কম্পোনেন্ট প্রপস থেকে শিরোনাম, বিবরণ এবং বিষয়বস্তু ধ্বংস করে। হেড কম্পোনেন্ট তারপর মেটা ট্যাগে শিরোনাম এবং বিবরণ ব্যবহার করে।

xbox এক ইন্টারনেটে সংযোগ করতে পারে না

Next.js একটি অপ্টিমাইজড ফ্রেমওয়ার্ক

আপনি এইমাত্র শিখেছেন কিভাবে একটি Next.js প্রকল্পে মেটা শিরোনাম এবং বিবরণ যোগ করতে হেড কম্পোনেন্ট ব্যবহার করতে হয়। এসইও-বান্ধব শিরোনাম তৈরি করতে, SERP-এ আরোহণ করতে এবং আপনার সাইটে আরও দর্শকদের আকর্ষণ করতে এই জ্ঞান ব্যবহার করুন।

হেড কম্পোনেন্ট ছাড়াও, Next.js অন্যান্য কম্পোনেন্ট যেমন লিঙ্ক এবং ইমেজ প্রদান করে। এই উপাদানগুলিকে বাক্সের বাইরে অপ্টিমাইজ করা হয়েছে যাতে দ্রুত এসইও-বান্ধব ওয়েবসাইট তৈরি করা সহজ হয়৷