Menambahkan File Robots.txt Pada Aplikasi Next JS Kamu
Next.js menawarkan berbagai macam fitur hebat. Baik itu cara menghasilkan halaman (secara statis atau berdasarkan permintaan server) atau memperbaruinya dengan Regenerasi Statis Inkremental, kerangka kerja ini memiliki banyak opsi menarik untuk menarik pengembang. Dari semua fitur Next.js, dukungan SEO-nya menonjol sebagai salah satu keunggulan utamanya dibandingkan kerangka kerja lain seperti Create React App.
React adalah bahasa yang bagus untuk pengembang JavaScript, tetapi sayangnya sangat buruk untuk SEO. Alasannya adalah React dirender di sisi klien. Konkretnya, ketika pengguna meminta halaman, alih-alih server mengembalikan HTML, itu melayani JavaScript, yang kemudian akan digunakan browser untuk membuat halaman.
Akibatnya, pemuatan halaman awal di SPA biasanya lebih lama daripada di aplikasi yang menggunakan rendering sisi server. Ditambah lagi, untuk waktu yang lama, bot Google tidak merayapi JavaScript dengan benar.
Next.js memperbaiki masalah ini dengan tidak hanya didasarkan pada React tetapi juga menawarkan rendering sisi server kepada pengembang. Ini memudahkan pengembang untuk memigrasikan aplikasi mereka.
Bagian penting dari SEO adalah memiliki robots.txt di situs web Anda. Dalam artikel ini, Anda akan menemukan apa itu robots.txt dan bagaimana Anda dapat menambahkannya ke aplikasi Next.js Anda, yang bukan sesuatu yang dilakukan Next di luar kotak.
Apa itu file robots.txt?
File robots.txt adalah file standar web yang memberi tahu perayap mesin telusur, seperti bot Google, laman mana yang dapat atau tidak dapat dirayapi. File ini berada di root host Anda dan oleh karena itu dapat diakses di URL ini: domainanda.com/robots.txt.
Seperti yang disebutkan, file ini memungkinkan Anda memberi tahu bot di mana halaman dan file dapat dirayapi atau tidak. Anda mungkin memiliki bagian-bagian tertentu dari aplikasi Anda yang Anda ingin tidak dapat diakses seperti halaman admin Anda.
Anda dapat melarang URL seperti ini:
User-agent: nameOfBot
Disallow: /admin/Atau izinkan mereka seperti ini:
User-agent: *
Allow: /Di akhir file Anda, Anda juga harus menambahkan baris untuk tujuan ke peta situs Anda seperti ini:
Sitemap: http://www.yourdomain.com/sitemap.xmlN.B., tidak terbiasa dengan peta situs? Jangan ragu untuk memeriksa dokumentasi Google tentang masalah ini.
Pada akhirnya, robots.txt Anda akan terlihat seperti ini:
User-agent: nameOfBot
Disallow: /admin/
User-agent: *
Allow: /
Sitemap: http://www.yourdomain.com/sitemap.xmlCara menambahkan file robots.txt ke aplikasi Next.js Anda
Menambahkan file robots.txt ke aplikasi Anda sangat mudah. Setiap proyek Next.js dilengkapi dengan folder bernama publik. Folder ini memungkinkan Anda untuk menyimpan aset statis yang kemudian dapat diakses dari akar domain Anda. Oleh karena itu, dengan menyimpan gambar seperti dolphin.jpeg di folder publik Anda, ketika proyek Anda dibuat, itu akan dapat diakses dari URL http://www.yourdomain.com/dolphin.jpeg. Teknik yang sama dapat digunakan untuk file robots.txt Anda.
Jadi, untuk menambahkan file robots.txt ke aplikasi Anda, yang harus Anda lakukan adalah meletakkannya di folder publik di aplikasi Anda.
Opsi alternatif: Generasi dinamis
Ada cara untuk menghasilkan file robots.txt Anda secara dinamis. Untuk melakukannya, Anda dapat memanfaatkan dua fitur Next.js: rute API dan penulisan ulang.
Next.js memungkinkan Anda untuk menentukan rute API. Ini berarti bahwa ketika permintaan dilakukan ke titik akhir API tertentu, Anda dapat mengembalikan konten yang benar untuk file robots.txt Anda.
Untuk melakukannya, buat file robots.js di folder pages/api Anda. Ini secara otomatis membuat rute. Di dalam file ini, tambahkan handler Anda, yang akan mengembalikan konten robots.txt
Anda:
export default function handler(req, res) {
res.send('Robots.txt content goes there'); // Send your `robots.txt content here
}Sayangnya, ini hanya tersedia di URL /api/robots dan seperti yang disebutkan di atas, crawler mesin pencari akan mencari url /robots.txt.
Untungnya, Next.js menawarkan fitur yang disebut rewrites. Ini memungkinkan Anda untuk merutekan ulang jalur tujuan tertentu ke jalur lain. Dalam kasus khusus ini, Anda ingin mengalihkan semua permintaan untuk /robots.txt ke /api/robots.
Untuk melakukannya, buka next.config.js Anda dan tambahkan penulisan ulang:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
async rewrites() {
return [
{
source: '/robots.txt',
destination: '/api/robots'
}
];
}
}
module.exports = nextConfig Dengan ini, setiap kali Anda mengakses /robots.txt, itu akan memanggil /api/robots dan menampilkan pesan "Konten Robots.txt masuk ke sana".
Bagaimana cara memvalidasi file robots.txt Anda?
Setelah menerapkan aplikasi ke produksi, Anda dapat memvalidasi file robots.txt berkat penguji yang disediakan oleh Google Penelusuran. Jika file Anda valid, Anda akan melihat pesan yang mengatakan 0 eror ditampilkan.
Untuk menyebarkan aplikasi Anda pada produksi, saya sangat merekomendasikan Vercel. Platform ini dibuat oleh pendiri Next.js dan dibangun dengan mempertimbangkan kerangka kerja ini. LogRocket memiliki tutorial tentang cara men-deploy aplikasi Next.js Anda di Vercel.
Kesimpulan
SEO sangat penting untuk situs yang perlu ditemukan. Untuk memiliki peringkat halaman yang baik, halaman web harus mudah dirayapi oleh perayap mesin pencari. Next.js mempermudah pengembang React dengan menawarkan dukungan SEO bawaan. Dukungan ini mencakup kemampuan untuk menambahkan file robots.txt ke proyek Anda dengan mudah.
Dalam artikel ini, Anda mempelajari apa itu file robots.txt, cara menambahkannya ke aplikasi Next.js, dan cara memvalidasinya saat aplikasi diterapkan.
Semoga artikel ini dapat bermanfaat bagi kita semua dan jika masih ada yang kurang dipahami silahkan tinggalkan pertanyaan di kolom komentar ya!
Selamat mengcoding