Tag meta Open Graph: yang perlu kamu tahu

Panduan praktis tag meta Open Graph: fungsinya, tag penting dan contoh, fallback platform, langkah pengujian, dan checklist untuk memastikan pratinjau sosial tampil benar.

Michael

Diterbitkan 16 Februari 2026

Open Graph Meta Tags - What You Need to Know

Apa fungsi Open Graph dan mengapa itu penting

Open Graph meta tag memberi tahu platform sosial judul, deskripsi, dan gambar yang ditampilkan ketika seseorang membagikan sebuah URL. Ditempatkan di head HTML, tag ini menstandarkan bagaimana halaman dipratinjau di layanan yang mendukung protokol ini. Saat kamu mengaturnya, kamu mengendalikan cuplikan yang dilihat orang di feed, pesan pribadi, dan pratinjau chat, alih-alih menyerahkan pemilihan ke heuristik platform.

Beberapa catatan teknis yang memengaruhi implementasi dan pemecahan masalah: Google menggunakan versi mobile dari sebuah halaman sebagai dasar utama untuk perayapan dan pengindeksan; sejak July 2024 Google merayapi Search dengan Googlebot Smartphone secara default. Facebook, Twitter/X dan scraper sosial lain mungkin mengambil halaman dengan user-agent berbeda dan menyimpan pratinjau ke cache. Juga perhatikan Google menghapus halaman yang di-cache secara tradisional pada awal 2024, yang tidak mengubah cara Open Graph bekerja tetapi memengaruhi bagaimana mesin pencari menampilkan cuplikan halaman lama.

Tag Open Graph utama dan contoh markup

Tag Open Graph inti yang harus kamu sertakan di head setiap halaman yang dapat dibagikan adalah og:title, og:description, og:image, og:url dan og:type. Tambahkan mereka bersamaan dengan meta description standar dan structured data; perayap sosial hanya membaca head, jadi sertakan tag yang sudah dirender penuh di sana.

Contoh HTML (letakkan di dalam <head>):

Jika kamu menerbitkan konten secara programatik (template CMS atau server rendering), pastikan tag tersebut dihasilkan di sisi server sehingga scraper menerimanya tanpa bergantung pada sisi klien JavaScript.

Perbedaan platform dan mekanisme fallback

Open Graph adalah protokol yang didukung luas, tetapi setiap platform menerapkan aturan dan fallback sendiri.

Karena platform menyimpan pratinjau ke cache dengan cara berbeda, selalu uji halamanmu pada layanan yang kemungkinan besar akan dipakai pengguna untuk berbagi. Gunakan debugger platform untuk memeriksa apa yang diekstrak tiap layanan dan untuk membersihkan snapshot cache saat kamu memperbarui metadata.

Panduan gambar dan pertimbangan aksesibilitas

Visual adalah elemen paling terlihat dari pratinjau sosial. Usahakan gambar yang cukup besar agar tajam di perangkat ber-DPI tinggi dan terpusat secara visual untuk rasio crop yang umum. Pendekatan yang banyak digunakan adalah menyediakan gambar berorientasi lanskap dan menyertakan metadata lebar/tinggi eksplisit bila didukung (og:image:width dan og:image:height) sehingga scraper tahu dimensinya tanpa mengunduh seluruh file.

Periksa juga poin praktis berikut:

Contoh: periksa header gambar dengan perintah seperti curl -I https://yourdomain.com/wp-content/uploads/your-image.png untuk memastikan respons 200 dan Content-Type.

Cara menguji dan memecahkan masalah Open Graph

Saat pratinjau terlihat salah, ikuti daftar pemeriksaan sistematis daripada menebak. Mulai dengan head HTML mentah untuk memastikan tag ada, lalu periksa bagaimana scraper mengambil halaman dan apakah proxy atau cache mengembalikan konten usang.

Untuk halaman yang kamu miliki, URL Inspection di Google Search Console tetap berguna untuk pemeriksaan pengindeksan dan rendering seluler, tetapi itu bukan pengganti debugger masing‑masing platform sosial saat mendiagnosis masalah pratinjau sosial.

Kesalahan umum dan daftar periksa implementasi singkat

Daftar periksa implementasi singkat:

Jika kamu menginginkan audit teknis yang lebih mendalam tentang bagaimana halamanmu disajikan dan dirender, lihat Baca the Technical SEO Panduan untuk pertimbangan tata letak, rendering, dan sisi server.

FAQ: Bagaimana jika sebuah platform mengabaikan og:image milikmu?

Platform menerapkan heuristik dan caching masing‑masing. Pastikan URL gambar mengembalikan status 200 dan Content-Type yang benar, cukup besar dan memiliki rasio aspek yang sesuai, dan tidak diblokir oleh robots.txt. Gunakan debugger platform untuk melihat persis apa yang diekstrak scraper dan untuk memaksa re-scrape.

FAQ: Bisakah kamu menggunakan teks berbeda untuk Twitter/X dan Facebook?

Ya. Twitter/X mendukung tag twitter:* untuk judul, deskripsi, dan gambar. Jika kamu membutuhkan judul atau gambar yang berbeda di Twitter/X, sertakan baik tag og:* maupun twitter:* — platform akan memprioritaskan tag miliknya saat tersedia.

FAQ: Haruskah tag Open Graph ditambahkan untuk setiap halaman?

Prioritaskan halaman yang mudah dibagikan: posting blog, halaman landing dan halaman produk biasanya mendapat manfaat paling besar. Untuk halaman situs berskala luas (legal, admin) manfaatnya lebih kecil tetapi tidak berbahaya. Jika sebuah halaman kecil kemungkinannya dibagikan, tag memberi sedikit nilai namun juga sedikit biaya.

FAQ: Apakah tag Open Graph memengaruhi peringkat SEO?

Tag Open Graph mengontrol pratinjau sosial dan tidak secara langsung mengubah bagaimana mesin pencari memberi peringkat halaman. Namun, pratinjau yang lebih baik dapat meningkatkan klik dari saluran sosial, yang mungkin secara tidak langsung memengaruhi sinyal keterlibatan pengguna. Ingat perbedaan antara perayapan, pengindeksan, dan peringkat: tag OG memengaruhi apa yang ditampilkan platform sosial, bukan aturan pengindeksan mesin pencari.

Artikel terkait