By Thisara Priyamal in Next.js — 28 Jul 2025

Next.js Metadata සහ SEO: වෙබ් අඩවි ඉහළටම ගේමු! SC Guide

ආයුබෝවන් යාලුවනේ, කොහොමද හැමෝටම! 👋

වෙබ් Developer කෙනෙක් විදියට අපි හැමෝම දන්නවා වෙබ් අඩවියක් හදන එක විතරක් මදි කියලා. ඒක හදලා ලෝකෙට පෙන්නන්නත් ඕනේ, නේද? ඒ කියන්නේ Google, Bing වගේ Search Engines වල සහ Facebook, LinkedIn, Twitter වගේ Social Media platforms වල හොඳට පේන්න තියෙන්න ඕනේ. අන්න ඒකට තමයි SEO (Search Engine Optimization) කියන දේ අපිට ගොඩක් වැදගත් වෙන්නේ.

අද අපි කතා කරන්නේ Next.js project එකක් කරනකොට මේ SEO වැඩේට Metadata කොහොමද පාවිච්චි කරන්නේ කියලා. විශේෂයෙන්ම App Router එකේ අලුතෙන්ම ආපු Metadata API එක ගැන සහ ඒකෙන් අපිට ලැබෙන වාසි ගැන සවිස්තරාත්මකව බලමු. ඔයා Pages Router එක පාවිච්චි කරන කෙනෙක් නම්, කලබල වෙන්න එපා, next/head ගැනත් පොඩ්ඩක් කතා කරමු. මේ Guide එකෙන් ඔයාට ඔබේ Next.js වෙබ් අඩවිය Search Engines සහ Social Media වල හොඳටම Optimize කරගන්න අවශ්‍ය දැනුම සහ Practical tips ටික ලැබෙයි!

1. SEO සහ Metadata කියන්නේ මොනවද? ඇයි මේවා වැදගත්?

සරලවම කිව්වොත්, SEO (Search Engine Optimization) කියන්නේ අපේ වෙබ් අඩවියක් Search Engine එකක (Google වගේ) Free (Organic) Traffic ගොඩක් එන විදියට Optimize කරන ක්‍රියාවලියට. හිතන්නකෝ, ඔයා Online කේක් විකුණන කෙනෙක් කියලා. කෙනෙක් "Best cake delivery Colombo" කියලා Google එකේ Search කරනකොට, ඔයාගේ වෙබ් අඩවිය මුල් තැනටම ආවොත්, ඒක කොච්චර ලොකු වාසියක්ද, නේද? ඒක තමයි SEO වල ප්‍රධානම අරමුණ.

ඉතින් මේ SEO වැඩේට Metadata කියන්නේ නැතිවම බැරි දෙයක්. Metadata කියන්නේ අපේ වෙබ් පිටුවක් ගැන විස්තර සපයන දත්ත වලට. මේවා කෙලින්ම අපේ වෙබ් පිටුව මත පේන්නේ නැති වුණාට, ඒවා Browser එකට, Search Engine වලට සහ Social Media platforms වලට වැදගත් තොරතුරු සපයනවා. මේවා සාමාන්‍යයෙන් වෙබ් පිටුවේ HTML එකේ <head> tag එක ඇතුළේ තමයි තියෙන්නේ.

ප්‍රධානම Metadata වර්ග කිහිපයක්:

