2022-02-28

Next SEO

Apa itu Next SEO

Next-seo adalah sebuah perpustakaan ringan yang dirancang untuk menyederhanakan manajemen SEO dalam aplikasi Next.js. Seperti yang kita ketahui, SEO merupakan singkatan dari Search Engine Optimization, yang melibatkan peningkatan visibilitas situs web pada halaman hasil mesin pencari (SERP) melalui berbagai teknik seperti mengoptimalkan konten, menggunakan kata kunci yang tepat, dan memastikan bahwa meta tag situs dikonfigurasi dengan baik.

Namun, mengelola konfigurasi ini dalam aplikasi single-page application (SPA) seperti yang dibuat dengan Next.js bisa menjadi rumit. Inilah tempat peran next-seo dimulai. Dengan menyediakan cara yang mudah untuk mengontrol atribut SEO pada halaman Anda, plugin ini memastikan bahwa konten Anda disajikan dengan efektif bagi pengguna dan mesin pencari.

Instalasi dan Persiapan

Sebelum Anda dapat menggunakan next-seo dalam aplikasi Next.js Anda, Anda perlu menginstalnya. Next-seo tersedia sebagai paket npm, sehingga Anda dapat menginstalnya menggunakan npm atau yarn.

Menggunakan npm

bash

$ npm install next-seo

Menggunakan yarn

bash

$ yarn add next-seo

Setelah menginstal next-seo, saatnya mengintegrasikannya ke dalam proyek Next.js Anda. Mulailah dengan mengimpornya di komponen halaman atau di file _app.jsx untuk konfigurasi global.

import { NextSeo } from 'next-seo';

Sekarang Anda dapat menggunakan komponen NextSeo dalam aplikasi Anda.

Integrasi dengan Next.js

Untuk mengintegrasikan next-seo ke dalam aplikasi Next.js Anda, Anda perlu menggunakan komponen NextSeo di dalam komponen atau halaman tempat Anda ingin menyesuaikan atribut SEO.

Berikut adalah contoh bagaimana Anda dapat menggunakan NextSeo untuk mengatur judul dan deskripsi sebuah halaman:

import { NextSeo } from 'next-seo';

export default function HomePage() {
  return (
    <>
      <NextSeo
        title="Home Page - My Next.js App"
        description="Welcome to the home page of my awesome Next.js application."
      />

      <div>
        <h1>Home Page</h1>
        <p>This is the home page of my Next.js application.</p>
      </div>
    </>
  );
}

Pada contoh di atas, komponen NextSeo digunakan di dalam komponen HomePage. Ia mengambil dua properti, yaitu judul (title) dan deskripsi (description), yang mengatur judul halaman dan meta deskripsi secara berturut-turut.

Next-seo sangat konfigurabel dan memungkinkan Anda mengatur berbagai atribut SEO, seperti URL kanonikal, tag open graph, dan banyak lagi. Komponen NextSeo dapat digunakan secara halaman demi halaman, memberi Anda kontrol yang tepat terhadap konfigurasi SEO setiap halaman dalam aplikasi Next.js Anda.

Komponen Next SEO

Mengonfigurasi Meta Tag

Komponen NextSeo adalah bagian penting dari perpustakaan next-seo. Komponen ini dapat digunakan di halaman atau komponen Next.js Anda untuk mengonfigurasi berbagai meta tag untuk tujuan SEO. Sebagai contoh, properti title dan description dapat digunakan untuk mengatur meta tag judul dan deskripsi halaman Anda secara berturut-turut.

Berikut adalah contoh bagaimana Anda dapat menggunakan NextSeo untuk mengatur title, description, dan URL kanonikal sebuah halaman:

import { NextSeo } from 'next-seo';

export default function ExamplePage() {
  return (
    <>
      <NextSeo
        title="Example Page - My Next.js App"
        description="This is an example page of my Next.js application."
        canonical="https://www.example.com/"
      />

      <div>
        <h1>Example Page</h1>
        <p>This is an example page of my Next.js application.</p>
      </div>
    </>
  );
}

Pada contoh di atas, properti canonical digunakan untuk menentukan URL kanonikal halaman tersebut, yang dapat membantu mencegah masalah konten duplikat di mesin pencari.

##Integrasi Media Sosial
Komponen NextSeo juga memungkinkan Anda menentukan tampilan halaman Anda saat dibagikan di platform media sosial seperti Facebook dan Twitter. Hal ini dapat dilakukan dengan mengatur properti openGraph dan twitter.

Sebagai contoh, pada contoh di bawah ini, properti openGraph digunakan untuk mengonfigurasi tampilan halaman saat dibagikan di Facebook, sedangkan properti twitter digunakan untuk menyesuaikan kartu Twitter halaman tersebut.

import { NextSeo } from 'next-seo';

export default function ExamplePage() {
  return (
    <>
      <NextSeo
        title="Example Page - My Next.js App"
        description="This is an example page of my Next.js application."
        canonical="https://www.example.com/"
        openGraph={{
          url: 'https://www.example.com/',
          title: 'Example Page - My Next.js App',
          description: 'This is an example page of my Next.js application.',
          images: [
            {
              url: 'https://www.example.com/images/og-image.jpg',
              width: 800,
              height: 600,
              alt: 'Og Image Alt',
            },
            {
              url: 'https://www.example.com/images/og-image-2.jpg',
              width: 900,
              height: 800,
              alt: 'Og Image Alt 2',
            },
          ],
        }}
        twitter={{
          handle: '@handle',
          site: '@site',
          cardType: 'summary_large_image',
        }}
      />

      <div>
        <h1>Example Page</h1>
        <p>This is an example page of my Next.js application.</p>
      </div>
    </>
  );
}

