Ingin tahu lebih banyak tentang kursus “Pengembang JavaScript. Dasar "? Kami mengundang Anda ke webinar gratis, di mana guru kursus akan memberikan jawaban atas semua pertanyaan Anda.
Ada beberapa pendekatan modern untuk pengembangan aplikasi. Dua yang paling populer adalah aplikasi satu halaman (SPA) dan aplikasi server-render .
Aplikasi satu halaman memiliki kinerja yang luar biasa, dan meskipun perayap Google telah menanganinya sedikit berbeda setelah beberapa pembaruan , hasil SEO untuk mereka masih belum mengesankan. Rendering server memungkinkan Anda mengoptimalkan aplikasi untuk mesin telusur dengan lebih efisien, sementara kinerjanya dalam hal ini juga akan cukup baik.
Dengan munculnya kerangka kerja JavaScript yang hebat seperti Next dan Gatsby, ada lebih banyak aplikasi server-render, jadi mari kita lihat mengapa aplikasi satu halaman tidak selalu menjadi solusi yang baik, terutama ketika Anda membutuhkan peringkat pencarian yang tinggi.
Apa yang salah dengan aplikasi satu halaman?
Sebelum memutuskan antara aplikasi halaman tunggal dan rendering sisi server, ada baiknya memutuskan konten.
Aplikasi satu halaman hanya memuat satu halaman HTML. Setiap kali pengguna meminta konten HTML baru, itu secara dinamis dimuat oleh JavaScript dengan memanipulasi elemen DOM. Tetapi jika Anda tidak harus memuat halaman HTML baru setiap saat, mengapa ada masalah dengan pengoptimalan mesin telusur?
Masalahnya, mesin pencari tidak dapat mengindeks dengan benarAplikasi halaman tunggal, bukan aplikasi yang dirender server. Aplikasi halaman tunggal hanya memuat halaman HTML awal. Akibatnya, mesin telusur tidak dapat mengindeks konten yang dibuat ulang menggunakan JavaScript untuk setiap perubahan, meskipun perlu dicatat bahwa aplikasi satu halaman memiliki banyak keuntungan lain: selain kinerja tinggi, aplikasi tersebut memuat dengan cepat bahkan dengan kecepatan koneksi rendah dan tidak memerlukan bandwidth tinggi. , berkinerja lebih baik di perangkat seluler, dan sebagainya.
Di sisi lain, aplikasi yang dirender server, terutama yang dibuat menggunakan Next.js, memiliki kinerja yang baik dan efisiensi SEO.
SEO (pengoptimalan mesin telusur)
SEO (dari pengoptimalan mesin telusur bahasa Inggris) adalah pengoptimalan untuk mesin telusur, yaitu tindakan untuk mengubah situs Anda untuk menarik lebih banyak lalu lintas penelusuran organik. Ada banyak teknik dan trik SEO yang perlu diingat untuk membuat situs web Anda lebih menarik dan dapat diakses oleh mesin pencari.
Next.js
Next.js adalah kerangka kerja untuk aplikasi React yang dibuat secara statis atau server- render yang membuka banyak kemungkinan bagi pengembang: membuat aplikasi siap pakai, tanpa konfigurasi, pemisahan kode, mengekspor halaman HTML statis, dll. dll.
Next.jsakan memberikan hasil pengoptimalan mesin telusur yang tinggi, dan Anda tidak perlu melakukan hal khusus untuk melakukannya - Anda hanya perlu membuat aplikasi. Namun , hasil SEO yang baik tidak disediakan secara khusus oleh Next.js , melainkan rendering server.
Mari kita lihat bagaimana Next.js bekerja dengan sebuah contoh .
Next.js memungkinkan Anda membuat aplikasi dalam satu perintah menggunakan struktur Buat Aplikasi Berikutnya :
npx create-next-appSetelah Anda membuat proyek, Anda akan melihat bahwa itu sedikit berbeda dari templat lain yang dibuat dengan, misalnya, Buat Aplikasi React . Semua halaman dalam aplikasi akan disimpan dalam sebuah folder
pages, dan masing-masing akan menjadi komponen React.
Untuk menghasilkan rute baru di dalam aplikasi, Anda hanya perlu membuat file baru di folder
pagesdan komponen React baru untuknya:
// pages/about.js
const About = () => (
<div>
<h1>About page</h1>
</div>
);
export default About;Catatan. Saat Anda mengerjakan aplikasi, Anda dapat melihat laporan peringkat SEO-nya bahkan pada tahap awal, misalnya, menggunakan layanan Lighthouse .
Membuat aplikasi baru dengan Next.js sangatlah mudah. Mari kita lihat bagaimana Next.js dapat membantu meningkatkan peringkat pencarian Anda dan mengarahkan lebih banyak lalu lintas organik ke situs Anda.
Cara meningkatkan SEO dengan Next.js
Dengan Next.js, Anda dapat meningkatkan hasil SEO Anda secara signifikan, tetapi Anda tidak boleh melupakan aspek lain dari aplikasi tersebut. Jika Anda menginginkan hasil SEO yang bagus, pertimbangkan ini:
Tag Meta Tag meta memberikan data tentang halaman Anda ke mesin pencari dan pengunjung situs. Mereka mempengaruhi bagaimana halaman ditampilkan pada halaman hasil pencarian dan apakah itu dapat menarik pengunjung ke situs Anda. Tag meta tidak terlihat oleh pengguna, tetapi untuk aplikasi yang ingin Anda tampilkan di puncak mesin pencari, ini adalah bagian terpenting dari kode.
Tag meta memberi tahu mesin pencari tentang jenis konten yang diposting pada halaman, topik halaman itu, dan bagaimana mesin pencari harus menampilkannya.
Next.js memiliki komponen bawaan yang menambahkan tag meta ke penampung
<head>import Head from 'next/head'Untuk menyisipkan meta tag pada halaman, gunakan komponen bawaan
Head:
import Head from 'next/head'
const Example = () => {
return (
<div>
<Head>
<title>Example</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hi Next.js!</p>
</div>
)
}export default Example
Komponen
Headbawaan menghindari duplikasi tag meta di situs - jika Anda menambahkan properti kunci, tag meta hanya akan ditampilkan sekali:
<meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />Anda dapat meningkatkan peringkat pencarian aplikasi hanya dengan menambahkan beberapa tag meta ke halaman. Di sini Anda dapat membaca tentang tag meta penting untuk SEO.
Periksa kode Anda sekarang untuk melihat apakah ada tag meta di dalamnya dan apakah itu tag meta yang Anda inginkan? Percayalah, tag meta yang tepat adalah yang Anda butuhkan untuk meningkatkan kualitas pengindeksan dan mengarahkan lalu lintas organik.
Produktivitas
Pengguna terbiasa memuat halaman dengan cepat dan tidak siap menunggu selamanya. Saat mengembangkan aplikasi, pikirkan kinerja terlebih dahulu. Ini juga merupakan salah satu faktor peringkat mesin pencari utama.
Mesin pencari, terutama Google, menggunakan waktu tampilan konten pertama(First Contentful Paint, atau FCP) sebagai metrik performa utama. FCP mengukur waktu dari saat halaman mulai memuat hingga item konten pertama ditampilkan di layar. FCP yang rendah akan memiliki peringkat SEO yang rendah.
Dengan Next.js, Anda dapat mengurai metrik FCP dan LCP (waktu rendering untuk sebagian besar konten, Largest Contentful Paint) dengan membuat komponen Aplikasi kustom dan mendeklarasikan fungsi
reportWebVitals:
// pages/_app.js
export function reportWebVitals(metric) {
console.log(metric)
}Fungsi
reportWebVitalstersebut akan dipanggil ketika nilai metrik terakhir untuk halaman dihitung. Anda dapat membaca
lebih lanjut tentang mengukur kinerja di Next.js di sini . Inilah yang perlu Anda lakukan untuk meningkatkan FCP.
Sertifikat SSL
Pada Agustus 2014, Google mengumumkan akan mempertimbangkan HTTPS saat menentukan peringkat. Protokol komunikasi HTTPS yang aman memberikan lapisan perlindungan tambahan bagi pengguna yang mengirimkan datanya ke situs Anda.
Untuk menyambungkan HTTPS, Anda perlu mendapatkan sertifikat SSL. Sertifikat SSL yang baik bisa berharga sangat mahal. Bagaimana cara mendapatkan sertifikat SSL secara gratis dengan Next.js ?
Untuk melakukan ini, aplikasi perlu diterapkan ke platform cloud seperti Vercel . Vercel adalah perusahaan di balik Next.js, jadi integrasi akan berjalan lancar. Untuk menerapkan Next.js di platform Vercel, Anda perlu menginstal Vercel CLI:
yarn global add vercelLalu pergi ke proyek dan jalankan perintah:
vercelProyek ini akan dipublikasikan di Vercel dan dilindungi oleh sertifikat SSL.
Konten itu penting
Sangat penting untuk menyajikan konten yang dilihat pengunjung situs Anda dengan benar. Menciptakan produk yang berkualitas adalah tugas utama setiap pengembang.
Apakah Anda mengembangkan aplikasi satu halaman atau aplikasi rendering sisi server bergantung pada jenis konten yang ingin Anda tampilkan dan bagaimana Anda ingin mendapatkan umpan balik dari klien.
Kerangka kerja Next.js dibuat untuk pengembangan aplikasi React yang dirender server, yang memberi kita SEO, UX, kinerja yang sangat baik, dan banyak lagi. Ini membantu perusahaan dan pengembang meningkatkan kualitas situs dan proyek mereka dan mendorong lebih banyak lalu lintas pencarian organik. ...
Nah, saatnya untuk beralih ke Next.js dan menjelajahi potensi penuh dari aplikasi rendering sisi server. Mereka akan berguna untuk Anda dan perusahaan Anda, dan secara umum - mereka luar biasa! Saya jamin Anda akan terkejut.
Kesimpulan
Pada artikel ini, kami melihat lebih dekat kerangka kerja Next.js dan mempelajari bagaimana itu dapat digunakan untuk mengoptimalkan aplikasi modern untuk mesin pencari. Kami juga memilah konsep SEO umum dan mencakup tag meta, kinerja, sertifikat SSL, dan sebagainya, yang merupakan aspek yang perlu dipertimbangkan saat mengembangkan aplikasi.
LogRocket : Visibilitas Aplikasi Web Lengkap
LogRocket adalah layanan pemantauan aplikasi web yang memungkinkan Anda mengulangi masalah pengguna seolah-olah terjadi di browser Anda. Sekarang tidak perlu menebak mengapa kesalahan terjadi, atau meminta pengguna untuk tangkapan layar atau log dump. LogRocket memungkinkan Anda memutar ulang sesi dan mencari tahu apa yang menyebabkan masalah. LogRocket berfungsi dengan baik dengan aplikasi apa pun dalam kerangka apa pun, dan Anda dapat menggunakan plugin untuk menambahkan konteks tambahan dari Redux, Vuex, dan
@ngrx/store.
Selain menambahkan tindakan dan status Redux, LogRocket mencatat log konsol, kesalahan JavaScript, pelacakan tumpukan, permintaan dan respons jaringan dengan header dan badan, metadata browser, dan log khusus. Ia menggunakan DOM untuk menulis HTML dan CSS pada halaman, menyediakan pemutaran ulang video piksel demi piksel bahkan untuk aplikasi satu halaman yang paling kompleks.
Coba gratis .
Baca lebih banyak: