{"id":66410,"date":"2026-07-16T08:30:00","date_gmt":"2026-07-16T01:30:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=66410"},"modified":"2026-07-15T16:27:14","modified_gmt":"2026-07-15T09:27:14","slug":"open-graph-adalah","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/open-graph-adalah\/","title":{"rendered":"Apa Itu Open Graph? Fungsi, Cara Kerja, dan Cara Mengaturnya"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Pernahkah 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. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ringkasan<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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.<\/li>\n\n\n\n<li>Tanpa Open Graph yang benar, platform akan menampilkan gambar acak atau bahkan tidak ada preview sama sekali.<\/li>\n\n\n\n<li>Empat tag Open Graph yang wajib ada di setiap halaman adalah <code>og:title<\/code>, <code>og:description<\/code>, <code>og:image<\/code>, dan <code>og:url<\/code>.<\/li>\n\n\n\n<li>Di WordPress, Open Graph bisa diatur dengan mudah melalui plugin SEO seperti Yoast, Rank Math, atau AIOSEO tanpa perlu menyentuh kode.<\/li>\n\n\n\n<li>Preview link yang menarik terbukti meningkatkan engagement hingga 100% lebih tinggi dibanding link tanpa gambar.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Apa Itu Open Graph?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nama &#8220;Open Graph&#8221; merujuk pada konsep bahwa setiap halaman web bisa direpresentasikan sebagai sebuah objek dalam &#8220;grafik sosial&#8221;, 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Secara teknis, Open Graph diimplementasikan melalui tag <code>&lt;meta&gt;<\/code> yang ditempatkan di dalam bagian <code>&lt;head&gt;<\/code> pada kode HTML halaman Anda. Tag-tag ini tidak terlihat oleh pengunjung website biasa, tapi sangat penting bagi <em>crawler <\/em>platform media sosial yang membaca informasi ini setiap kali ada link yang dibagikan.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 <em>fallback <\/em>jika tag Twitter tidak ditemukan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fungsi Open Graph pada Website<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Memahami fungsi Open Graph akan membantu Anda menyadari betapa pentingnya protokol ini untuk strategi konten digital Anda.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mengontrol tampilan preview link secara penuh<\/strong><br \/>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.<\/li>\n\n\n\n<li><strong>Meningkatkan click-through rate (CTR) dari media sosial<\/strong><br \/>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.<\/li>\n\n\n\n<li><strong>Menjaga konsistensi brand di semua platform<\/strong><br \/>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.<\/li>\n\n\n\n<li><strong>Mendukung performa SEO secara tidak langsung<\/strong><br \/>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.<\/li>\n\n\n\n<li><strong>Memberikan kontrol atas konten yang terlihat saat dibagikan<\/strong><br \/>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.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Tag-Tag Open Graph yang Perlu Diketahui<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ada empat tag yang wajib ada dan beberapa tag opsional yang sangat direkomendasikan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tag wajib<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:title\" content=\"Judul Halaman Anda\" \/&gt;\n&lt;meta property=\"og:description\" content=\"Deskripsi singkat halaman ini.\" \/&gt;\n&lt;meta property=\"og:image\" content=\"https:\/\/namadomain.com\/gambar-og.jpg\" \/&gt;\n&lt;meta property=\"og:url\" content=\"https:\/\/namadomain.com\/halaman-ini\/\" \/&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Tag opsional yang direkomendasikan<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta property=\"og:type\" content=\"article\" \/&gt;\n&lt;meta property=\"og:site_name\" content=\"Nama Website Anda\" \/&gt;\n&lt;meta property=\"og:locale\" content=\"id_ID\" \/&gt;\n&lt;meta property=\"og:image:width\" content=\"1200\" \/&gt;\n&lt;meta property=\"og:image:height\" content=\"630\" \/&gt;\n&lt;meta property=\"og:image:alt\" content=\"Deskripsi gambar untuk aksesibilitas\" \/&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Penjelasannya<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>og:type<\/code> membantu platform memahami jenis konten yang dibagikan. Gunakan &#8216;website&#8217; untuk halaman statis dan &#8216;article&#8217; untuk postingan blog atau berita. <\/li>\n\n\n\n<li><code>og:locale<\/code> penting untuk website berbahasa Indonesia karena memastikan konten dikategorikan dengan bahasa dan wilayah yang tepat. <\/li>\n\n\n\n<li><code>og:image:width<\/code> dan <code>og:image:height<\/code> membantu platform merender gambar dengan proporsi yang benar bahkan sebelum gambar selesai diunduh.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Mengapa Preview Link di WhatsApp dan Facebook Bisa Salah?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ini adalah pertanyaan yang paling sering muncul dari pengguna yang baru menyadari pentingnya Open Graph. Ada beberapa penyebab umum yang perlu Anda periksa.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Open Graph belum dikonfigurasi sama sekali<\/strong>: Jika website Anda tidak memiliki tag Open Graph, platform akan mencoba membaca informasi dari tag HTML standar seperti <code>&lt;title&gt;<\/code> dan <code>&lt;meta name=\"description\"&gt;<\/code>, lalu memilih gambar pertama yang ditemukan di halaman. Hasilnya sangat tidak terprediksi dan sering mengecewakan.<\/li>\n\n\n\n<li><strong>Tag <code>og:image<\/code> menggunakan URL relatif, bukan absolut<\/strong>: Ini adalah kesalahan yang sangat umum. URL gambar di Open Graph harus menggunakan URL lengkap yang dimulai dengan <code>https:\/\/<\/code>, bukan path relatif seperti <code>\/wp-content\/uploads\/gambar.jpg<\/code>. URL relatif akan diabaikan begitu saja oleh crawler platform tanpa ada pesan error apapun.<\/li>\n\n\n\n<li><strong>Gambar menggunakan HTTP, bukan HTTPS<\/strong>: Platform modern menerapkan kebijakan mixed content yang ketat. Gambar dengan URL HTTP pada halaman HTTPS akan diblokir dan tidak akan ditampilkan di preview.<\/li>\n\n\n\n<li><strong>Cache preview belum diperbarui<\/strong>: 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.<\/li>\n\n\n\n<li><strong>Ukuran gambar tidak memenuhi syarat minimum:<\/strong> Gambar yang terlalu kecil akan diabaikan atau ditampilkan dengan kualitas buruk oleh beberapa platform. Pastikan gambar memenuhi ukuran minimum yang direkomendasikan.<\/li>\n\n\n\n<li><strong>Plugin SEO belum diaktifkan atau dikonfigurasi dengan benar<\/strong>: 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.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Bagaimana Cara Mengatur Open Graph di WordPress?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Panduan lengkap cara mengatur Open Graph di WordPress untuk masing-masing plugin tersebut sudah kami bahas secara detail di artikel <a href=\"https:\/\/www.rumahweb.com\/journal\/cara-setting-open-graph-di-wordpress\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Setting Open Graph di WordPress<\/a>. Silakan ikuti panduan di sana untuk memastikan Open Graph website WordPress Anda sudah terkonfigurasi dengan benar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bagaimana Cara Mengecek Apakah Open Graph Sudah Benar?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah mengatur Open Graph, langkah selanjutnya adalah memverifikasi bahwa konfigurasi sudah berjalan dengan benar sebelum link Anda tersebar luas di media sosial.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Facebook Sharing Debugger<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ini adalah tool paling penting untuk dicek pertama kali. Akses melalui <code>developers.facebook.com\/tools\/debug<\/code>, masukkan URL halaman yang ingin diperiksa, lalu klik <strong>Debug<\/strong>. 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yang sangat berguna adalah tombol <strong>Scrape Again<\/strong> 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 <em>preview <\/em>yang sudah diperbaiki segera berlaku tanpa menunggu <em>cache <\/em>kadaluarsa secara alami.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/facebook-debugger.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"684\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/facebook-debugger-1024x684.webp\" alt=\"contoh open graph pada halaman Rumahweb\" class=\"wp-image-66412\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/facebook-debugger-1024x684.webp 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/facebook-debugger-300x200.webp 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/facebook-debugger-768x513.webp 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/facebook-debugger-370x247.webp 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/facebook-debugger-270x180.webp 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/facebook-debugger-570x381.webp 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/facebook-debugger-740x494.webp 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/facebook-debugger.webp 1125w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><em>View Source<\/em> di Browser<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cara paling cepat adalah membuka halaman website Anda di browser, klik kanan dan pilih <strong>View Page Source<\/strong> atau tekan <code>Ctrl+U<\/code>, lalu cari teks <code>og:<\/code> menggunakan fitur Find. Anda akan melihat langsung tag Open Graph apa saja yang sudah terpasang dan isinya.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/contoh-pada-view-source.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"231\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/contoh-pada-view-source-1024x231.png\" alt=\"contoh open graph pada view source\" class=\"wp-image-66413\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/contoh-pada-view-source-1024x231.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/contoh-pada-view-source-300x68.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/contoh-pada-view-source-768x174.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/contoh-pada-view-source-1536x347.png 1536w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/contoh-pada-view-source-370x84.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/contoh-pada-view-source-270x61.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/contoh-pada-view-source-570x129.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/contoh-pada-view-source-740x167.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/contoh-pada-view-source.png 1894w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">LinkedIn Post Inspector<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tersedia di <code>linkedin.com\/post-inspector<\/code>, 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa Bedanya Open Graph dengan SEO Meta Tag?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Keduanya sama-sama berupa tag <code>&lt;meta&gt;<\/code> di bagian <code>&lt;head&gt;<\/code> pada halaman, tapi memiliki tujuan dan pembaca yang berbeda.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>SEO Meta Tag<\/strong> ditujukan untuk mesin pencari seperti Google, Bing, dan Yahoo. Tag seperti <code>&lt;meta name=\"title\"&gt;<\/code>, <code>&lt;meta name=\"description\"&gt;<\/code>, dan tag schema markup lainnya memberikan informasi kepada <em>crawler <\/em>mesin pencari tentang konten halaman untuk keperluan indeksasi dan penentuan <em>snippet <\/em>di hasil pencarian.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Open Graph<\/strong> 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.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Aspek<\/th><th>SEO Meta Tag<\/th><th>Open Graph<\/th><\/tr><\/thead><tbody><tr><td>Ditujukan untuk<\/td><td>Mesin pencari (Google, Bing)<\/td><td>Media sosial dan aplikasi pesan<\/td><\/tr><tr><td>Memengaruhi<\/td><td>Snippet di hasil pencarian<\/td><td>Preview link saat dibagikan<\/td><\/tr><tr><td>Tag utama<\/td><td><code>&lt;meta name=\"description\"&gt;<\/code><\/td><td><code>&lt;meta property=\"og:description\"&gt;<\/code><\/td><\/tr><tr><td>Dampak langsung ke SEO<\/td><td>Ya<\/td><td>Tidak langsung<\/td><\/tr><tr><td>Digunakan oleh<\/td><td>Googlebot, Bingbot<\/td><td>Facebook, WhatsApp, LinkedIn<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Satu hal yang perlu diketahui: Twitter atau X memiliki sistem tersendiri bernama Twitter Cards dengan tag seperti <code>twitter:title<\/code> dan <code>twitter:image<\/code>. 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tips Memilih Gambar untuk Open Graph<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Gunakan ukuran 1200 x 630 piksel<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Platform<\/th><th>Ukuran Minimum<\/th><th>Ukuran Direkomendasikan<\/th><th>Rasio Aspek<\/th><\/tr><\/thead><tbody><tr><td>Facebook<\/td><td>200 x 200 px<\/td><td>1200 x 630 px<\/td><td>1.91:1<\/td><\/tr><tr><td>LinkedIn<\/td><td>200 x 200 px<\/td><td>1200 x 627 px<\/td><td>1.91:1<\/td><\/tr><tr><td>Twitter\/X<\/td><td>300 x 157 px<\/td><td>1200 x 628 px<\/td><td>1.91:1<\/td><\/tr><tr><td>WhatsApp<\/td><td>300 x 300 px<\/td><td>1200 x 630 px<\/td><td>1.91:1<\/td><\/tr><tr><td>Telegram<\/td><td>Tidak ada minimum<\/td><td>1200 x 630 px<\/td><td>Fleksibel<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. Jaga ukuran file gambar di bawah 1 MB<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Pilih gambar yang relevan dengan konten halaman<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Gambar yang tidak ada hubungannya dengan konten akan membingungkan pembaca dan menurunkan kepercayaan. Pastikan gambar OG mencerminkan topik atau isi halaman secara akurat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Tambahkan teks atau judul di atas gambar dengan bijak<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Hindari menggunakan gambar yang sama untuk semua halaman<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Gunakan URL HTTPS yang absolut<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Seperti yang sudah disebutkan sebelumnya, URL gambar harus lengkap dan dimulai dengan <code>https:\/\/<\/code>. Pastikan gambar bisa diakses secara publik tanpa memerlukan login atau autentikasi apapun karena crawler platform tidak akan bisa mengunduh gambar yang memerlukan akses khusus.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. Sertakan tag <code>og:image:alt<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tambahkan deskripsi gambar menggunakan tag <code>og:image:alt<\/code> untuk keperluan aksesibilitas. Tag ini membantu pengguna dengan keterbatasan visual yang menggunakan screen reader, sekaligus menjadi praktik yang direkomendasikan oleh spesifikasi Open Graph resmi.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FAQ<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Berikut adalah beberapa pertanyaan popular tentang apa itu open graph.<\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" style=\"font-style:normal;font-weight:700\"><summary>Apakah Open Graph memengaruhi ranking di Google?<\/summary>\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-style:normal;font-weight:400\">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.<\/p>\n<\/details>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" style=\"font-style:normal;font-weight:700\"><summary>Kenapa preview WhatsApp tidak berubah meski tag Open Graph sudah diperbaiki?<\/summary>\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-style:normal;font-weight:400\">WhatsApp dan platform lain menyimpan <em>cache preview <\/em>link yang bisa bertahan cukup lama. Untuk memperbarui <em>cache <\/em>Facebook dan WhatsApp, gunakan Facebook Sharing Debugger dan klik tombol Scrape Again. Untuk platform lain, biasanya perlu menunggu beberapa jam hingga <em>cache <\/em>kadaluarsa secara alami.<\/p>\n<\/details>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" style=\"font-style:normal;font-weight:700\"><summary>Apakah setiap halaman website perlu memiliki tag Open Graph yang berbeda?<\/summary>\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-style:normal;font-weight:400\">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.<\/p>\n<\/details>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" style=\"font-style:normal;font-weight:700\"><summary>Berapa ukuran gambar yang disarankan untuk Open Graph?<\/summary>\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-style:normal;font-weight:400\">Ukuran yang direkomendasikan adalah 1200 x 630 px.<\/p>\n<\/details>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Penutup<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 <em>preview <\/em>link, sehingga konten Anda tampil profesional dan menarik klik di manapun dibagikan.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Langkah paling mendasar adalah memastikan empat tag wajib sudah terpasang di setiap halaman: <code>og:title<\/code>, <code>og:description<\/code>, <code>og:image<\/code>, dan <code>og:url<\/code>. Selanjutnya, gunakan gambar berukuran 1200 x 630 piksel dan verifikasi hasilnya menggunakan Facebook Sharing Debugger sebelum konten Anda tersebar luas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk website Anda bisa tampil optimal di semua platform, tentu dibutuhkan hosting yang cepat dan andal agar gambar OG bisa dimuat dengan cepat oleh <em>crawler <\/em>platform media sosial. Layanan <strong><a href=\"https:\/\/www.rumahweb.com\/hosting-murah\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Hosting Murah<\/a><\/strong> 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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pernahkah 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 [&hellip;]<\/p>\n","protected":false},"author":329,"featured_media":66417,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[2357,705,706,999],"class_list":["post-66410","post","type-post","status-publish","format-standard","has-post-thumbnail","category-artikel-tutorial","tag-facebook","tag-og-image","tag-open-graph","tag-whatsapp"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"Open Graph adalah protokol standar yang mengontrol bagaimana tampilan preview link saat dibagikan di media sosial. Pelajari apa itu Open Graph di sini.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Lutfi Hanif\"\/>\n\t<meta name=\"google-site-verification\" content=\"wPstUwU5246IbK_1PqwGrc1LoSDnB-9rPbcT8_vSNgQ\" \/>\n\t<meta name=\"keywords\" content=\"apa itu open graph,open graph adalah,facebook,og image,open graph,whatsapp\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.rumahweb.com\/journal\/open-graph-adalah\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"id_Id\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Rumahweb Journal \u2013 News, Article, and Tutorial of Web Dev\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Apa Itu Open Graph? Fungsi, Cara Kerja, dan Cara Mengaturnya\" \/>\n\t\t<meta property=\"og:description\" content=\"Open Graph adalah protokol standar yang mengontrol bagaimana tampilan preview link saat dibagikan di media sosial. Pelajari apa itu Open Graph di sini.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.rumahweb.com\/journal\/open-graph-adalah\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/Banner-Open-Graph-adalah.webp\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/Banner-Open-Graph-adalah.webp\" \/>\n\t\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t\t<meta property=\"og:image:height\" content=\"634\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-07-16T01:30:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-07-15T09:27:14+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/RumahwebIndonesia\/\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@rumahwebtweet\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Apa Itu Open Graph? Fungsi, Cara Kerja, dan Cara Mengaturnya\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Open Graph adalah protokol standar yang mengontrol bagaimana tampilan preview link saat dibagikan di media sosial. Pelajari apa itu Open Graph di sini.\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@rumahwebtweet\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/Banner-Open-Graph-adalah.webp\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Apa Itu Open Graph? Fungsi, Cara Kerja, dan Cara Mengaturnya","description":"Open Graph adalah protokol standar yang mengontrol bagaimana tampilan preview link saat dibagikan di media sosial. Pelajari apa itu Open Graph di sini.","canonical_url":"https:\/\/www.rumahweb.com\/journal\/open-graph-adalah\/","robots":"max-image-preview:large","keywords":"apa itu open graph,open graph adalah,facebook,og image,open graph,whatsapp","webmasterTools":{"google-site-verification":"wPstUwU5246IbK_1PqwGrc1LoSDnB-9rPbcT8_vSNgQ","miscellaneous":""},"schema":null,"og:locale":"id_Id","og:site_name":"Rumahweb Journal \u2013 News, Article, and Tutorial of Web Dev","og:type":"article","og:title":"Apa Itu Open Graph? Fungsi, Cara Kerja, dan Cara Mengaturnya","og:description":"Open Graph adalah protokol standar yang mengontrol bagaimana tampilan preview link saat dibagikan di media sosial. Pelajari apa itu Open Graph di sini.","og:url":"https:\/\/www.rumahweb.com\/journal\/open-graph-adalah\/","og:image":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/Banner-Open-Graph-adalah.webp","og:image:secure_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/Banner-Open-Graph-adalah.webp","og:image:width":1200,"og:image:height":634,"article:published_time":"2026-07-16T01:30:00+00:00","article:modified_time":"2026-07-15T09:27:14+00:00","article:publisher":"https:\/\/www.facebook.com\/RumahwebIndonesia\/","twitter:card":"summary_large_image","twitter:site":"@rumahwebtweet","twitter:title":"Apa Itu Open Graph? Fungsi, Cara Kerja, dan Cara Mengaturnya","twitter:description":"Open Graph adalah protokol standar yang mengontrol bagaimana tampilan preview link saat dibagikan di media sosial. Pelajari apa itu Open Graph di sini.","twitter:creator":"@rumahwebtweet","twitter:image":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/Banner-Open-Graph-adalah.webp"},"aioseo_meta_data":{"post_id":"66410","title":null,"description":"Open Graph adalah protokol standar yang mengontrol bagaimana tampilan preview link saat dibagikan di media sosial. Pelajari apa itu Open Graph di sini.","keywords":[{"label":"apa itu open graph","value":"apa itu open graph"},{"label":"open graph adalah","value":"open graph adalah"}],"keyphrases":{"focus":{"keyphrase":"Open Graph","score":87,"analysis":{"keyphraseInTitle":{"score":9,"maxScore":9,"error":0},"keyphraseInDescription":{"score":9,"maxScore":9,"error":0},"keyphraseLength":{"score":9,"maxScore":9,"error":0,"length":2},"keyphraseInURL":{"score":5,"maxScore":5,"error":0},"keyphraseInIntroduction":{"score":9,"maxScore":9,"error":0},"keyphraseInSubHeadings":{"score":9,"maxScore":9,"error":0},"keyphraseInImageAlt":{"score":9,"maxScore":9,"error":0},"keywordDensity":{"type":"high","score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-07-15 07:50:00","updated":"2026-07-16 01:30:08","seo_analyzer_scan_date":null},"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/66410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/329"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=66410"}],"version-history":[{"count":8,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/66410\/revisions"}],"predecessor-version":[{"id":66444,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/66410\/revisions\/66444"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/66417"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=66410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=66410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=66410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}