Cara Menerapkan Protokol Grafik Terbuka di Next.js

Pernahkah Anda ingin situs Next.js Anda muncul sebagai objek kaya saat dibagikan di media sosial? Jika demikian, maka Anda perlu mengimplementasikan protokol Open Graph.

Paket next-seo memudahkan untuk menambahkan tag Open Graph ke situs Next.js Anda. Anda juga dapat menggunakan pendekatan yang lebih manual untuk kontrol yang lebih baik atas hasil akhir.

Terakhir, Anda harus mempertimbangkan dengan tepat informasi apa yang akan disertakan dalam tag Anda.


Apa itu Grafik Terbuka?

Protokol Open Graph adalah standar terbuka yang memungkinkan pengembang untuk mengontrol bagaimana media sosial menampilkan konten mereka. Ini awalnya dikembangkan oleh Facebook tetapi banyak platform lain telah mengadopsi protokol tersebut. Ini termasuk Twitter, LinkedIn, dan Pinterest.

Open Graph memungkinkan Anda menentukan dengan tepat bagaimana situs lain harus menampilkan konten Anda, memastikan tampilannya bagus dan mudah dibaca. Ini juga memungkinkan kontrol yang lebih besar atas bagaimana tautan dirender. Ini mempermudah pelacakan klik-tayang dan metrik keterlibatan lainnya.

Mengapa Menggunakan Protokol Grafik Terbuka?

Ada tiga area utama yang harus ditingkatkan oleh Open Graph: keterlibatan media sosial, SEO, dan lalu lintas situs web.

1. Tingkatkan Keterlibatan Media Sosial

Open Graph dapat membantu meningkatkan keterlibatan media sosial dengan mempermudah pengguna untuk membagikan konten Anda. Dengan menentukan bagaimana situs harus menampilkan konten Anda, Anda dapat membuatnya lebih menarik secara visual dan mudah dibaca. Ini, pada gilirannya, dapat menghasilkan lebih banyak berbagi dan suka, serta meningkatkan rasio klik-tayang.

See also  Cara Membuat Breadcrumb di React.js

2. Tingkatkan SEO

Open Graph juga dapat membantu meningkatkan SEO Anda. Dengan menentukan judul, deskripsi, dan gambar untuk setiap bagian konten, Anda dapat mengontrol tampilannya di hasil penelusuran. Ini dapat membantu meningkatkan rasio klik-tayang ke situs web Anda, serta meningkatkan peringkat Anda secara keseluruhan.

3. Tingkatkan Lalu Lintas Situs Web

Akhirnya, Open Graph dapat membantu meningkatkan lalu lintas situs web. Dengan mempermudah pengguna untuk membagikan konten Anda, Anda dapat meningkatkan jumlah orang yang melihatnya. Ini, pada gilirannya, dapat menghasilkan lebih banyak pengunjung situs web dan meningkatkan lalu lintas.

4. Tingkatkan Pengalaman Pengguna

Manfaat lain menggunakan protokol Open Graph adalah dapat meningkatkan pengalaman pengguna di situs web Anda. Dengan menyertakan metadata, Anda dapat membantu aksesibilitas dan menggunakan kembali data, memastikan bahwa pengguna melihat informasi yang paling relevan. Ini dapat menghasilkan pengalaman keseluruhan yang lebih baik di situs Anda, yang dapat menghasilkan lebih banyak pengunjung yang kembali.

Mengapa Menggunakan Next.js?

Ada dua alasan utama untuk menggunakan Next.js: untuk meningkatkan kinerja dan membuat pengembangan lebih mudah.

1. Tingkatkan Performa

Next.js dapat membantu meningkatkan kinerja dengan memecah kode aplikasi Anda dan mengambil sumber daya terlebih dahulu. Hal ini dapat menyebabkan waktu buka lebih cepat dan beban server berkurang.

2. Membuat Pengembangan Lebih Mudah

Next.js juga dapat membuat pengembangan lebih mudah dengan menyediakan cara sederhana untuk membuat aplikasi React yang dirender server. Ini dapat membuatnya lebih cepat dan lebih mudah untuk mengembangkan dan menyebarkan aplikasi React.

Cara Menerapkan Protokol Grafik Terbuka di Next.js

