Judul halaman, tag meta, dan deskripsi meta penting untuk SEO. Mereka adalah hal pertama yang dilihat pengguna di SERPS dan menentukan apakah mereka mengklik ke situs web Anda. Oleh karena itu penting untuk mengoptimalkan judul, tag meta, dan deskripsi situs web Anda.
Di Next.js, Anda menambahkannya melalui komponen custom head. Anda dapat menambahkannya di semua halaman dalam aplikasi atau menyesuaikannya untuk setiap halaman.
Menambahkan Tag Kepala Global ke Semua Halaman Next.js
Next.js menyediakan _app.js untuk menginisialisasi halaman. Anda dapat menggunakannya untuk membuat tag meta yang dibagikan di semua halaman.
impor '../styles/globals.css'
impor Kepala dari 'berikutnya/kepala'fungsiAplikasi Saya({ Komponen, pageProps }) {
kembali <>
<Kepala>
<nama meta="pengarang" konten="John Doe"/>
</Head>
<Komponen {...pageProps} />
</>
}
eksporbawaan Aplikasi Saya
Jika Anda ingin sebuah halaman memiliki judul dan deskripsi khusus, tambahkan komponen head ke dalamnya, dan Next.js akan menggunakannya sebagai ganti komponen default di komponen Aplikasi.
Menambahkan Tag Meta dan Deskripsi ke Halaman Next.js Tertentu
Meta tag dan deskripsi statis cocok untuk halaman yang kontennya tetap sama, misalnya halaman beranda.
Buka file /pages/index.js dan ubah tag head dengan judul dan deskripsi yang sesuai.
impor Kepala dari "berikutnya/kepala";const Rumah= () => {
kembali (
<>
<Kepala>
<judul>Blog</title>
<nama meta="area pandang" konten="skala awal = 1.0, lebar = lebar perangkat" />
<nama meta='keterangan' konten='Artikel Pemrograman'/>
</Head>
<utama>
<h1>Selamat Datang di blog saya!</h1>
</main>
</>
);
};
eksporbawaan Rumah;
Anda mengakses komponen Head dengan mengimpornya dari next/head. Ini bekerja dengan menambahkan elemen ke tag kepala sebuah halaman HTML. Tergantung di mana Anda menempatkan komponen ini, meta tag dan deskripsi akan tersedia di seluruh aplikasi atau di halaman individual.
Menambahkan judul, lebar viewport, dan deskripsi di file _app.js memastikan semua halaman memiliki metadata yang sama.
Halaman ini memiliki konten statis, tetapi terkadang, Anda mungkin ingin membuat halaman yang menggunakan konten dinamis.
Menambahkan Judul dan Deskripsi Meta Dinamis ke Halaman Next.js
Bergantung pada kasus penggunaan, Anda bisa menggunakan getStaticProps(), getStaticPaths() atau getServerSideProps() untuk mengambil data di Next.js. Data ini menentukan konten halaman. Gunakan itu untuk membuat metadata untuk halaman.
Misalnya, membuat metadata untuk aplikasi Next.js yang merender postingan blog akan membosankan.
Cara yang disarankan adalah membuat halaman dinamis yang menerima pengenal yang dapat Anda gunakan mengambil konten blog. Anda kemudian dapat menggunakan konten ini di komponen kepala.
impor { getAllPosts, getSinglePost } dari "../../utils/mdx";
impor Kepala dari "berikutnya/kepala";const Postingan = ({ judul, deskripsi, isi }) => {
kembali (
<>
<Kepala>
<judul>{judul}</title>
<nama meta="keterangan" konten={deskripsi} />
</Head>
<utama>{/* konten halaman */}</main>
</>
);
};eksporconst getStaticProps = asinkron ({ parameter }) => {
// dapatkan satu posting
const posting = menunggu getSinglePost (params.id, "postingan");kembali {
alat peraga: { ...posting },
};
};eksporconst getStaticPath = asinkron () => {
// Ambil semua posting
jalur const = getAllPosts("posting".peta(({ id }) => ({ parameter: { id } }));kembali {
jalur,
mundur: PALSU,
};
};
eksporbawaan Pos;
Fungsi getStaticProps meneruskan data post ke komponen Post sebagai props. Komponen Post merusak judul, deskripsi, dan konten dari props. Komponen head kemudian menggunakan judul dan deskripsi dalam tag meta.
Next.js Adalah Framework yang Dioptimalkan
Anda baru saja mempelajari cara menggunakan komponen head untuk menambahkan judul dan deskripsi meta ke proyek Next.js. Gunakan pengetahuan ini untuk membuat tajuk yang ramah SEO, naiki SERP, dan tarik lebih banyak pengunjung ke situs Anda.
Selain komponen head, Next.js menyediakan komponen lain seperti Tautan dan Gambar. Komponen-komponen ini dioptimalkan di luar kotak sehingga lebih mudah untuk membuat situs web cepat yang ramah SEO.