Pada contoh ini, properti openGraph digunakan untuk mengonfigurasi tampilan halaman saat dibagikan di Facebook, sedangkan properti twitter digunakan untuk menyesuaikan kartu Twitter untuk halaman tersebut.

Komponen SocialProfileJsonLd

Komponen penting lain yang disediakan oleh next-seo adalah komponen SocialProfileJsonLd. Komponen ini memungkinkan Anda menambahkan data terstruktur tentang profil media sosial Anda dalam format JSON-LD ke halaman-halaman Anda, yang dapat meningkatkan visibilitas Anda dalam hasil mesin pencari.

import { SocialProfileJsonLd } from 'next-seo';

export default function HomePage() {
  return (
    <>
      <SocialProfileJsonLd
        type="Person"
        name="John Doe"
        url="http://www.example.com"
        sameAs={[
          "http://www.facebook.com/yourusername",
          "http://instagram.com/yourusername",
          "http://www.linkedin.com/in/yourusername",
          "http://plus.google.com/yourusername"
        ]}
      />
      <div>
        <h1>Home Page</h1>
        <p>Welcome to my personal website. Connect with me on social media!</p>
      </div>
    </>
  );
}

Pada contoh ini, komponen SocialProfileJsonLd digunakan untuk menyediakan data terstruktur tentang profil media sosial seseorang. Properti type menentukan bahwa data terstruktur tersebut mengenai seorang individu, sementara properti name dan url menyediakan nama dan URL situs web orang tersebut. Properti sameAs adalah sebuah array yang berisi URL profil media sosial orang tersebut.

Menyesuaikan Tag SEO

Dengan next-seo, Anda memiliki fleksibilitas untuk menyesuaikan tag SEO untuk bagian-bagian berbeda dalam aplikasi Anda. Ini memungkinkan Anda menciptakan pengalaman yang disesuaikan untuk setiap halaman dan jenis konten, yang dapat mengarah pada strategi SEO yang lebih efektif.

Sebagai contoh, jika Anda memiliki sebuah blog dalam aplikasi Next.js Anda, Anda mungkin ingin mengatur judul, deskripsi, dan tag media sosial yang khusus untuk setiap posting blog. Hal ini dapat dicapai dengan menggunakan komponen NextSeo di dalam setiap komponen posting blog.

import { NextSeo } from 'next-seo'

function BlogPost({ post }) {
  return (
    <>
      <NextSeo
        title={post.title}
        description={post.summary}
        openGraph={{
          title: post.title,
          description: post.summary,
          images: [
            {
              url: post.image,
              alt: post.title,
            },
          ],
        }}
      />

      <div>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </div>
    </>
  )
}

Pada contoh di bawah ini, komponen NextSeo digunakan di dalam komponen BlogPost. Properti title, description, dan openGraph diatur secara dinamis berdasarkan data dari posting blog.

Komponen ArticleJsonLd

Aspek SEO penting lainnya, terutama untuk posting blog dan artikel, adalah menyediakan data terstruktur dalam bentuk JSON-LD. JSON-LD adalah singkatan dari JSON for Linking Data, dan membantu mesin pencari memahami konten dan konteks halaman Anda, yang dapat meningkatkan tampilan hasil pencarian.

next-seo menawarkan komponen ArticleJsonLd untuk tujuan ini. Komponen ini memungkinkan Anda menambahkan data terstruktur untuk artikel di situs web Anda.

Berikut adalah contoh penggunaan komponen ArticleJsonLd dalam sebuah posting blog:

import { NextSeo, ArticleJsonLd } from 'next-seo';

function BlogPost({ post }) {
  return (
    <>
      <NextSeo
        title={post.title}
        description={post.summary}
      />

      <ArticleJsonLd
        url={`https://www.example.com/blog/${post.slug}`}
        title={post.title}
        images={[post.image]}
        datePublished={post.datePublished}
        dateModified={post.dateModified}
        authorName={post.authorName}
        publisherName="Example Publisher"
        publisherLogo="https://www.example.com/images/logo.jpg"
        description={post.summary}
      />

      <div>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </div>
    </>
  );
}

Pada contoh ini, komponen ArticleJsonLd digunakan untuk menambahkan data terstruktur ke sebuah posting blog.

Mengatur Konfigurasi SEO Default dengan DefaultSeo

next-seo memungkinkan Anda mengatur konfigurasi SEO default untuk aplikasi Next.js Anda menggunakan komponen DefaultSeo. Hal ini berguna untuk mengatur atribut SEO dasar yang dapat digunakan di semua halaman aplikasi Anda. Anda dapat mengganti konfigurasi ini pada halaman individual menggunakan komponen NextSeo.

Berikut adalah contoh penggunaan komponen DefaultSeo:

src/pages/_app.jsx

import { DefaultSeo } from 'next-seo';
import defaultSeoConfig from '../seo-config';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo {...defaultSeoConfig} />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

seo-config.js

export default {
  title: "Default title for my Next.js App",
  description: "Default description for my Next.js App",
  openGraph: {
    type: 'website',
    locale: 'en_IE',
    url: 'https://www.example.com/',
    site_name: 'SiteName',
  },
  twitter: {
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
  },
};

Pada contoh di atas, konfigurasi SEO default diatur menggunakan komponen DefaultSeo dalam file _app.jsx. Konfigurasi ini diimpor dari file seo-config.js terpisah. Setiap halaman dalam aplikasi Next.js akan menggunakan konfigurasi ini kecuali jika ditimpa menggunakan komponen NextSeo pada halaman tertentu.