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.
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.
2. Tingkatkan SEO
Grafik Terbuka juga dapat membantu tingkatkan 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. Meningkatkan kinerja
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 mempermudah pengembangan dengan menyediakan cara sederhana untuk buat aplikasi React yang diberikan 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.
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 InstallBerikutnya-seo --menyimpanSetelah menginstal paket, Anda dapat menggunakannya dengan menambahkan kode berikut ke index.js mengajukan:
impor {Seo Berikutnya} dari 'seo-berikutnya';konstan DemoPage = () => (
<>
<BerikutnyaSeo
judul="Judul Anda"
deskripsi="Ini adalah deskripsi demo"
kanonik ="https://www.example.com"
openGraph={{
url: 'https://www.example.com',
judul: 'Buka Judul Grafik',
keterangan: 'Buka Deskripsi Grafik',
gambar-gambar: [
{
url: 'https://www.example.com/og-image01.jpg',
lebar: 800,
tinggi: 600,
alternatif: 'Og Gambar Alt',
Tipe: 'gambar/jpeg',
},
{
url: 'https://www.example.com/og-image02.jpg',
lebar: 900,
tinggi: 800,
alternatif: 'Gambar Og Alt Kedua',
Tipe: 'gambar/jpeg',
},
{ url: 'https://www.example.com/og-image03.jpg' },
{ url: 'https://www.example.com/og-image04.jpg' },
],
nama situs: 'NamaSitus Anda',
}}
twitter={{
menangani: '@menangani',
lokasi: '@lokasi',
tipe kartu: 'ringkasan_besar_gambar',
}}
/>
<p>Halaman Demo</p>
</>
);
eksporbawaan Halaman Demo;
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 menjalankan devMembuka 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 buat kode yang dapat digunakan kembali untuk semua halaman.
Untuk mengatur kebiasaan _document.js file, buat file baru di halaman direktori dengan isi sebagai berikut:
impor Dokumen, { Html, Head, Main, NextScript } dari 'Berikutnya/dokumen';kelasDokumen SayameluasDokumen{
statistidak sinkron getInitialProps (ctx) {
konstan alat peraga awal = menunggu Document.getInitialProps (ctx);
kembali { ...initialProps };
}render() {
kembali (
<html>
<Kepala>
<properti meta ="og: url" konten="https://www.example.com" />
<properti meta ="og: judul" konten="Buka Judul Grafik" />
<properti meta ="og: deskripsi" konten="Buka Deskripsi Grafik" />
<properti meta ="og: gambar" konten="https://www.example.com/og-image.jpg" />
<properti meta ="og: nama_situs" konten="NamaSitus Anda" />
<nama meta ="twitter: kartu" konten="ringkasan_besar_gambar" />
<nama meta ="twitter: situs" konten="@lokasi" />
<nama meta ="twitter: pencipta" konten="@menangani" />
</Head>
<tubuh>
<Utama />
<Skrip Berikutnya />
</body>
</Html>
);
}
}
eksporbawaan Dokumen Saya;
Tambahkan konten di bawah ini ke file index.js Anda:
konstan DemoPage = () => (
<>
<p>Halaman Demo</p>
</>
);
eksporbawaan Halaman Demo;
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 menjalankan devMembuka 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.