Title (<title> tag): වෙබ් පිටුවේ නම. Browser tab එකේ පෙන්වන්නේ මේකයි. Search Engine results වලදීත් මේක ලොකු font එකෙන් පෙන්වනවා. ඒ නිසා ආකර්ෂණීය සහ අදාළ Title එකක් දාන එක ගොඩක් වැදගත්.
Meta Description (<meta name="description">): වෙබ් පිටුවේ අන්තර්ගතය ගැන කෙටි සාරාංශයක්. Search Engine results වල Title එක යටින් මේක පෙන්වනවා. හොඳ Description එකක් නිසා user කෙනෙක්ට ඔබේ link එක click කරන්න පෙළඹෙනවා.
Meta Keywords (<meta name="keywords">): මේවා අද කාලේ SEO වලට එතරම් වැදගත් නැහැ. Google වගේ Search Engines මේවා ගණන් ගන්නේ නැහැ වගේම, සමහර වෙලාවට මේවා පාවිච්චි කරන එක Search Engine Ranking වලට හානිකර වෙන්නත් පුළුවන්. ඒ නිසා මේවා ගැන වැඩිය හිතන්න එපා.
Open Graph (OG) Tags: මේවා තමයි Social Media වල share කරනකොට අපේ link එක ලස්සනට පේන්න සලස්වන්නේ. උදාහරණයක් විදියට, Facebook එකේ link එකක් share කරනකොට ලොකු Image එකක් එක්ක Title එකයි Description එකයි එනවා නේද? ඒ OG Tags නිසා. අපි මේ ගැන පස්සේ විස්තරාත්මකව කතා කරමු.
Canonical URL (<link rel="canonical">): ඔයාගේ වෙබ් අඩවියේ එකම content එක පිටු කිහිපයක තියෙනවා නම් (උදා: /product/item-1 සහ /products?id=item-1), Search Engine වලට කියන්න පුළුවන් මේ හැම පිටුවකම Original source එක මොකක්ද කියලා. ඒක Duplicate Content issues වළක්වා ගන්න වැදගත්.

මේ Metadata නිවැරදිව පාවිච්චි කරන එකෙන් Search Engines වලට ඔබේ අඩවිය හොඳට තේරුම් ගන්න පුළුවන් වෙනවා වගේම, user කෙනෙක්ට Search Results වල සහ Social Media වල ඔබේ අඩවියක් දකිනකොට ඒ ගැන පැහැදිලි අවබෝධයක් ලැබෙනවා. ඒක Traffic වැඩි කරගන්න හොඳම ක්‍රමයක්!

2. Next.js වල Metadata හැසිරවීම: App Router එකේ අලුත් විදිය (Metadata API)

Next.js 13 සහ ඊට පස්සේ versions වලදී App Router එකත් එක්ක Metadata හැසිරවීම සඳහා අලුත් සහ ගොඩක් පහසු API එකක් හඳුන්වා දීලා තියෙනවා. මේක Pages Router එකේ තිබුණු next/head (දැන් next/script, next/link වගේ components වලින් එන Head component එක) වලට වඩා ගොඩක් බලවත් සහ භාවිතයට පහසුයි.

App Router එකේදී Metadata හැසිරවීම ප්‍රධාන ක්‍රම දෙකකට කරන්න පුළුවන්:

Static Metadata: Pages හෝ Layouts වලට අදාළ Metadata compile-time එකේදී (build කරනකොට) define කරනවා. මේවා සාමාන්‍යයෙන් වෙනස් වෙන්නේ නැති, හැම page එකකටම පොදු metadata.
Dynamic Metadata: Database එකකින් හෝ API එකකින් එන data අනුව page එකකට අදාළ Metadata run-time එකේදී (request එකක් එනකොට) generate කරනවා. Blog Posts, Product pages වගේ දේවල් වලට මේක ගොඩක් වැදගත්.

Static Metadata එකතු කරමු

ඔයාට Static Metadata එකතු කරන්න පුළුවන් layout.js හෝ page.js file එකක metadata object එකක් export කිරීමෙන්. layout.js එකක define කරන Metadata එක, ඒ Layout එක use කරන හැම Page එකකටම apply වෙනවා. Page එකක define කරන Metadata එක, Layout එකේ Metadata override කරනවා.

උදාහරණයක් විදියට, ඔයාගේ මුළු වෙබ් අඩවියටම පොදු Title එකක් සහ Description එකක් දෙන්න පුළුවන් app/layout.js file එකේ මෙහෙම:

