Lutfi HanifPernahkah Anda berbagi link artikel di WhatsApp atau Facebook, lalu previewnya tampil berantakan? Judul yang muncul salah, gambar yang ditampilkan bukan foto utama artikel, atau bahkan tidak ada gambar sama sekali. Open Graph adalah solusi dari hampir semua masalah tersebut.
Dalam artikel ini, Anda akan memahami apa itu Open Graph, bagaimana cara kerjanya, mengapa preview link bisa tampil salah, dan bagaimana cara mengaturnya agar konten Anda selalu tampil menarik saat dibagikan di platform manapun.
Ringkasan
- Open Graph adalah protokol standar yang mengontrol bagaimana tampilan preview link saat dibagikan di media sosial dan aplikasi pesan seperti WhatsApp, Facebook, LinkedIn, dan Telegram.
- Tanpa Open Graph yang benar, platform akan menampilkan gambar acak atau bahkan tidak ada preview sama sekali.
- Empat tag Open Graph yang wajib ada di setiap halaman adalah
og:title,og:description,og:image, danog:url. - Di WordPress, Open Graph bisa diatur dengan mudah melalui plugin SEO seperti Yoast, Rank Math, atau AIOSEO tanpa perlu menyentuh kode.
- Preview link yang menarik terbukti meningkatkan engagement hingga 100% lebih tinggi dibanding link tanpa gambar.
Apa Itu Open Graph?
Open Graph adalah protokol standar yang dikembangkan pertama kali oleh Facebook pada 2010 untuk mengontrol cara sebuah halaman web ditampilkan saat dibagikan di platform media sosial dan aplikasi perpesanan.
Nama “Open Graph” merujuk pada konsep bahwa setiap halaman web bisa direpresentasikan sebagai sebuah objek dalam “grafik sosial”, yaitu jaringan koneksi antar pengguna, konten, dan interaksi di dunia digital. Dengan menggunakan tag Open Graph, Anda mendefinisikan bagaimana objek tersebut seharusnya terlihat saat muncul di feed seseorang.
Secara teknis, Open Graph diimplementasikan melalui tag <meta> yang ditempatkan di dalam bagian <head> pada kode HTML halaman Anda. Tag-tag ini tidak terlihat oleh pengunjung website biasa, tapi sangat penting bagi crawler platform media sosial yang membaca informasi ini setiap kali ada link yang dibagikan.
Yang awalnya hanya standar Facebook, kini Open Graph sudah menjadi standar de facto yang diadopsi oleh hampir semua platform digital, mulai dari Facebook, LinkedIn, WhatsApp, Telegram, hingga Snapchat. Bahkan Twitter atau X memiliki sistemnya sendiri bernama Twitter Cards, namun secara otomatis menggunakan Open Graph sebagai fallback jika tag Twitter tidak ditemukan.
Fungsi Open Graph pada Website
Memahami fungsi Open Graph akan membantu Anda menyadari betapa pentingnya protokol ini untuk strategi konten digital Anda.
- Mengontrol tampilan preview link secara penuh
Tanpa Open Graph, platform media sosial akan mencoba menebak sendiri judul, deskripsi, dan gambar apa yang paling relevan untuk ditampilkan dari halaman Anda. Hasilnya sering tidak sesuai harapan. Dengan Open Graph yang benar, Anda menentukan sendiri apa yang ditampilkan. - Meningkatkan click-through rate (CTR) dari media sosial
Preview link yang menarik dengan gambar yang relevan dan judul yang tepat secara signifikan meningkatkan kemungkinan seseorang mengklik link tersebut. Sebuah studi dari INMA pada 2024 menunjukkan bahwa postingan Facebook dengan gambar mendapatkan engagement 100% lebih tinggi dan impresi 114% lebih banyak dibanding postingan tanpa gambar. - Menjaga konsistensi brand di semua platform
Dengan Open Graph, tampilan konten Anda akan konsisten di Facebook, WhatsApp, LinkedIn, Telegram, dan platform lainnya. Konsistensi ini memperkuat identitas brand dan meningkatkan kepercayaan audiens terhadap konten yang Anda bagikan. - Mendukung performa SEO secara tidak langsung
Open Graph tidak memengaruhi ranking di Google secara langsung, namun dampak tidak langsungnya nyata. Preview yang menarik mendatangkan lebih banyak klik, lebih banyak trafik, dan berpotensi mendatangkan lebih banyak backlink. Semua faktor ini pada akhirnya berkontribusi pada peningkatan otoritas domain dan peringkat SEO jangka panjang. - Memberikan kontrol atas konten yang terlihat saat dibagikan
Anda bisa menentukan gambar khusus yang berbeda dari featured image artikel, menulis deskripsi yang lebih persuasif untuk konteks media sosial, atau bahkan mengatur judul yang berbeda dari judul asli artikel untuk memaksimalkan klik dari audiens media sosial.
Tag-Tag Open Graph yang Perlu Diketahui
Ada empat tag yang wajib ada dan beberapa tag opsional yang sangat direkomendasikan.
Tag wajib
<meta property="og:title" content="Judul Halaman Anda" />
<meta property="og:description" content="Deskripsi singkat halaman ini." />
<meta property="og:image" content="https://namadomain.com/gambar-og.jpg" />
<meta property="og:url" content="https://namadomain.com/halaman-ini/" />Tag opsional yang direkomendasikan
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Nama Website Anda" />
<meta property="og:locale" content="id_ID" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Deskripsi gambar untuk aksesibilitas" />Penjelasannya:
og:typemembantu platform memahami jenis konten yang dibagikan. Gunakan ‘website’ untuk halaman statis dan ‘article’ untuk postingan blog atau berita.og:localepenting untuk website berbahasa Indonesia karena memastikan konten dikategorikan dengan bahasa dan wilayah yang tepat.og:image:widthdanog:image:heightmembantu platform merender gambar dengan proporsi yang benar bahkan sebelum gambar selesai diunduh.
Mengapa Preview Link di WhatsApp dan Facebook Bisa Salah?
Ini adalah pertanyaan yang paling sering muncul dari pengguna yang baru menyadari pentingnya Open Graph. Ada beberapa penyebab umum yang perlu Anda periksa.
- Open Graph belum dikonfigurasi sama sekali: Jika website Anda tidak memiliki tag Open Graph, platform akan mencoba membaca informasi dari tag HTML standar seperti
<title>dan<meta name="description">, lalu memilih gambar pertama yang ditemukan di halaman. Hasilnya sangat tidak terprediksi dan sering mengecewakan. - Tag
og:imagemenggunakan URL relatif, bukan absolut: Ini adalah kesalahan yang sangat umum. URL gambar di Open Graph harus menggunakan URL lengkap yang dimulai denganhttps://, bukan path relatif seperti/wp-content/uploads/gambar.jpg. URL relatif akan diabaikan begitu saja oleh crawler platform tanpa ada pesan error apapun. - Gambar menggunakan HTTP, bukan HTTPS: Platform modern menerapkan kebijakan mixed content yang ketat. Gambar dengan URL HTTP pada halaman HTTPS akan diblokir dan tidak akan ditampilkan di preview.
- Cache preview belum diperbarui: Setelah Anda memperbaiki tag Open Graph, platform tidak langsung memperbarui preview yang sudah tersimpan di cache mereka. Facebook dan LinkedIn memiliki sistem cache yang bisa bertahan cukup lama, sehingga preview lama masih bisa muncul meski tag sudah diperbaiki.
- Ukuran gambar tidak memenuhi syarat minimum: Gambar yang terlalu kecil akan diabaikan atau ditampilkan dengan kualitas buruk oleh beberapa platform. Pastikan gambar memenuhi ukuran minimum yang direkomendasikan.
- Plugin SEO belum diaktifkan atau dikonfigurasi dengan benar: Di WordPress, banyak pengguna yang menginstal plugin SEO tapi tidak mengaktifkan fitur Open Graph-nya, atau tidak mengisi gambar sosial secara spesifik untuk setiap halaman.
Bagaimana Cara Mengatur Open Graph di WordPress?
Di WordPress, mengatur Open Graph bisa dilakukan dengan sangat mudah melalui plugin SEO yang mungkin sudah Anda instal. Plugin seperti Yoast SEO, Rank Math, dan AIOSEO semuanya sudah menyediakan fitur Open Graph yang bisa diaktifkan dan dikonfigurasi langsung dari dashboard WordPress tanpa perlu menyentuh kode HTML sama sekali.
Panduan lengkap cara mengatur Open Graph di WordPress untuk masing-masing plugin tersebut sudah kami bahas secara detail di artikel Setting Open Graph di WordPress. Silakan ikuti panduan di sana untuk memastikan Open Graph website WordPress Anda sudah terkonfigurasi dengan benar.
Bagaimana Cara Mengecek Apakah Open Graph Sudah Benar?
Setelah mengatur Open Graph, langkah selanjutnya adalah memverifikasi bahwa konfigurasi sudah berjalan dengan benar sebelum link Anda tersebar luas di media sosial.
Facebook Sharing Debugger
Ini adalah tool paling penting untuk dicek pertama kali. Akses melalui developers.facebook.com/tools/debug, masukkan URL halaman yang ingin diperiksa, lalu klik Debug. Tool ini akan menampilkan semua tag Open Graph yang terdeteksi, peringatan jika ada yang perlu diperbaiki, dan preview persis seperti yang akan muncul saat link dibagikan di Facebook atau WhatsApp.
Yang sangat berguna adalah tombol Scrape Again di tool ini. Jika Anda baru saja memperbaiki tag Open Graph, klik tombol ini untuk meminta Facebook memperbarui cache preview-nya secara manual. Ini adalah cara paling cepat untuk memastikan preview yang sudah diperbaiki segera berlaku tanpa menunggu cache kadaluarsa secara alami.
View Source di Browser
Cara paling cepat adalah membuka halaman website Anda di browser, klik kanan dan pilih View Page Source atau tekan Ctrl+U, lalu cari teks og: menggunakan fitur Find. Anda akan melihat langsung tag Open Graph apa saja yang sudah terpasang dan isinya.
LinkedIn Post Inspector
Tersedia di linkedin.com/post-inspector, tool ini memiliki fungsi yang sama untuk platform LinkedIn. Masukkan URL, klik Inspect, dan Anda bisa melihat bagaimana link Anda akan terlihat di feed LinkedIn beserta notifikasi jika ada masalah yang terdeteksi.
Apa Bedanya Open Graph dengan SEO Meta Tag?
Keduanya sama-sama berupa tag <meta> di bagian <head> pada halaman, tapi memiliki tujuan dan pembaca yang berbeda.
- SEO Meta Tag ditujukan untuk mesin pencari seperti Google, Bing, dan Yahoo. Tag seperti
<meta name="title">,<meta name="description">, dan tag schema markup lainnya memberikan informasi kepada crawler mesin pencari tentang konten halaman untuk keperluan indeksasi dan penentuan snippet di hasil pencarian.
- Open Graph ditujukan untuk platform media sosial dan aplikasi perpesanan. Tag Open Graph dibaca oleh crawler Facebook, LinkedIn, WhatsApp, Telegram, dan platform sejenisnya untuk menentukan tampilan preview link.
| Aspek | SEO Meta Tag | Open Graph |
|---|---|---|
| Ditujukan untuk | Mesin pencari (Google, Bing) | Media sosial dan aplikasi pesan |
| Memengaruhi | Snippet di hasil pencarian | Preview link saat dibagikan |
| Tag utama | <meta name="description"> | <meta property="og:description"> |
| Dampak langsung ke SEO | Ya | Tidak langsung |
| Digunakan oleh | Googlebot, Bingbot | Facebook, WhatsApp, LinkedIn |
Idealnya, setiap halaman website Anda memiliki keduanya. Bukan tidak mungkin keduanya memiliki konten yang berbeda. Judul SEO bisa dioptimasi untuk keyword tertentu, sementara judul Open Graph bisa ditulis lebih persuasif untuk mendorong klik dari media sosial.
Satu hal yang perlu diketahui: Twitter atau X memiliki sistem tersendiri bernama Twitter Cards dengan tag seperti twitter:title dan twitter:image. Namun, jika tag tersebut tidak ada, Twitter akan otomatis menggunakan tag Open Graph sebagai gantinya. Jadi konfigurasi Open Graph yang baik secara otomatis juga sudah meng-cover Twitter.
Tips Memilih Gambar untuk Open Graph
Gambar adalah elemen Open Graph yang paling berdampak secara visual. Memilih dan menyiapkan gambar yang tepat bisa membuat perbedaan besar pada seberapa banyak orang yang mengklik link Anda.
1. Gunakan ukuran 1200 x 630 piksel
Ini adalah ukuran yang direkomendasikan secara universal oleh hampir semua platform termasuk Facebook, LinkedIn, WhatsApp, dan Discord. Rasio aspek 1.91:1 ini memastikan gambar ditampilkan dengan proporsi yang benar tanpa terpotong di semua platform.
| Platform | Ukuran Minimum | Ukuran Direkomendasikan | Rasio Aspek |
|---|---|---|---|
| 200 x 200 px | 1200 x 630 px | 1.91:1 | |
| 200 x 200 px | 1200 x 627 px | 1.91:1 | |
| Twitter/X | 300 x 157 px | 1200 x 628 px | 1.91:1 |
| 300 x 300 px | 1200 x 630 px | 1.91:1 | |
| Telegram | Tidak ada minimum | 1200 x 630 px | Fleksibel |
2. Jaga ukuran file gambar di bawah 1 MB
File gambar yang terlalu besar bisa memperlambat proses loading preview dan bahkan ditolak oleh beberapa platform. Kompres gambar sebelum menggunakannya sebagai OG image. Format JPEG direkomendasikan untuk foto karena rasio kompresi yang lebih baik, sementara PNG lebih cocok untuk gambar dengan teks atau elemen grafis.
3. Pilih gambar yang relevan dengan konten halaman
Gambar yang tidak ada hubungannya dengan konten akan membingungkan pembaca dan menurunkan kepercayaan. Pastikan gambar OG mencerminkan topik atau isi halaman secara akurat.
4. Tambahkan teks atau judul di atas gambar dengan bijak
Banyak brand menambahkan judul artikel atau tagline di atas gambar OG untuk memberikan konteks tambahan di feed media sosial. Jika melakukan ini, pastikan teks tidak menutupi lebih dari 20% area gambar dan tetap mudah dibaca di ukuran thumbnail yang kecil.
5. Hindari menggunakan gambar yang sama untuk semua halaman
Satu gambar OG yang digunakan untuk seluruh website terlihat tidak profesional dan tidak informatif. Usahakan setiap halaman atau artikel memiliki og image yang unik dan relevan dengan kontennya masing-masing.
6. Gunakan URL HTTPS yang absolut
Seperti yang sudah disebutkan sebelumnya, URL gambar harus lengkap dan dimulai dengan https://. Pastikan gambar bisa diakses secara publik tanpa memerlukan login atau autentikasi apapun karena crawler platform tidak akan bisa mengunduh gambar yang memerlukan akses khusus.
7. Sertakan tag og:image:alt
Tambahkan deskripsi gambar menggunakan tag og:image:alt untuk keperluan aksesibilitas. Tag ini membantu pengguna dengan keterbatasan visual yang menggunakan screen reader, sekaligus menjadi praktik yang direkomendasikan oleh spesifikasi Open Graph resmi.
FAQ
Berikut adalah beberapa pertanyaan popular tentang apa itu open graph.
Apakah Open Graph memengaruhi ranking di Google?
Tidak secara langsung. Google tidak menggunakan tag Open Graph sebagai faktor ranking. Namun dampak tidak langsungnya nyata: preview yang menarik mendorong lebih banyak klik dari media sosial, meningkatkan trafik, dan berpotensi mendatangkan lebih banyak backlink yang pada akhirnya berkontribusi pada peningkatan peringkat SEO jangka panjang.
Kenapa preview WhatsApp tidak berubah meski tag Open Graph sudah diperbaiki?
WhatsApp dan platform lain menyimpan cache preview link yang bisa bertahan cukup lama. Untuk memperbarui cache Facebook dan WhatsApp, gunakan Facebook Sharing Debugger dan klik tombol Scrape Again. Untuk platform lain, biasanya perlu menunggu beberapa jam hingga cache kadaluarsa secara alami.
Apakah setiap halaman website perlu memiliki tag Open Graph yang berbeda?
Idealnya ya. Setiap halaman sebaiknya memiliki tag og:title, og:description, dan og:image yang unik dan relevan dengan konten spesifik halaman tersebut. Menggunakan satu set tag yang sama untuk seluruh website membuat semua link terlihat identik saat dibagikan, yang mengurangi nilai informatif preview bagi calon pembaca.
Berapa ukuran gambar yang disarankan untuk Open Graph?
Ukuran yang direkomendasikan adalah 1200 x 630 px.
Penutup
Open Graph adalah protokol yang menentukan bagaimana konten website Anda ditampilkan saat dibagikan di media sosial dan aplikasi perpesanan. Dengan mengonfigurasinya dengan benar, Anda mendapatkan kendali penuh atas judul, deskripsi, dan gambar yang muncul di preview link, sehingga konten Anda tampil profesional dan menarik klik di manapun dibagikan.
Langkah paling mendasar adalah memastikan empat tag wajib sudah terpasang di setiap halaman: og:title, og:description, og:image, dan og:url. Selanjutnya, gunakan gambar berukuran 1200 x 630 piksel dan verifikasi hasilnya menggunakan Facebook Sharing Debugger sebelum konten Anda tersebar luas.
Untuk website Anda bisa tampil optimal di semua platform, tentu dibutuhkan hosting yang cepat dan andal agar gambar OG bisa dimuat dengan cepat oleh crawler platform media sosial. Layanan Hosting Murah dari Rumahweb Indonesia hadir dengan performa server yang dioptimasi dan uptime tinggi, memastikan setiap aset website Anda termasuk gambar Open Graph selalu bisa diakses dengan cepat kapan pun dibutuhkan.