Ada dua cara untuk mengimplementasikan Open Graph Protocol di Next.js: menggunakan paket next-seo atau membuat custom _document.js mengajukan.

See also  Cara Membuat Database Kata Sandi Baru Menggunakan KeePass

Metode 1: Menggunakan Paket seo berikutnya

Cara termudah untuk mengimplementasikan Open Graph Protocol di Next.js adalah dengan menggunakan paket next-seo. Paket ini akan secara otomatis menghasilkan tag yang diperlukan untuk Anda.

Untuk menginstal paket next-seo, jalankan perintah berikut:

npm install next-seo 

Setelah menginstal paket, Anda dapat menggunakannya dengan menambahkan kode berikut ke index.js mengajukan:

import { NextSeo } from 'next-seo';

const DemoPage = () => (
<>
<NextSeo
title="Your Title"
description="This is a demo description"
canonical="https://www.example.com"
openGraph={{
url: 'https://www.example.com',
title: 'Open Graph Title',
description: 'Open Graph Description',
images: [
{
url: 'https://www.example.com/og-image01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
type: 'image/jpeg',
},
{
url: 'https://www.example.com/og-image02.jpg',
width: 900,
height: 800,
alt: 'Og Image Alt Second',
type: 'image/jpeg',
},
{ url: 'https://www.example.com/og-image03.jpg' },
{ url: 'https://www.example.com/og-image04.jpg' },
],
site_name: 'YourSiteName',
}}
twitter={{
handle: '@handle',
site: '@site',
cardType: 'summary_large_image',
}}
/>
<p>Demo Page</p>
</>
);

export default DemoPage;

Kode ini mengimpor komponen NextSeo dari paket next-seo dan menggunakannya untuk menentukan judul, deskripsi, dan gambar halaman. Itu juga menentukan nama situs dan pegangan Twitter.

Jalankan perintah berikut untuk memulai server pengembangan:

npm run dev

Buka http://localhost:3000 di browser Anda untuk melihat halaman demo.

Metode 2: Menggunakan File _document.js Kustom

Cara lain untuk mengimplementasikan Open Graph Protocol di Next.js adalah dengan membuat custom _document.js mengajukan. File ini akan memungkinkan Anda untuk menentukan sendiri tag Open Graph dan membuat kode yang dapat digunakan kembali untuk semua halaman.

Untuk mengatur kebiasaan _document.js file, buat file baru di halaman direktori dengan isi sebagai berikut:

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}

render() {
return (
<Html>
<Head>
<meta property="og:url" content="https://www.example.com" />
<meta property="og:title" content="Open Graph Title" />
<meta property="og:description" content="Open Graph Description" />
<meta property="og:image" content="https://www.example.com/og-image.jpg" />
<meta property="og:site_name" content="YourSiteName" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@site" />
<meta name="twitter:creator" content="@handle" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

export default MyDocument;

See also  Cara Membuat Game Petualangan Berbasis Teks dengan Python

Tambahkan konten di bawah ini ke file index.js Anda:

const DemoPage = () => (
<>
<p>Demo Page</p>
</>
);

export default DemoPage;

Kode ini mengimpor komponen Dokumen dari dokumen berikutnya/dan membuat custom Dokumen Saya komponen. Ini menentukan judul, deskripsi, dan gambar untuk halaman kami, serta nama situs dan pegangan Twitter.

Jalankan perintah berikut untuk memulai server pengembangan:

npm run dev

Buka http://localhost:3000 di browser Anda untuk melihat halaman demo.

Menambahkan tag Grafik Terbuka ke situs web Anda dapat memberi Anda kontrol lebih besar atas tampilannya di pos media sosial dan dapat membantu meningkatkan rasio klik-tayang. Anda juga dapat meningkatkan cara situs web Anda muncul di SERP, yang pada akhirnya dapat mengarah pada peningkatan peringkat situs web.

Ada juga banyak cara lain untuk meningkatkan peringkat situs. Anda harus mengoptimalkan situs web Anda untuk perangkat seluler dan menggunakan judul dan deskripsi yang kaya kata kunci. Tetapi menggunakan tag Open Graph adalah cara cepat dan mudah untuk memulai.