By Thisara Priyamal in Next.js SEO — 25 Jul 2025

Next.js Metadata සහ SEO: ඔබගේ වෙබ් අඩවියට Google Rank ලබාගැනීමට | SC Guide

කොහොමද යාලුවනේ! වෙබ් සංවර්ධනයේදී, අපි ලස්සනට වෙබ් අඩවි හැදුවට, ඒක මිනිස්සුන්ට හොයාගන්න බැරිනම් වැඩක් නෑනේ. Google වගේ Search Engine එකකින් අපේ වෙබ් අඩවිය මිනිස්සු ළඟට ගෙනියන්න නම් SEO (Search Engine Optimization) කියන දේ ගොඩක් වැදගත්. Next.js වගේ Modern Framework එකකදී මේ SEO කටයුතු නිවැරදිව කරන එක අත්‍යවශ්‍යයි.

අද අපි කතා කරන්න යන්නේ Next.js App එකක SEO වැඩිදියුණු කරන්න Metadata කියන දේ කොහොමද පාවිච්චි කරන්නේ කියලා. විශේෂයෙන්ම, Next.js 12 සහ ඊට කලින් versions වල තිබුණු next/head එක ගැනත්, Next.js 13 එක්ක ආපු App Router එකේ අලුත් Metadata API එක ගැනත් අපි ගැඹුරින් බලමු. මේ Guide එක කියවලා ඉවර වෙනකොට ඔයාට පුළුවන් වෙයි ඔයාගේ Next.js Project එකට හරියට SEO Friendly Metadata එකතු කරන්න.

Metadata කියන්නේ මොකක්ද? ඇයි ඒක SEO වලට වැදගත්?

සරලව කිව්වොත්, Metadata කියන්නේ අපේ වෙබ් පිටුවක අන්තර්ගතය ගැන තොරතුරු සපයන "data about data" එකක්. මේවා සාමාන්‍යයෙන් වෙබ් පිටුවක User Interface එකේ පෙන්වන්නේ නැහැ. හැබැයි Search Engines (Google, Bing, Yahoo වගේ) සහ Social Media Platforms (Facebook, Twitter වගේ) අපේ පිටුවේ අන්තර්ගතය තේරුම් ගන්න මේ Metadata පාවිච්චි කරනවා.

ප්‍රධාන Metadata වර්ග:

Title Tag (<title>): මේක තමා පිටුවක ප්‍රධානම Metadata එක. Browser Tab එකේ සහ Search Engine Results Pages (SERPs) වල පෙන්වන්නේ මේ Title එක. හොඳ, විස්තරාත්මක Title එකක් Search Rankings වැඩි කරන්න උදව් වෙනවා.
Meta Description Tag (<meta name="description">): මේක පිටුවක අන්තර්ගතය ගැන කෙටි සාරාංශයක්. SERPs වල Title එක යටතේ පෙන්වන්නේ මේ Description එක. Click-Through Rate (CTR) එක වැඩි කරන්න හොඳ Description එකක් අත්‍යවශ්‍යයි.
Open Graph (OG) Tags (<meta property="og:...">): Facebook, LinkedIn වගේ Social Media Platforms වල ඔයාගේ Link එක Share කරනකොට ඒක ලස්සනට පෙන්වන්න මේ Tags පාවිච්චි කරනවා. උදාහරණ: og:title, og:description, og:image, og:url.
Twitter Card Tags (<meta name="twitter:...">): මේවා Twitter Platform එකට විශේෂයි. Open Graph වගේම Link එකක් Twitter එකේ Share කරනකොට පෙනෙන විදිය පාලනය කරනවා.
Canonical URL (<link rel="canonical">): එකම Content එක පිටු කීපයක තිබුණොත් (උදා: /product/123 සහ /products?id=123), Search Engine එකට ප්‍රධාන පිටුව (canonical version) මොකක්ද කියලා කියන්න මේ Tag එක පාවිච්චි කරනවා. මේක Duplicate Content Issues වළක්වා ගන්න අත්‍යවශ්‍යයි.

