Cara Menambahkan Header Ramah SEO ke Situs Web Next.js

Cara Menambahkan Header Ramah SEO ke Situs Web Next.js

Judul halaman, tag meta, dan deskripsi meta penting untuk SEO. Mereka adalah hal pertama yang dilihat pengguna di SERP dan menentukan apakah mereka mengklik ke situs web Anda. Oleh karena itu, penting untuk mengoptimalkan judul, tag meta, dan deskripsi situs web Anda.





Di Next.js, Anda menambahkannya melalui komponen kepala kustom. Anda dapat menambahkannya di semua halaman dalam aplikasi atau menyesuaikannya untuk setiap halaman.



VIDEO MAKEUSEOF HARI INI

Menambahkan Tag Kepala Global ke Semua Halaman Next.js

Next.js menyediakan _app.js untuk menginisialisasi halaman. Anda dapat menggunakannya untuk membuat tag meta yang dibagikan di semua halaman.





import '../styles/globals.css' 
import Head from 'next/head' 
  
function MyApp({ Component, pageProps }) { 
  return <> 
    <Head> 
      <meta name="author" content="John Doe"/> 
    </Head> 
    <Component {...pageProps} /> 
  </> 
} 
  
export default MyApp

Jika Anda ingin halaman memiliki judul dan deskripsi khusus, tambahkan komponen kepala ke dalamnya, dan Next.js akan menggunakannya sebagai ganti yang default di komponen Aplikasi.

Menambahkan Meta Tag dan Deskripsi ke Halaman Next.js Tertentu

Tag meta dan deskripsi statis cocok untuk halaman yang kontennya tetap sama, misalnya, halaman beranda.



Buka file /pages/index.js dan ubah tag head dengan judul dan deskripsi yang sesuai.

import Head from "next/head"; 
  
const Home= () => { 
  return ( 
    <> 
    <Head> 
      <title>Blog</title> 
      <meta name="viewport" content="initial-scale=1.0, width=device-width" /> 
      <meta name='description' content='Programming Articles'/> 
    </Head> 
    <main> 
      <h1>Welcome to my blog!</h1> 
    </main> 
    </> 
  ); 
}; 
  
export default Home;

Anda mengakses komponen Head dengan mengimpornya dari next/head . Ia bekerja dengan menambahkan elemen ke tag kepala halaman HTML . Tergantung di mana Anda menempatkan komponen ini, tag meta dan deskripsi akan tersedia di seluruh aplikasi atau di halaman individual.



Menambahkan judul, lebar viewport, dan deskripsi dalam file _app.js memastikan semua halaman memiliki metadata yang sama.

Halaman ini memiliki konten statis, tetapi terkadang, Anda mungkin ingin membuat halaman yang menggunakan konten dinamis.



Menambahkan Judul dan Deskripsi Meta Dinamis ke Halaman Next.js

Bergantung pada kasus penggunaan, Anda bisa menggunakan getStaticProps(), getStaticPaths() atau getServerSideProps() untuk mengambil data di Next.js. Data ini menentukan konten halaman. Gunakan untuk membuat metadata untuk halaman.

Misalnya, membuat metadata untuk aplikasi Next.js yang merender posting blog akan membosankan.

Cara yang disarankan adalah membuat halaman dinamis yang menerima pengenal yang dapat Anda gunakan untuk ambil konten blog . Anda kemudian dapat menggunakan konten ini di komponen kepala.

import { getAllPosts, getSinglePost } from "../../utils/mdx"; 
import Head from "next/head"; 
  
const Post = ({ title, description, content }) => { 
  return ( 
    <> 
      <Head> 
        <title>{title}</title> 
        <meta name="description" content={description} /> 
      </Head> 
      <main>{/* page content */}</main> 
    </> 
  ); 
}; 
  
export const getStaticProps = async ({ params }) => { 
  // get a single post 
  const post = await getSinglePost(params.id, "posts"); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export const getStaticPaths = async () => { 
  // Retrieve all posts 
  const paths = getAllPosts("posts").map(({ id }) => ({ params: { id } })); 
  
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export default Post;

Fungsi getStaticProps meneruskan data posting ke komponen Post sebagai props. Komponen Post merusak judul, deskripsi, dan konten dari props. Komponen kepala kemudian menggunakan judul dan deskripsi dalam tag meta.

widget cuaca desktop untuk windows 10

Next.js Adalah Kerangka Kerja yang Dioptimalkan

Anda baru saja mempelajari cara menggunakan komponen kepala untuk menambahkan judul dan deskripsi meta ke proyek Next.js. Gunakan pengetahuan ini untuk membuat header yang ramah SEO, naik ke SERP, dan menarik lebih banyak pengunjung ke situs Anda.

Selain komponen kepala, Next.js menyediakan komponen lain seperti Tautan dan Gambar. Komponen-komponen ini dioptimalkan di luar kotak sehingga lebih mudah untuk membuat situs web yang cepat dan ramah SEO.