Next.js একটি শক্তিশালী ফ্রেমওয়ার্ক যা SEO এবং সোশ্যাল মিডিয়া শেয়ারিং এর জন্য বেশ কিছু সুবিধা প্রদান করে। এর মধ্যে Open Graph (OG) এবং Twitter Cards গুরুত্বপূর্ণ ভূমিকা পালন করে, কারণ এগুলো সাইট বা পেজ শেয়ার করার সময় সঠিকভাবে ডেটা প্রদর্শন করে।
Next.js এর next/head কম্পোনেন্ট ব্যবহার করে আপনি সহজেই কাস্টম meta ট্যাগ, Open Graph এবং Twitter Cards সেট করতে পারেন।
নিচে Open Graph এবং Twitter Cards এর জন্য কাস্টম হেড ম্যানেজমেন্ট কিভাবে করতে হয়, তা বিস্তারিতভাবে আলোচনা করা হলো।
১. next/head কম্পোনেন্ট
Next.js এ next/head একটি বিল্ট-ইন কম্পোনেন্ট যা HTML <head> ট্যাগের মধ্যে ডাইনামিকভাবে কন্টেন্ট ইনজেক্ট করতে ব্যবহৃত হয়। এটি আপনাকে মেটা ট্যাগ, টাইটেল, Open Graph এবং Twitter Cards এর মতো বিভিন্ন তথ্য সুনির্দিষ্টভাবে কনফিগার করার সুযোগ দেয়।
উদাহরণ:
import Head from 'next/head'
export default function Page() {
return (
<>
<Head>
<title>My Awesome Page</title>
<meta name="description" content="This is an awesome page built with Next.js" />
{/* Open Graph Meta Tags */}
<meta property="og:title" content="My Awesome Page" />
<meta property="og:description" content="This page is really awesome, you should check it out!" />
<meta property="og:image" content="https://example.com/path/to/image.jpg" />
<meta property="og:url" content="https://example.com/my-awesome-page" />
<meta property="og:type" content="website" />
{/* Twitter Card Meta Tags */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Page" />
<meta name="twitter:description" content="This page is really awesome, you should check it out!" />
<meta name="twitter:image" content="https://example.com/path/to/image.jpg" />
</Head>
<h1>Welcome to My Awesome Page</h1>
</>
)
}
২. Open Graph Meta Tags
Open Graph (OG) হল একটি প্রোটোকল যা সোশ্যাল মিডিয়া প্ল্যাটফর্ম (যেমন: Facebook, LinkedIn) দ্বারা ব্যবহৃত হয়। OG মেটা ট্যাগ ব্যবহার করে আপনি শেয়ার করার সময় পেজের টাইটেল, বিবরণ, ইমেজ, এবং অন্যান্য কাস্টম কনটেন্ট কন্ট্রোল করতে পারেন।
গুরুত্বপূর্ণ Open Graph মেটা ট্যাগ:
og:title: পেজের শিরোনাম (যেমন: পেজের টাইটেল)og:description: পেজের সংক্ষিপ্ত বিবরণog:image: পেজের জন্য প্রিফার্ড ইমেজ (যা শেয়ার করার সময় প্রদর্শিত হবে)og:url: পেজের URLog:type: পেজের প্রকার (যেমন:website,article,video)
উদাহরণ:
<meta property="og:title" content="My Awesome Page" />
<meta property="og:description" content="This page is really awesome, you should check it out!" />
<meta property="og:image" content="https://example.com/path/to/image.jpg" />
<meta property="og:url" content="https://example.com/my-awesome-page" />
<meta property="og:type" content="website" />
৩. Twitter Cards Meta Tags
Twitter Cards ব্যবহার করে আপনি আপনার পেজের জন্য একটি রিচ প্রিভিউ তৈরি করতে পারেন, যা Twitter তে শেয়ার করার সময় প্রদর্শিত হয়। Twitter Cards মূলত ৩টি প্রকারের হয়:
- Summary Card (সাধারণ)
- Summary Large Image Card (ছবিসহ সারণী)
- Player Card (ভিডিও বা অডিও সহ)
গুরুত্বপূর্ণ Twitter Card মেটা ট্যাগ:
twitter:card: কার্ডের ধরনের ইন্ডিকেটর (যেমন:summary_large_image)twitter:title: কার্ডের টাইটেলtwitter:description: কার্ডের বিবরণtwitter:image: কার্ডের জন্য প্রিফার্ড ইমেজ
উদাহরণ:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Page" />
<meta name="twitter:description" content="This page is really awesome, you should check it out!" />
<meta name="twitter:image" content="https://example.com/path/to/image.jpg" />
৪. Custom Head Management উদাহরণ
যেকোনো পেজের জন্য আপনি Open Graph এবং Twitter Card ট্যাগ কাস্টমাইজ করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে কাস্টম Open Graph এবং Twitter Card সেটিংস ব্যবহার করা হয়েছে।
উদাহরণ:
import Head from 'next/head'
export default function ProductPage({ product }) {
return (
<>
<Head>
<title>{product.name} - Buy Now!</title>
<meta name="description" content={product.description} />
{/* Open Graph Meta Tags */}
<meta property="og:title" content={product.name} />
<meta property="og:description" content={product.description} />
<meta property="og:image" content={product.imageUrl} />
<meta property="og:url" content={`https://example.com/products/${product.id}`} />
<meta property="og:type" content="product" />
{/* Twitter Card Meta Tags */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={product.name} />
<meta name="twitter:description" content={product.description} />
<meta name="twitter:image" content={product.imageUrl} />
</Head>
<div>
<h1>{product.name}</h1>
<p>{product.description}</p>
<img src={product.imageUrl} alt={product.name} />
</div>
</>
)
}
// getStaticProps or getServerSideProps to fetch product data
এখানে product.name, product.description, এবং product.imageUrl এর মাধ্যমে Open Graph এবং Twitter Card ট্যাগে ডাইনামিক কন্টেন্ট ইনজেক্ট করা হয়েছে।
৫. সারাংশ
Next.js এর next/head কম্পোনেন্ট ব্যবহার করে আপনি সহজেই কাস্টম Open Graph এবং Twitter Cards মেটা ট্যাগ সেট করতে পারেন। এই ট্যাগগুলো সোশ্যাল মিডিয়া শেয়ারিং এর জন্য অত্যন্ত গুরুত্বপূর্ণ, কারণ এগুলো পেজের রিচ প্রিভিউ তৈরি করে, যা শেয়ার করার সময় কন্টেন্টের দৃশ্যমানতা এবং আকর্ষণীয়তা বৃদ্ধি করে।
এছাড়া, প্রতিটি পেজে আলাদাভাবে Open Graph এবং Twitter Cards এর জন্য মেটা ট্যাগ কাস্টমাইজ করার মাধ্যমে আপনি আপনার সাইটের SEO এবং সোশ্যাল মিডিয়া এক্সপিরিয়েন্স আরো উন্নত করতে পারবেন।
Read more
