Add Meta Description on NextJS

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.

Hasil Web Dev Measure

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

  • Favicon
  • Open Graph untuk sosial media seperti Twitter, Facebook dan sosial media lain

Hal ini tentu saja dapat meningkatkan SEO pada Web App kita.

Referensi :

How to Improve your SEO and Social Metadata with Next.js
Check out this Next.js primer on SEO fundamentals. Utilize the Open Graph Protocol to update metadata in your Next apps, ship sites with optimize page titles, and more!
How to Add a Meta Description Tag to a Next.js Website
Add a meta description to a Next.js website using the built-in Head component.