Aplikasi Web Fullstack Next.js 15 · Pelajaran

Metadata, SEO dan Kepala Dokumen

Konfigurasikan tajuk halaman, penerangan, tag Open Graph dan favicon menggunakan API Metadata Next.js 15 untuk SEO yang kukuh dan perkongsian sosial.

Pelajaran 4 daripada 413 langkah

Metadata, SEO dan Kepala Dokumen ialah pelajaran Aplikasi Web Fullstack Next.js 15 percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Aplikasi Web Fullstack Next.js 15, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Mengapa Metadata Penting

Enjin carian dan platform sosial membaca metadata anda untuk membina hasil carian dan pratonton pautan — jadi tajuk dan perihalan mendorong klik serta mempengaruhi kedudukan.

API Metadata

Next.js 15 menggantikan suntingan manual <head> dengan API Metadata deklaratif: eksport objek metadata atau generateMetadata, dan API ini akan menghasilkan tag tersebut.

Eksport Metadata Statik

Untuk metadata yang tidak pernah berubah, eksport objek metadata yang ditaip — Next.js akan menggabungkannya ke dalam kepala dokumen secara automatik.

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

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

Templat Tajuk

Dalam susun atur, tetapkan templat tajuk supaya halaman anak berkongsi akhiran. Ruang letak %s akan digantikan dengan tajuk halaman itu sendiri.

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

Metadata Dinamik

Apabila tajuk bergantung pada data, eksport fungsi async generateMetadata — fungsi ini menerima parameter laluan dan boleh mendapatkan data sebelum pemaparan.

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

Tag Open Graph

Metadata Open Graph mengawal rupa pautan apabila dikongsi. Tambahkan medan openGraph dengan tajuk, perihalan, dan imej.

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

Kad Twitter

Twitter/X menggunakan metadata kadnya sendiri. Tetapkan medan twitter untuk mengawal pratonton yang dipaparkan apabila pautan anda disiarkan.

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

Favicon dan Ikon

Letakkan fail khas dalam app/ dan Next.js akan menyediakannya: favicon.ico untuk tab, icon.png untuk aplikasi, dan apple-icon.png untuk iOS.

Imej OG Dinamik

Next.js boleh menjana imej sosial secara langsung: opengraph-image.tsx yang menggunakan ImageResponse memaparkan JSX kepada PNG bagi setiap halaman.

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

Robots dan Peta Laman

Arahkan perayap dengan fail robots.ts dan terbitkan sitemap.ts supaya enjin carian menemui setiap laluan — kedua-duanya mengeksport data biasa yang boleh disiri.

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

Amalan Terbaik

Untuk SEO yang kukuh: gunakan tajuk dan perihalan unik bagi setiap halaman, hadkan tajuk kepada kira-kira 60 aksara, sentiasa sediakan imej Open Graph, dan gunakan generateMetadata untuk laluan dinamik.

Semakan Pantas

Uji pengetahuan anda tentang metadata.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari API Metadata: metadata statik berbanding generateMetadata, templat tajuk, pratonton openGraph/twitter, serta fail ikon/SEO khas.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Metadata, SEO dan Kepala Dokumen” percuma?

Ya — teks penuh “Metadata, SEO dan Kepala Dokumen” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Aplikasi Web Fullstack Next.js 15, tingkat taraf kepada CoddyKit PRO. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Metadata, SEO dan Kepala Dokumen”?

Konfigurasikan tajuk halaman, penerangan, tag Open Graph dan favicon menggunakan API Metadata Next.js 15 untuk SEO yang kukuh dan perkongsian sosial. Anda berlatih Aplikasi Web Fullstack Next.js 15 menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Aplikasi Web Fullstack Next.js 15?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Aplikasi Web Fullstack Next.js 15 di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Metadata, SEO dan Kepala Dokumen” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Aplikasi Web Fullstack Next.js 15 ini?

Ya. Setiap pelajaran Aplikasi Web Fullstack Next.js 15 menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Aplikasi Web Fullstack Next.js 15