app/layout.js

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'My Awesome Next.js Blog SC Guide',
  description: 'Learn Next.js, React, and Web Development with Sinhala tutorials and practical examples.',
  keywords: ['Next.js', 'React', 'Web Development', 'Sinhala', 'Tutorials', 'Programming', 'SC Guide'],
  openGraph: {
    title: 'My Awesome Next.js Blog SC Guide',
    description: 'Learn Next.js, React, and Web Development with Sinhala tutorials and practical examples.',
    url: 'https://yourwebsite.com',
    siteName: 'My Awesome Next.js Blog',
    images: [
      {
        url: 'https://yourwebsite.com/og-image.jpg', // Must be an absolute URL
        width: 1200,
        height: 630,
        alt: 'My Awesome Next.js Blog Open Graph Image',
      },
    ],
    locale: 'si_LK',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Awesome Next.js Blog SC Guide',
    description: 'Learn Next.js, React, and Web Development with Sinhala tutorials and practical examples.',
    creator: '@yourtwitterhandle',
    images: ['https://yourwebsite.com/twitter-image.jpg'],
  },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="si">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

මේ metadata object එක ඇතුළේ Title, Description, Keywords, Open Graph (OG) tags සහ Twitter tags පවා අපිට define කරන්න පුළුවන්. title object එකට template සහ default values දාන්නත් පුළුවන්, ඒකෙන් තවත් පහසු වෙනවා.

app/about/page.js

දැන් හිතන්න About Us Page එකට වෙනම Title එකක් සහ Description එකක් ඕනේ කියලා. එතකොට app/about/page.js file එකේ මෙහෙම දාන්න පුළුවන්:

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'About Us - My Awesome Next.js Blog',
  description: 'Find out more about My Awesome Next.js Blog and our mission to provide quality Sinhala programming tutorials.',
};

export default function AboutPage() {
  return (
    <h1>About Our Blog</h1>
    // ... rest of your About page content
  );
}

මේ විදියට Page එකේ Metadata define කරනකොට, layout.js එකේ තිබ්බ Metadata override වෙනවා. හැබැයි Layout එකේ තියෙන Open Graph වගේ Tags මේ Page එකටත් apply වෙනවා. ඒක ගොඩක් Smart feature එකක්!

Dynamic Metadata එකතු කරමු (Blog Posts වගේ දේවල් වලට)

Dynamic content (data-driven content) තියෙන pages වලට (උදා: blog posts, product pages) Metadata generate කරන්න generateMetadata කියන asynchronous function එක පාවිච්චි කරන්න පුළුවන්. මේ function එකට params සහ searchParams විදියට current route එකේ parameters සහ query parameters ලැබෙනවා.

app/blog/[slug]/page.js (Dynamic Blog Post Page)

import type { Metadata, ResolvingMetadata } from 'next';

type Props = {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

// Simulate fetching a blog post from an API or database
async function getBlogPost(slug: string) {
  // In a real app, you'd fetch from an API or DB
  const posts = {
    'nextjs-seo': {
      title: 'Next.js SEO Tips: A Comprehensive Guide',
      description: 'Learn how to optimize your Next.js application for search engines with the new Metadata API.',
      image: 'https://yourwebsite.com/blog-images/nextjs-seo-banner.jpg',
    },
    'react-hooks': {
      title: 'Mastering React Hooks: From useState to custom hooks',
      description: 'A deep dive into React Hooks, providing practical examples and best practices.',
      image: 'https://yourwebsite.com/blog-images/react-hooks-banner.jpg',
    },
  };
  return posts[slug] || null;
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const slug = params.slug;
  const post = await getBlogPost(slug);

  if (!post) {
    return { title: 'Post Not Found' };
  }

  // Optionally access and extend parent metadata
  const previousImages = (await parent).openGraph?.images || [];

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      images: [post.image, ...previousImages],
    },
  };
}

export default async function BlogPostPage({ params }: Props) {
  const post = await getBlogPost(params.slug);

  if (!post) {
    return <h1>Post Not Found</h1>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.description}</p>
      {/* ... rest of your blog post content */}
    </div>
  );
}

