Add Meta Description on NextJS

NextJS Jun 18, 2021

Meta description adalah salah satu hal yang cukup vital dalam dunia website, apalagi Landingpage. <meta name="description"> merupakan salah satu element yang memberikan ringkasan mengenai isi konten dari website kita yang membuat search engines memasukkannya di hasil pencarian. Kualitas meta deskripsi yang bagus dan unik akan membuat halaman kita menjadi lebih relevan dan meningkatkan trafik pencarian terhadap situs kita.

Ketika kita mencoba untuk melakukan test pada website kita di Web Dev Measure, salah satu hal yang dikritisi adalah ada tidaknya meta deskripsi.

Hasilnya menunjukan bahwa menambahkan meta desription merupakah hal yang memiliki tingkat kepentingan Medium.Sehingga, menurut saya sudah sewajarnya apabila sebuah website menambahkan meta deskripsi pada situsnya.

Menambahkan Meta Deskripsi

Menambahkan meta description pada NextJS adalah dengan menambahkannya pada component next/head , built-in component yang komponen digunakan untuk render element HTML <head> pada situs. Kurang lebih hasilnya seperti ini :

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
         <meta
          name="description"
          content="Landingpage for Website. Website for gaining information what you need"
          key="description"
        />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

Selain menambahkan meta description pada built-in component di <Head> sebaiknya kita juga menambahkan