0Pricing
Next.js 15 Fullstack Web Apps · บทเรียน

ข้อมูลเมทาดาทา SEO และส่วนหัวเอกสาร

กำหนดชื่อหน้า คำอธิบาย แท็ก Open Graph และไอคอนเว็บไซต์ด้วย Metadata API ของ Next.js 15 เพื่อเสริม SEO และการแชร์บนโซเชียล

ข้อมูลเมทาดาทา SEO และส่วนหัวเอกสาร เป็นบทเรียน Next.js 15 Fullstack Web Apps ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Next.js 15 Fullstack Web Apps และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Next.js 15 Fullstack Web Apps มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Why Metadata Matters

Search engines and social platforms read your metadata to build results and link previews — so titles and descriptions drive clicks and ranking.

The Metadata API

Next.js 15 replaces manual <head> edits with a declarative Metadata API: export a metadata object or generateMetadata and it renders the tags.

Static Metadata Export

For metadata that never changes, export a typed metadata object — Next.js merges it into the document head automatically.

export const metadata = {
  title: 'My Dashboard',
  description: 'Manage your account and settings',
};

export default function Page() {
  return <h1>Dashboard</h1>;
}

Title Templates

In a layout, set a title template so child pages share a suffix. The %s placeholder is swapped for each page's own title.

export const metadata = {
  title: {
    template: '%s | Acme',
    default: 'Acme',
  },
};

Dynamic Metadata

When the title depends on data, export an async generateMetadata function — it gets the route params and can fetch before rendering.

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return { title: post.title, description: post.excerpt };
}

Open Graph Tags

Open Graph metadata controls how a link looks when shared. Add an openGraph field with a title, description, and image.

export const metadata = {
  openGraph: {
    title: 'Acme Launch',
    description: 'The new way to build apps',
    images: ['/og-launch.png'],
  },
};

Twitter Cards

Twitter/X uses its own card metadata. Set the twitter field to control the preview shown when your link gets posted.

export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Acme Launch',
    images: ['/og-launch.png'],
  },
};

Favicons and Icons

Drop special files in app/ and Next.js wires them up: favicon.ico for the tab, icon.png for the app, apple-icon.png for iOS.

Dynamic OG Images

Next.js can generate social images on the fly: an opengraph-image.tsx using ImageResponse renders JSX to a PNG per page.

import { ImageResponse } from 'next/og';
export default function Image() {
  return new ImageResponse(<div style={{ fontSize: 64 }}>Acme</div>);
}

Robots and Sitemaps

Steer crawlers with a robots.ts file and publish a sitemap.ts so search engines find every route — both export plain serializable data.

export default function robots() {
  return { rules: { userAgent: '*', allow: '/' }, sitemap: 'https://acme.com/sitemap.xml' };
}

Best Practices

For strong SEO: unique title and description per page, titles under ~60 chars, always an Open Graph image, and generateMetadata for dynamic routes.

Quick Check

Test your metadata knowledge.

Recap

You learned the Metadata API: static metadata vs generateMetadata, title templates, openGraph/twitter previews, and the special icon/SEO files.

คำถามที่พบบ่อย

บทเรียน “ข้อมูลเมทาดาทา SEO และส่วนหัวเอกสาร” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ข้อมูลเมทาดาทา SEO และส่วนหัวเอกสาร” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Next.js 15 Fullstack Web Apps ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Next.js 15 Fullstack Web Apps มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ข้อมูลเมทาดาทา SEO และส่วนหัวเอกสาร”

กำหนดชื่อหน้า คำอธิบาย แท็ก Open Graph และไอคอนเว็บไซต์ด้วย Metadata API ของ Next.js 15 เพื่อเสริม SEO และการแชร์บนโซเชียล คุณปฏิบัติ Next.js 15 Fullstack Web Apps ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Next.js 15 Fullstack Web Apps หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Next.js 15 Fullstack Web Apps บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ข้อมูลเมทาดาทา SEO และส่วนหัวเอกสาร” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Next.js 15 Fullstack Web Apps นี้ได้ไหม

ได้ บทเรียน Next.js 15 Fullstack Web Apps ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. แนะนำ Next.js 15
  2. การตั้งค่าและกำหนดค่าโครงการ
  3. พื้นฐานหน้า เลย์เอาต์ และการกำหนดเส้นทาง
  4. ข้อมูลเมทาดาทา SEO และส่วนหัวเอกสาร
← กลับไปที่ Next.js 15 Fullstack Web Apps