මේ generateMetadata function එක server එකේදී run වෙලා, අදාළ Post එකේ data අරගෙන ඒ අනුව Title, Description සහ Open Graph Images වගේ දේවල් dynamic විදියට generate කරනවා. මේක SEO friendly වෙන්න ගොඩක් වැදගත්, මොකද Search Engines වලට ඔබගේ සෑම පිටුවකටම අදාළ අද්විතීය metadata එකක් ලැබෙනවා.

Pages Router එකේදී next/head පාවිච්චි කරනවා නම්:

ඔබ Next.js App Router එකට migrate වෙලා නැත්නම් හෝ Pages Router එකේම වැඩ කරනවා නම්, ඔබට next/head component එක පාවිච්චි කරන්න පුළුවන්. ඒත් මේක Pages Router එකේදී පමණයි. App Router එකේදී මේක පාවිච්චි කරන්න එපා.

// Example in a Pages Router component (e.g., pages/index.js)
import Head from 'next/head';

function HomePage() {
  return (
    <div>
      <Head>
        <title>My Next.js Homepage</title>
        <meta name="description" content="This is the homepage of my Next.js application." />
        <meta property="og:title" content="My Next.js Homepage" />
        <meta property="og:description" content="This is the homepage of my Next.js application." />
        {/* Add more meta tags as needed */}
      </Head>
      <h1>Welcome to My Next.js App</h1>
    </div>
  );
}

export default HomePage;

next/head component එක ඇතුළේ දාන හැම tag එකක්ම HTML <head> එකට add වෙනවා. හැබැයි App Router එකේ Metadata API එක ගොඩක් Structureed සහ robust නිසා, හැකි ඉක්මනින් App Router එකට migrate වෙන එක හොඳයි.

අද කාලේ Social Media කියන්නේ අනිවාර්යයෙන්ම බලපාන දෙයක්, නේද? ඔයාගේ වෙබ් අඩවියේ link එකක් Facebook, LinkedIn, Twitter, WhatsApp වගේ platform එකක share කරනකොට, ඒ link එක කොච්චර ලස්සනට පේනවද කියන එක ගොඩක් වැදගත්. ඒකෙන් users ලා link එක click කරන්න පෙළඹෙනවා.

මේකට තමයි Open Graph (OG) Tags පාවිච්චි කරන්නේ. මේවා Facebook විසින් හඳුන්වා දුන්නත්, දැන් හැම Social Media platform එකක්ම වගේ මේවා recognize කරනවා.

ප්‍රධාන Open Graph Tags:

og:title: share කරන post එකේ Title එක.
og:description: share කරන post එකේ කෙටි විස්තරයක්.
og:image: share කරන post එකේ Thumbnail image එක. මේක තමයි ගොඩක්ම වැදගත්. Image එකේ Size එක (recommended: 1200x630 pixels) සහ Aspect Ratio එක (1.91:1) ගැන සැලකිලිමත් වෙන්න. Absolute URL එකක් දෙන්නත් ඕනේ.
og:url: share කරන post එකේ canonical URL එක.
og:type: share කරන content එකේ වර්ගය (e.g., website, article, video.movie).
og:site_name: වෙබ් අඩවියේ නම.

App Router Metadata API එකෙන් මේවා Define කරන එක ගොඩක් පහසුයි. උදාහරණයක් විදියට, Static Metadata section එකේ තිබ්බ layout.js code එකේ openGraph object එක දැක්කා නේද? ඒ වගේම twitter object එකෙන් Twitter Cards වලට අවශ්‍ය Metadata define කරන්නත් පුළුවන්.

Twitter Cards:

Twitter වලට විශේෂයෙන්ම Twitter Cards තියෙනවා. මේවා og: tags වලට සමානයි, ඒත් twitter: prefix එකෙන් තමයි එන්නේ. Next.js Metadata API එකෙන් ඒකත් define කරන්න පුළුවන්.

