Cara Membuat Dynamic Title Page dan SEO di React JS

Cara Membuat Dynamic Title Page di React JS – Halo yang disana! Bagaimana kabar kalian? Semoga kita selalu diberi kesehatan dan kelancaran disetiap harinya. Aamiin. Sudah lama sekali saya tidak memberikan tutorial disini. Kali ini saya ingin berbagi tutorial untuk membuat dynamic title di setiap page pada React JS, selain itu saya juga akan menjelaskan kegunaan dari dynamic title page ini untuk apa? dan bagaimana implementasinya di React JS ini.

Apa itu Dynamic Title Page?

Dynamic title page adalah suatu judul pada halaman tab browser kalian secara dinamis sesuai dengan halaman yang diperuntukan. Misal terdapat file dengan nama “Home.jsx”, maka title yang sesuai dengan halaman tersebut yaitu bisa “Home”, “Beranda” atau “Dashboard”. Lalu terdapat file lagi dengan nama “Login.jsx”, maka title yang sesuai dengan halaman tersebut bisa dengan nama “Login”, “Masuk”, atau “SignIn”.

Jadi, yang dimaksud dari dynamic title page, ketika kita berpindah dari halaman satu ke halaman yang lainnya memiliki title page yang berbeda-beda sesuai dengan isi informasi dari halaman tersebut. Semoga kalian mengerti ya dengan definisi dan perumpaan dari dynamic title page ini, selanjutnya kita akan mengimplementasikannya di dalam bahasa pemrograman React JS.

Bagaimana mengimplementasikan Dynamic Title Page?

Dalam pengimpelemtasian dynamic title page ini terdapat 2 cara dan masing-masing cara ini memiliki kelebihan dan kekurangan masing-masing, antara lain sebagai berikut

  1. Menggunakan syntax document.title
    Dengan menggunakan syntax document.title, artinya mengubah langsung melalui sebuah browser yang dimana pada sebuah halaman output HTML yang berupa dokumen, lalu bagian dokumen tersebut terdapat bagian title yang artinya judul dari sebuah halaman. namun cara ini tidak direkomendasikan bagi saya, memang secara coding membuat lebih efisien dengan hanya document.title = “judul sebuah halaman” yang hanya menggunakan 1 baris saja, tetapi cara ini tidak powerful, maksud dari powerful disini kita tidak bisa mengganti bagian-bagian yang terdapat pada antara tag <head> hingga </head> antaralain meta-meta, include library javascript dan css yang bersifat link eksternal.

    Untuk penulisan syntax code bisa dilihat seperti dibawah ini pada baris ke 6

  2. Menggunakan package React Helmet (react-helmet)
    React Helmet merupakan sebuah package untuk mengganti atau mengatur semua document head di document pada sebuah output HTML, dalam deskripsinya tertulis “This reusable React component will manage all of your changes to the document head. Helmet takes plain HTML tags and outputs plain HTML tags. It’s dead simple, and React beginner friendly.”

    Yang bisa disimpulkan bahwa package ini lebih powerful dibanding dengan cara nomor 1 yang hanya bisa mengganti judul halaman saja, tetapi pada React Helmet ini kita bisa mengubah seluruh yang ada antara pada tags <head> hingga </head>, jadi package ini lebih bermanfaat karena kita bisa mengatur sebuah halaman untuk SEO (Search Engine Optimization).

    Lalu bagaimana cara mengimplementasikan React Helmet ini pada project react kita? Berikut adalah step by step penggunaan React Helmet1. Tambahkan dan install package React Helmet ini dengan cara

    atau

    2. Import package React Helmet pada sebuah halaman yang ingin digunakan dengan syntax

    3. Terapkan package React Helmet pada render return sebuah fungsi atau class React dengan syntax

    jika ingin nenambahkan meta deskripsi cukup tambahkan di dalam diantara tags <Helmet> dan </Helmet> menjadi seperti

    Sebagai contoh penulisan syntax React Helmet pada sebuah 1 halaman (lihat pada baris ke 4 untuk import package dan pada baris ke 9-12 penerapan untuk React Helmet)

    Catatan: untuk penggunaan meta description atau meta lainnya, diharapkan untuk menghapus terlebih dahulu meta-meta yang terdapat pada folder public dengan file index.html

Sekian tutorial untuk membuat dynamic title page (membuat judul halaman dinamis) di project React, jika ada hal yang perlu ditanyakan silahkan berkomentar pada kolom komentar dibawah artikel ini. Jika terdapat kesulitan anda bisa mengclone project React saya untuk pengimplementasian React Helmet di https://github.com/ryfan/react-dynamic-title-page.

Terima kasih, #PintarBersama.