මේ Metadata නිවැරදිව පාවිච්චි කරන එකෙන් ඔයාගේ වෙබ් අඩවියට වැඩිපුර Visitorsලා ගෙන්න ගන්න පුළුවන්. ඒ වගේම Search Engine එකට ඔයාගේ Content එක ගැන හොඳ අවබෝධයක් ලැබෙනවා.

Next.js Pages Router (next/head) භාවිතයෙන් Metadata එකතු කරමු

Next.js 13 ට කලින් Versions වල (Pages Router) අපි Metadata කළමනාකරණයට පාවිච්චි කළේ next/head Component එක. මේක React Component එකක් වගේම අපිට අවශ්‍ය Head Tags ඕනෑම Page එකක ඇතුළට දාන්න පුළුවන්.

Static Page එකකට Metadata එකතු කිරීම:

උදාහරණයක් විදියට, අපේ Home Page එකට Title සහ Description එකක් දාමු:


// pages/index.js
import Head from 'next/head';

function HomePage() {
  return (
    <>
      <Head>
        <title>Home - My Awesome Next.js App SC Guide</title>
        <meta name="description" content="Welcome to my awesome Next.js application. Learn about web development, SEO, and more." />
        <meta name="keywords" content="Next.js, React, Web Development, SEO, Homepage" />
        <!-- Open Graph Tags -->
        <meta property="og:title" content="Home - My Awesome Next.js App" />
        <meta property="og:description" content="Welcome to my awesome Next.js application. Learn about web development, SEO, and more." />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://www.example.com/" />
        <meta property="og:image" content="https://www.example.com/images/home-banner.jpg" />
        <!-- Twitter Card Tags -->
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@yourtwitterhandle" />
        <meta name="twitter:title" content="Home - My Awesome Next.js App" />
        <meta name="twitter:description" content="Welcome to my awesome Next.js application. Learn about web development, SEO, and more." />
        <meta name="twitter:image" content="https://www.example.com/images/home-banner.jpg" />
      </Head>

      <h1>Hello Next.js World!</h1>
      <p>This is the home page content.</p>
    </>
  );
}

export default HomePage;

මෙහිදී වැදගත් දේ තමයි, <Head> Component එක ඇතුලේ දාන Tags, <html> එකේ <head> Section එකට Render වෙනවා. එකම Tag එකක් පිටු කීපයක තිබුණොත්, Next.js ස්වයංක්‍රීයව අලුත්ම එක Overwrite කරනවා.

Dynamic Pages වලට Metadata එකතු කිරීම (e.g., Blog Post):

Blog Post වගේ Dynamic Pages වලට Metadata එකතු කරනකොට, අපි Data Fetch කරලා ඒ Data එකෙන් Metadata Generate කරන්න ඕන. getStaticProps හෝ getServerSideProps වගේ Data Fetching Functions එක්ක මේක කරන්න පුළුවන්.


// pages/blog/[slug].js
import Head from 'next/head';

function BlogPostPage({ post }) {
  if (!post) {
    return <p>Loading...</p>; // Or a 404 page
  }

  return (
    <>
      <Head>
        <title>{post.title} - My Blog SC Guide</title>
        <meta name="description" content={post.excerpt} />
        <meta name="keywords" content={post.tags.join(', ')} />
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.excerpt} />
        <meta property="og:type" content="article" />
        <meta property="og:url" content={`https://www.example.com/blog/${post.slug}`} />
        <meta property="og:image" content={post.imageUrl} />
        <link rel="canonical" href={`https://www.example.com/blog/${post.slug}`} />
      </Head>

      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  );
}

export async function getStaticPaths() {
  // Fetch all post slugs
  const posts = [{ slug: 'my-first-post' }, { slug: 'another-nextjs-guide' }]; // Example data
  const paths = posts.map(post => ({ params: { slug: post.slug } }));
  return { paths, fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  // Fetch single post data based on params.slug
  const postsData = {
    'my-first-post': {
      title: 'My First Next.js Post',
      excerpt: 'This is a sample excerpt for my first Next.js blog post.',
      content: 'Detailed content of the first post...',                  
      tags: ['Next.js', 'Blog', 'Sample'],
      imageUrl: 'https://www.example.com/images/post1.jpg',
      slug: 'my-first-post'
    },
    'another-nextjs-guide': {
      title: 'Another Next.js Guide',
      excerpt: 'Learn more advanced Next.js concepts in this guide.',
      content: 'Detailed content of the second post...',                  
      tags: ['Next.js', 'Guide', 'Advanced'],
      imageUrl: 'https://www.example.com/images/post2.jpg',
      slug: 'another-nextjs-guide'
    }
  };
  const post = postsData[params.slug] || null;

  return {
    props: {
      post,
    },
    revalidate: 60 // Optional: regenerate page every 60 seconds
  };
}

export default BlogPostPage;

මේ ආකාරයට Dynamic Data භාවිතයෙන් Metadata Generate කිරීමෙන්, Search Engines වලට අපේ සෑම පිටුවක්ම නිවැරදිව Index කරන්න පුළුවන් වෙනවා.

Next.js App Router (Next.js 13+) හි අලුත් Metadata API එක

Next.js 13 එක්ක හඳුන්වා දුන්න App Router එකේදී Metadata කළමනාකරණයට සම්පූර්ණයෙන්ම අලුත් ක්‍රමවේදයක් ආවා. next/head වෙනුවට, දැන් අපිට Exports Configuration Objects (Static Metadata) හෝ Functions (Dynamic Metadata) භාවිත කරන්න පුළුවන්. මේක වඩාත් Structured සහ Performant ක්‍රමයක්.

Static Metadata එකතු කිරීම:

ඕනෑම layout.js හෝ page.js ගොනුවක metadata කියන Object එක Export කිරීමෙන් Static Metadata එකතු කරන්න පුළුවන්. layout.js එකකදී දුන්නොත් ඒක ඒ Layout එක යටතේ හැම Page එකකටම බලපානවා. page.js එකකදී දුන්නොත් ඒක ඒ Page එකටම විතරක් බලපානවා.


// app/layout.js (Global Metadata)
export const metadata = {
  title: 'My Awesome Next.js App - SC Guide',
  description: 'Learn web development with Next.js, React, and more. A comprehensive guide for Sri Lankan developers.',
  keywords: ['Next.js', 'React', 'Web Development', 'Sri Lanka', 'SEO', 'App Router'],
  openGraph: {
    title: 'My Awesome Next.js App',
    description: 'Learn web development with Next.js, React, and more.',
    url: 'https://www.example.com',
    siteName: 'My Awesome Next.js App',
    images: [
      {
        url: 'https://www.example.com/og-image.jpg', // Must be an absolute URL
        width: 1200,
        height: 630,
        alt: 'My Awesome Next.js App Banner',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Awesome Next.js App',
    description: 'Learn web development with Next.js, React, and more.',
    siteId: '1467726470533754880', // Replace with your Twitter site ID
    creator: '@yourtwitterhandle',
    creatorId: '1467726470533754880',
    images: ['https://www.example.com/twitter-image.jpg'], // Must be an absolute URL
  },
  robots: {
    index: true,
    follow: true,
    nocache: true,
    googleBot: {
      index: true,
      follow: false,
      noimageindex: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  alternates: {
    canonical: 'https://www.example.com',
  },
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

page.js එකකදී Static Metadata එකතු කිරීම (Layout එකේ Metadata Overwrite කිරීමට):


// app/about/page.js
export const metadata = {
  title: 'About Us - My Awesome Next.js App SC Guide',
  description: 'Learn about our team and mission at My Awesome Next.js App.',
  // Other metadata properties specific to the About Us page
};

export default function AboutPage() {
  return (
    <h1>About Us</h1>
  );
}

Dynamic Metadata එකතු කිරීම (`generateMetadata` Function):

Pages Router එකේ getStaticProps/getServerSideProps වගේම App Router එකේදී Dynamic Data වලින් Metadata Generate කරන්න generateMetadata කියන Async Function එක පාවිච්චි කරනවා.


// app/blog/[slug]/page.js
import { notFound } from 'next/navigation';

async function getPost(slug) {
  // Replace with your actual data fetching logic (e.g., from a database or API)
  const postsData = {
    'my-first-post': {
      title: 'My First Next.js Post (App Router)',
      excerpt: 'This is a sample excerpt for my first Next.js blog post using App Router.',
      content: 'Detailed content of the first post using App Router...',                  
      tags: ['Next.js', 'Blog', 'Sample', 'App Router'],
      imageUrl: 'https://www.example.com/images/app-post1.jpg',
      slug: 'my-first-post'
    },
    'another-app-router-guide': {
      title: 'Another App Router Guide',
      excerpt: 'Explore advanced concepts in Next.js App Router for your projects.',
      content: 'Detailed content of the App Router guide...',                  
      tags: ['Next.js', 'App Router', 'Guide', 'Advanced'],
      imageUrl: 'https://www.example.com/images/app-post2.jpg',
      slug: 'another-app-router-guide'
    }
  };
  return postsData[slug] || null;
}

// Dynamic Metadata generation
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);

  if (!post) {
    return {
      title: 'Post Not Found',
      description: 'The requested blog post could not be found.',
    };
  }

  return {
    title: `${post.title} - My App Blog SC Guide`,
    description: post.excerpt,
    keywords: post.tags.join(', '),
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [
        {
          url: post.imageUrl, // Must be an absolute URL
          width: 800,
          height: 600,
          alt: post.title,
        },
      ],
      type: 'article',
      url: `https://www.example.com/blog/${post.slug}`,
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.imageUrl],
    },
    alternates: {
      canonical: `https://www.example.com/blog/${post.slug}`,
    },
  };
}

// Page component
export default async function BlogPostPage({ params }) {
  const post = await getPost(params.slug);

  if (!post) {
    notFound(); // Next.js utility to show a 404 page
  }

  return (
    <>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  );
}

// If you need to generate static paths for dynamic routes (similar to getStaticPaths)
// This is used for generating static HTML pages at build time.
export async function generateStaticParams() {
  // In a real app, fetch slugs from your database/API
  const slugs = ['my-first-post', 'another-app-router-guide'];
  return slugs.map((slug) => ({ slug }));
}

generateMetadata Function එකෙන් අපි Return කරන Object එක Next.js එකෙන් Head Section එකට Inject කරනවා. මේක Client Side Render වෙන්නේ නැති නිසා Search Engine Crawlersලට පහසුවෙන් Content එක Read කරන්න පුළුවන්.

Best Practices සහ Troubleshooting Tips

Metadata එක්ක වැඩ කරනකොට මතක තියාගන්න ඕන වැදගත් කරුණු කිහිපයක්:

සෑම පිටුවකටම Unique Metadata: හැම පිටුවකටම අදාළ Title එකක් සහ Description එකක් දෙන්න. "Home Page" කියලා පිටු 10කටම දැම්මොත් Search Engine එකට ඒක Duplicate Content එකක් විදියට පේන්න පුළුවන්.
Keywords Smartly භාවිතා කරන්න: ඔයාගේ Content එකට අදාළ Keywords Title එකේ, Description එකේ සහ Content එක ඇතුලේ ස්වභාවිකව පාවිච්චි කරන්න. Over-optimization (Keyword Stuffing) වලින් වළකින්න.
Open Graph සහ Twitter Cards අමතක කරන්න එපා: Social Media එකෙන් ගොඩක් Traffic එන්න පුළුවන්. ඒ නිසා මේ Tags නිවැරදිව Configure කරන එක ඉතා වැදගත්. og:image වගේ ඒවාට Absolute URLs පාවිච්චි කරන්න.
Canonical URLs: එකම Content එක විවිධ URLs යටතේ පෙන්වනවා නම් (e.g., URL parameters එක්ක), canonical Tag එක හරියට භාවිත කරලා Search Engine එකට ප්‍රධාන URL එක මොකක්ද කියලා කියන්න.
Metadata Verification: ඔයාගේ Metadata හරියට Render වෙනවද කියලා බලන්න Browser Developer Tools (Inspect Element -> Head Section) පාවිච්චි කරන්න. ඒ වගේම Google Search Console වගේ Tools වලින් ඔයාගේ Page Indexing තත්ත්වය බලන්න.
Dynamic Metadata Caching: App Router එකේ generateMetadata එක Server Component එකක් නිසා, Server side වලින් Fetch කරලා Render වෙනවා. Next.js මේවා Automatically Cache කරන නිසා Performance issues එන්නේ නැහැ.

නිගමනය

Next.js App එකක SEO සාර්ථක කරගන්න Metadata නිවැරදිව කළමනාකරණය කරන එක ගොඩක් වැදගත්. next/head (Pages Router) සහ අලුත් Metadata API (App Router) කියන ක්‍රම දෙකෙන්ම ඔයාගේ වෙබ් අඩවියට අවශ්‍ය Meta Tags පහසුවෙන් එකතු කරන්න පුළුවන්. මේකෙන් ඔයාගේ වෙබ් අඩවිය Search Engine Rankings වල ඉහළට ගේන්න වගේම Social Media වලදී ලස්සනට පෙන්වන්නත් පුළුවන්.

ඉතින්, ඔයාගේ ඊළඟ Next.js Project එක පටන් ගන්නකොට මේ Metadata ගැන හොඳට හිතලා වැඩ කරන්න. අදම මේක Try කරලා බලන්න. ඔයාට ප්‍රශ්න තියෙනවා නම්, පහළ Comment Section එකේ අනිවාර්යයෙන්ම අහන්න! මේ ලිපියෙන් ඔයාට වැදගත් දෙයක් ලැබුණා නම් Share කරන්නත් අමතක කරන්න එපා.

Next.js Metadata සහ SEO: ඔබගේ වෙබ් අඩවියට Google Rank ලබාගැනීමට | SC Guide

Metadata කියන්නේ මොකක්ද? ඇයි ඒක SEO වලට වැදගත්?

ප්‍රධාන Metadata වර්ග:

Next.js Pages Router (next/head) භාවිතයෙන් Metadata එකතු කරමු

Static Page එකකට Metadata එකතු කිරීම:

Dynamic Pages වලට Metadata එකතු කිරීම (e.g., Blog Post):

Next.js App Router (Next.js 13+) හි අලුත් Metadata API එක

Static Metadata එකතු කිරීම:

Dynamic Metadata එකතු කිරීම (`generateMetadata` Function):

Best Practices සහ Troubleshooting Tips

නිගමනය

ReactJS JSX Tutorial Sinhala - JavaScript XML | SC Guide

ReactJS JSX Sinhala Guide | React.createElement | Front-end Development | SC Guide

Metadata කියන්නේ මොකක්ද? ඇයි ඒක SEO වලට වැදගත්?

ප්‍රධාන Metadata වර්ග:

Next.js Pages Router (next/head) භාවිතයෙන් Metadata එකතු කරමු

Static Page එකකට Metadata එකතු කිරීම:

Dynamic Pages වලට Metadata එකතු කිරීම (e.g., Blog Post):

Next.js App Router (Next.js 13+) හි අලුත් Metadata API එක

Static Metadata එකතු කිරීම:

Dynamic Metadata එකතු කිරීම (generateMetadata Function):

Best Practices සහ Troubleshooting Tips

නිගමනය

ReactJS JSX Tutorial Sinhala - JavaScript XML | SC Guide

ReactJS JSX Sinhala Guide | React.createElement | Front-end Development | SC Guide

Dynamic Metadata එකතු කිරීම (`generateMetadata` Function):