export const metadata: Metadata = {
  // ...other metadata
  twitter: {
    card: 'summary_large_image', // Can be 'summary', 'summary_large_image', 'app', or 'player'
    title: 'My Next.js App',
    description: 'This is a description for my Next.js app on Twitter.',
    creator: '@yourtwitterhandle', // Your Twitter handle
    images: ['https://yourwebsite.com/twitter-card-image.jpg'], // Absolute URL
  },
};

මේවා හරියටම configure කරන එකෙන් ඔයාගේ වෙබ් අඩවිය Social Media වලදී Professional විදියට පෙනෙනවා වගේම, Click-Through Rate (CTR) එකත් වැඩි වෙනවා.

4. Metadata නිවැරදිද කියලා බලමු (Review & Troubleshooting)

අපි Metadata add කරාට වැඩේ ඉවර නැහැ. ඒවා හරියටම Browser එකට සහ Search Engines වලට ලැබෙනවද කියලා බලන්නත් ඕනේ, නේද? මෙන්න ඒකට පාවිච්චි කරන්න පුළුවන් Tools ටිකක්:

Browser Developer Tools:

මේක තමයි පලවෙනිම සහ ලේසිම ක්‍රමය. ඕනෑම Browser එකක (Chrome, Firefox) Developer Tools Open කරලා (F12 හෝ Right-Click > Inspect) Elements tab එකට යන්න. එතකොට HTML එකේ <head> section එක ඇතුළේ ඔයා දාපු සියලුම Title, Meta, Link tags බලාගන්න පුළුවන්. Dynamic metadata දාපු page එකකට ගිහින් Refresh කරලා බලන්න, Data load වුණාට පස්සේ tags update වෙනවද කියලා.

Search Engine Tools:

Google Search Console: මේක Google එකෙන් දෙන Free tool එකක්. ඔයාගේ වෙබ් අඩවිය මේකට verify කරාට පස්සේ, Google Bot ඔයාගේ site එක crawl කරන විදිය, Index වෙන පිටු, SEO issues වගේ ගොඩක් දේවල් බලාගන්න පුළුවන්. Metadata related errors මේකෙන් පෙන්නනවා.
Google Lighthouse: Chrome Developer Tools ඇතුළේම තියෙන මේ tool එකෙන් SEO, Performance, Accessibility වගේ දේවල් ගැන Audit එකක් කරන්න පුළුවන්. ඒකෙන් Metadata related recommendations පවා දෙනවා.

Social Media platforms වලටම තියෙන Debugger Tools පාවිච්චි කරලා, ඔයාගේ OG Tags හරියටම වැඩ කරනවද කියලා බලන්න පුළුවන්. මේවා Free Tools.

Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/ - ඔයාගේ link එක දාලා "Debug" click කරාම, Facebook එකට ඒ link එක ගැන පේන විදිය (Image, Title, Description) පෙන්නනවා. Cache Clear කරන්නත් පුළුවන්.
Twitter Card Validator: https://cards-dev.twitter.com/validator - මේකත් Facebook එකට සමානයි, Twitter Cards වලට.
LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/

Common Issues:

