Metadata၊ SEO နှင့် Social Sharing

Page UI လှပေမယ့် browser tab မှာ “Next App” ပဲပေါ်နေပြီး link share လိုက်ရင် preview မထွက်ရင် product က မပြီးသေးပါဘူး။ Metadata က user မျက်စိရှေ့က UI မဟုတ်ပေမယ့် search result နဲ့ social share မှာ ပထမဆုံးမြင်ရတဲ့မျက်နှာဖြစ်ပါတယ်။

နားလည်ထားရမယ့် အချက်

မပြောင်းလဲတဲ့ metadata ကို layout သို့မဟုတ် page မှာ metadata object နဲ့ထုတ်ပါ။ Note title လို data ပေါ်မူတည်ရင် generateMetadata သုံးပြီး Server Component နယ်ပယ်မှာ resolve လုပ်ပါ။ app/icon.png၊ app/opengraph-image.png၊ sitemap.ts နဲ့ robots.ts တို့လို file conventions ကို Next.js က အလိုအလျောက် head tag သို့မဟုတ် route အဖြစ်ပြောင်းပေးပါတယ်။

အတူတူ စမ်းရေးကြည့်မယ်

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    default: "Myanmar Notes",
    template: "%s | Myanmar Notes",
  },
  description: "နည်းပညာမှတ်စုများကို မြန်မာလို လေ့လာပါ။",
  openGraph: {
    title: "Myanmar Notes",
    description: "နေ့စဉ်လေ့လာမှုကို စနစ်တကျသိမ်းဆည်းပါ။",
    images: ["/og.png"],
  },
};

Code က ဘယ်လိုအလုပ်လုပ်သလဲ

Root metadata မှာ title template ထားလို့ child page title တိုင်းနောက်မှာ site name ပါလာပါတယ်။ Description က search engine ကို page အကြောင်းတိုတိုပြောပေးပါတယ်။

Browser title၊ search description နှင့် social preview အတွက် metadata tags ထွက်လာမည်။

Next.js — Metadata and OG Images — Next.js