Apa itu open graph (OG) – Situs atau website Anda sudah menerapkan open graph? atau belum mengetahui open graph itu apa, fungsi dan tujuannya?. Apakah dengan menerapkan open graph pada sebuah situs akan mempengaruhi kinerja dan dapat meningkatkan performa? mungkin juga akan ada pertanyaan lain mengenai open graph, simak penjelasan berikut ini:
Open graph ada kaitannya dengan media sosial. Media sosial saat ini masih menjadi salah satu alternatif untuk meningkatkan pengunjung sebuah situs. Banyak situs menggunakan media sosial untuk membagikan artikel atau informasi yang ada di situs. Media sosial yang paling banyak digunakan saat ini untuk mebagikan artikel adalah facebook dan twitter.
Apa itu Open Graph (OG)?
Apa itu open graph? OG atau biasa kita kenal dengan istilah open graph adalah sebuah meta tag data dari Facebook yang berfungsi untuk berbagi informasi halaman situs di Facebook. Dengan adanya meta tag ini maka Anda memiliki kontrol penuh konten seperti apa yang akan ditampilkan ketika membagikan halaman atau konten tersebut ke facebook atau media sosial lainnya.
Jika sebuah halaman atau situs tidak memiliki meta tag ini tentunya judul dan gambar pada halaman tersebut tidak relevan ketika URL situs dibagikan.
OG pertama kali diperkenalkan oleh facebook pada tahun 2010, dan saat ini sudah dikelola penuh oleh Open Web Foundation. Fungsi lain dari OG adalah mengontrol apa yang akan dilihat oleh pengunjung ketika mereka membagikan tautan situs. OG akan menampilkan gambar, judul, deskripsi halaman yang akan dibagikan.
Baca juga: Gagal Login Setelah Update URL WordPress
Dengan adanya OG maka ini diharapkan orang untuk membuka atau klik link yang telah dibagikan di berbagai platform media sosial. Menurut ogp.me, meskipun ada banyak teknologi dan skema yang berbeda dan dapat digabungkan bersama, sayangnya tidak ada satu teknologi apapun yang menyediakan informasi yang cukup untuk mempersentasikan halaman situs apapun secara kaya dalam grafik sosial.
Penulisan dan Penerapan Open Graph
Meta OG dapat Anda temukan pada bagian <head> halaman situs. Untuk melihat meta tag OG klik kanan pada halaman situs, kemudian pilih Inspect element atau View Source.
Untuk mengubah atau menerapkan halaman situs menggunakan open graph, Anda perlu mengetahui penulisan meta data ke halaman situs. Berikut ini ada beberapa properti yang diperlukan untuk setiap halaman:
- og:title, ini berfungsi untuk menampilkan judul objek Anda sebagaimana mestinya muncul dalam grafik, ini biasanya menampilkan judul halaman
- og:type, jenis objek misalnya video.movie, ini bergantung pada jenis yang Anda tentukan
- og:image, URL gambar yang harus mewakili objek di dalam grafik
- og:url, URL kanonis objek yang Anda gunakan sebagai ID permanennya di dalam grafik
Berikut penerapan dan penulisan markup open graph pada suatu halaman situs:
<html prefix="og" https://ogp.me/ns#>
<head>
<title>Belajar Website</title>
<meta property="og:title" content="Belajar HTML Dasar" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://prameko.com/wordpress/belajar-html-dasar/" />
<meta property="og:image" content="https://i0.wp.com/prameko.com/wp-content/uploads/2022/12/gagal-login-wordpress-pram-eko.png" />
</head>
...
</html>
Jika Anda membutuhkan metadata opsional lainnya, berikut ini ada beberapa metadata opsional yang dapat digunakan:
- og:description, untuk mendeskripsikan objek
- og:site_name, untuk menampilkan bagian dari situs yang lebih besar, seperti nama situs yang harus ditampilkan di seluruh halaman yang ada
- og:locale, untuk penamaan bahasa yang digunakan pada halaman situs, misal en_US
- og:audio, URL ke file audio yang tersedia pada objek
- fb:app_id, untuk menautkan objek dengan aplikasi yang Anda buat di Facebook
Apakah sebuah metadata dapat digunakan beberapa kali namun memiliki nilai yang berbeda? tentunya bisa, ini dapat dikatakan sebagai Array. Anda hanya perlu menempatkan beberapa versi dari metadata yang sama dihalaman secara berurut dari atas ke bawah. Sebagai contoh, lihat penulisan metadata dibawah ini:
<meta property="og:image" content="https://example.com/image-1.png" />
<meta property="og:image" content="https://example.com/image-2.png" />
Cara Tambah Open Graph WordPress
Ada banyak cara untuk menambahkan open graph di wordpress. Anda dapat menggunakan plugin seperti yoast, open graph dan lain sebagainya dan dapat pula menambahkannya secara manual. Berikut beberapa cara tambah dan mengaktifkan open graph di wordpress:
Open Graph Yoast
Baca juga: Pengenalan dan Cara Buat Sitemap di WordPress
Sudah menggunakan plugin yoast untuk optimasi SEO? selain untuk optimasi SEO, ternyata YOAST juga menyediakan fitur open graph. Dengan adanya plugin yoast, tidak perlu lagi untuk menginstall plugin open graph lainnya.
Yoast membuatnya sangat mudah untuk menambahkan tag meta grafik untuk facebook dan media sosial lainnya. Berikut cara mengaktifkan OG menggunakan yoast:
- Login ke situs wordpress
- Masuk ke halaman dashboard, lalu pilih menu Yoast SEO » Social
- Pilih tab “Facebook”, aktifkan untuk penambahan meta data Open Graph
- Sesuaikan tag open graph, ini bertujuan untuk menambahkan gambar default untuk halaman yang tidak memiliki gambar
- Jika sudah sesuai semua, klik Simpan
Itu tadi pengenalan dasar untuk open graph, dan bagaimana penulisannya dan cara menambahkan open graph di wordpress. Jika mengalami kesulitan saat implementasi, ajukan pertanyaan pada kolom komentar. Semoga bermanfaat dan terimakasih.