Missing Metadata: සමහර පිටු වලට Metadata දාන්න අමතක වෙලා.
Generic Metadata: හැම පිටුවකටම එකම Title එකයි Description එකයි තියෙනවා නම් ඒක SEO වලට හොඳ නැහැ. හැම පිටුවකටම අදාළ, Unique Metadata දාන්න.
Truncated Descriptions/Titles: Search Engines වල Title එකට සහ Description එකට අක්ෂර සීමාවක් (character limit) තියෙනවා. ඒ සීමාව ඉක්මවා ගියොත්, ඒවා truncated (කපා හැරලා) පෙන්වනවා. ගොඩක් වෙලාවට Title එකට අක්ෂර 60-70ක් සහ Description එකට අක්ෂර 150-160ක් තමයි නිර්දේශ කරන්නේ.
Incorrect Dynamic Metadata: Dynamic Pages වලදී Data load වෙන්න කලින් Search Engine Bot එක Crawl කරොත්, හිස් Metadata එන්න පුළුවන්. Next.js App Router එකේ generateMetadata function එක Async නිසා මේ ප්‍රශ්නය අඩුයි.
Absolute vs Relative URLs for Images: Open Graph Images වලට හැම වෙලාවෙම Absolute URLs (https://yourwebsite.com/image.jpg) පාවිච්චි කරන්න ඕනේ.

5. හොඳම Practices සහ Tip (Best Practices & Tips)

Next.js Metadata වලින් උපරිම ප්‍රයෝජන ගන්න නම්, මේ Best Practices ටික අනිවාර්යයෙන්ම මතක තියාගන්න:

හැම පිටුවකටම Unique Metadata:ඒ කියන්නේ ඔබේ වෙබ් අඩවියේ හැම පිටුවකටම වෙන වෙනම, අදාළ Title එකක් සහ Description එකක් තියෙන්න ඕනේ. "Home Page" සහ "About Us" කියන පිටු දෙකටම "My Website" කියලා Title එක දුන්නොත්, Search Engines වලට ඒ දෙක අතර වෙනසක් තේරෙන්නේ නැහැ. ඒ නිසා හැම පිටුවකටම ඒ පිටුවේ අන්තර්ගතය පැහැදිලි කරන Unique Title සහ Description දෙන්න. Dynamic Metadata මේකට ගොඩක් වැදගත්.
Keywords Smart විදියට පාවිච්චි කරන්න:Title එකේ සහ Description එකේ අදාළ Keywords පාවිච්චි කරන්න. ඒත් "keyword stuffing" කරන්න එපා. ඒ කියන්නේ එකම Keyword එක කිහිප වතාවක්ම දාලා Description එක පුරවන්න එපා. ඒක Search Engines වලට Spam වගේ පේන්න පුළුවන්. Natural විදියට, අදාළ වන පරිදි Keywords යොදන්න.
High-Quality Open Graph Images:og:image එක ලස්සන, ආකර්ෂණීය එකක් වෙන්න ඕනේ. ඒ වගේම recommended size (1200x630px) එකට ආසන්නව තියෙනවා නම් හොඳයි. Image එකේ Quality එක, Content එකට අදාළ වීම, සහ Text Readability එක ගැන අවධානය යොමු කරන්න.
User Experience (UX) ගැන හිතන්න:SEO කියන්නේ Google එකට විතරක් කරන වැඩක් නෙවෙයි. User Experience එකත් ගොඩක් වැදගත්. ඔබේ Title එක සහ Description එක user කෙනෙක්ට click කරන්න ආස හිතෙන විදියට තියෙන්න ඕනේ. ඒ වගේම page එක load වෙන වේගය (Performance), Mobile Responsiveness වගේ දේවලුත් SEO වලට ගොඩක් බලපානවා. Next.js මේ හැමදේටම හොඳ Solutions සපයනවා.

Canonical URLs:ඔබේ වෙබ් අඩවියේ එකම content එක URL කිහිපයකින් access කරන්න පුළුවන් නම් (උදා: example.com/products/item1 සහ example.com/item1?category=shoes), Google වගේ Search Engines වලට Duplicate Content issues එන්න පුළුවන්. මේකෙන් වෙන්නේ Search Engine එකට තීරණය කරන්න බැරි වෙනවා, මේ URL දෙකෙන් Original එක මොකක්ද කියලා. ඒ නිසා <link rel="canonical" href="your-preferred-url"> tag එක පාවිච්චි කරලා, Original URL එක Search Engine එකට පෙන්නන්න. Next.js Metadata API එකෙන් මේකත් පහසුවෙන් කරන්න පුළුවන්.

export const metadata: Metadata = {
  // ...
  alternates: {
    canonical: 'https://yourwebsite.com/blog/my-awesome-post',
  },
};

නිගමනය (Conclusion)

ඉතින් යාලුවනේ, Next.js Metadata API එක පාවිච්චි කරලා අපේ වෙබ් අඩවි වල SEO සහ Social Media Presence එක වැඩි දියුණු කරගන්න පුළුවන් විදිය ගැන අපි අද ගොඩක් දේවල් කතා කළා. Search Engine වල සහ Social Media වල ඔබේ වෙබ් අඩවිය හොඳින් ප්‍රදර්ශනය කිරීම, වැඩි Traffic ප්‍රමාණයක් ලබා ගැනීම සඳහා අත්‍යවශ්‍යයි. Next.js App Router එකේ අලුත් Metadata API එක ඒකට අපිට ලොකු පහසුවක් සලසනවා.

මතක තියාගන්න, හොඳ SEO කියන්නේ එක රැයින් වෙන දෙයක් නෙවෙයි. ඒක Continuous Process එකක්. හැම වෙලාවෙම ඔබේ Metadata optimize කරන්න, Google Search Console වගේ tools වලින් analytics බලන්න, සහ ඔබේ content එක user friendly විදියට maintain කරන්න. එතකොට අනිවාර්යයෙන්ම ඔබේ වෙබ් අඩවිය සාර්ථක වෙයි!

ඔබේ Next.js project එකක මේ Metadata API එක පාවිච්චි කරලා බැලුවද? මොන වගේ අත්දැකීම්ද තිබ්බේ? නැත්නම් මොනවා හරි ප්‍රශ්න තියෙනවද? පහළින් Comment එකක් දාගෙන යන්න. ඒ වගේම මේ Guide එකෙන් ඔයාට වැඩක් වුණා නම්, අනිත් Developer යාලුවෝ එක්ක Share කරන්නත් අමතක කරන්න එපා!

ආයෙත් මේ වගේම වැදගත් Technical Guide එකකින් හමුවෙමු! Happy Coding! ✨

Next.js Metadata සහ SEO: වෙබ් අඩවි ඉහළටම ගේමු! SC Guide

1. SEO සහ Metadata කියන්නේ මොනවද? ඇයි මේවා වැදගත්?

ප්‍රධානම Metadata වර්ග කිහිපයක්:

2. Next.js වල Metadata හැසිරවීම: App Router එකේ අලුත් විදිය (Metadata API)

Static Metadata එකතු කරමු

app/layout.js

app/about/page.js

Dynamic Metadata එකතු කරමු (Blog Posts වගේ දේවල් වලට)

app/blog/[slug]/page.js (Dynamic Blog Post Page)

Pages Router එකේදී next/head පාවිච්චි කරනවා නම්:

ප්‍රධාන Open Graph Tags:

Twitter Cards:

4. Metadata නිවැරදිද කියලා බලමු (Review & Troubleshooting)

Browser Developer Tools:

Search Engine Tools:

Common Issues:

5. හොඳම Practices සහ Tip (Best Practices & Tips)

නිගමනය (Conclusion)

Python Asynchronous Programming Sinhala Tutorial | asyncio Basics SC Guide

ReactJS Components: Functional සහ Class - SC Guide

1. SEO සහ Metadata කියන්නේ මොනවද? ඇයි මේවා වැදගත්?

ප්‍රධානම Metadata වර්ග කිහිපයක්:

2. Next.js වල Metadata හැසිරවීම: App Router එකේ අලුත් විදිය (Metadata API)

Static Metadata එකතු කරමු

app/layout.js

app/about/page.js

Dynamic Metadata එකතු කරමු (Blog Posts වගේ දේවල් වලට)

app/blog/[slug]/page.js (Dynamic Blog Post Page)

Pages Router එකේදී next/head පාවිච්චි කරනවා නම්:

3. Open Graph Tags සහ Social Media Share කිරීම

ප්‍රධාන Open Graph Tags:

Twitter Cards:

4. Metadata නිවැරදිද කියලා බලමු (Review & Troubleshooting)

Browser Developer Tools:

Search Engine Tools:

Social Media Debuggers:

Common Issues:

5. හොඳම Practices සහ Tip (Best Practices & Tips)

නිගමනය (Conclusion)

Python Asynchronous Programming Sinhala Tutorial | asyncio Basics SC Guide

ReactJS Components: Functional සහ Class - SC Guide

You might also like...