Pengertian Open Graph dan Fungsinya Untuk Website Perusahaan

Tanpa Open Graph, Anda bagikan link company profile ke WhatsApp atau Facebook. Preview-nya kosong.

Atau gambarnya random dari galeri lama. Judul terpotong. Deskripsi ambil kalimat pertama tanpa konteks.

Tim sales malu. Brand terlihat ceroboh di depan klien.

Masalah itu muncul bukan karena desain jelek. Penyebabnya Open Graph belum diset, atau meta-nya salah.

Open Graph adalah protokol meta tag di HTML head. Platform sosial membaca tag itu saat seseorang menempel URL.

Bagi website perusahaan, Open Graph mengatur judul, deskripsi, gambar, dan tipe objek di kartu tautan.

Bukan sinyal ranking Google. Justru dampaknya ada di CTR share dan citra brand.

Lalu apa yang layak Anda set?

Artikel ini membedah pengertian Open Graph, fungsi, cara kerja, mitos SEO, ukuran gambar, dan panduan WordPress, Laravel, serta Next.js.

Sementara istilah Open Graph sering muncul bersama istilah share preview di tim marketing.

Apa Itu Open Graph

Open Graph adalah protokol yang Facebook publikasikan pada 2010. Spesifikasi resmi ada di ogp.me.

Protokol ini memakai properti seperti og:title, og:description, og:image, og:url, dan og:type.

Browser menampilkan halaman. Crawler sosmed membaca meta property di head.

Lalu platform menyusun kartu tautan.

Tanpa Open Graph, banyak platform menebak judul dari tag <title>.

Gambar sering diambil dari file pertama di halaman. Untuk perusahaan, tebakan itu berbahaya.

Sebab logo kecil atau foto produk acak bisa tampil di feed iklan internal tim.

Bila Anda ingin konteks istilah sejenis, baca arti istilah digital marketing.

Open Graph beda dari Twitter Cards. Twitter Cards memakai prefix twitter:.

Meski beda sintaks, banyak situs memasang keduanya agar preview konsisten.

Fungsi Open Graph untuk Website Perusahaan

Fungsi inti Open Graph: mengontrol bagaimana URL perusahaan tampil saat dibagikan.

Anda menentukan judul yang ringkas. Lalu deskripsi bisa lebih menjual tanpa hard sell.

Gambar preview jadi aset brand. Bukan sisa file dari media library.

Sementara di praktik lapangan, Open Graph mendukung empat hasil bisnis:

• CTR tautan naik saat tim bagikan ke WhatsApp grup atau LinkedIn.
• Konsistensi visual brand di Facebook, Slack, Discord, dan Messenger.
• Kontrol pesan sebelum campaign sosmed atau soft launch produk.
• Mengurangi “screenshot acak” yang merusak kesan profesional.

Open Graph ikut berperan saat Anda mengukur branding di sosmed versus website.

Ternyata preview buruk membuat klik ke situs terasa murahan dibanding feed yang rapi.

Bandingkan kerangka evaluasi di branding sosmed vs website.

Bila perusahaan aktif di iklan Meta, kartu organik yang rapi membantu trust sebelum orang klik landing.

Strategi targeting tetap beda lapisan. Lihat panduan strategi iklan Facebook untuk sisi paid.

Walau begitu, Open Graph tidak menjamin viral. Preview bagus hanya membuka pintu.

Jadi isi halaman yang buruk tetap membuat orang pergi.

Cara Kerja Open Graph Saat URL Dibagikan

Alurnya sederhana. Seseorang menempel URL di aplikasi sosial.

Platform memanggil crawler. Crawler meminta HTML halaman.

Lalu parser mencari meta property="og:…".

Setelah data valid, platform menyimpan cache preview.

Cache itu bisa hidup lama. Jadi Anda ganti gambar hari ini.

Namun preview lama bisa tetap muncul berhari-hari.

Mengingat itu, scrap ulang di debugger Facebook atau LinkedIn.

Tag inti yang paling sering dipakai:

<meta property="og:title" content="Judul halaman perusahaan" />
<meta property="og:description" content="Ringkasan 1–2 kalimat untuk preview." />
<meta property="og:url" content="https://contoh.co.id/halaman/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://contoh.co.id/og/home-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Menurut kami, og:image:width dan og:image:height layak selalu diisi.

Sebab crawler bisa merender preview lebih cepat tanpa menebak dimensi.

URL gambar harus absolut dan HTTPS. Path relatif sering gagal di crawler eksternal.

Bila Anda membangun jasa website company profile atau mengelola compro internal, masukkan Open Graph ke checklist go-live.

Lalu tempatkan bareng favicon dan sertifikat SSL.

Studi kasus Open Graph di company profile Tangerang

Klien manufaktur di Tangerang Selatan minta bantuan setelah soft launch gagal di WhatsApp grup distributor.

Preview menampilkan foto workshop buram dari artikel lama. Judul ambil default “Home”.

CTR tautan turun. Tim sales bilang “link website jelek”.

Kami cek head HTML. Tidak ada og:image.

Plugin SEO hanya mengisi title untuk Google. Lalu kami pasang Open Graph khusus per halaman.

Targetnya beranda, tentang, dan katalog produk.

Sementara gambar 1200 × 630 memakai foto pabrik yang sudah di-crop aman.

Teks judul pendek. Deskripsi fokus satu value proposition.

Setelah scrap ulang cache Facebook, preview diganti dalam satu hari kerja.

Ternyata feedback distributor berubah. Mereka bilang “kelihatan perusahaan sungguhan”.

Batasan: kami tidak menjanjikan lonjakan leads otomatis. Yang berubah adalah kesan pertama.

Jadi closing tetap kerja sales.

Mitos dan Fakta Open Graph serta SEO

Banyak tim menyamakan Open Graph dengan ranking Google. Itu mitos yang mahal.

Index lambat sering punya penyebab lain: sitemap, canonical, atau kualitas konten.

Bukan Open Graph. Urai pola umum di penyebab pos baru lama terindex.

SEO modern boleh dibantu AI untuk riset dan meta draft.

Namun Open Graph tetap butuh QA visual manusia.

Alur kerja SEO+AI kami bahas di cara SEO menggunakan AI.

Opini kami: treat Open Graph sebagai aset brand, bukan plugin SEO ajaib.

Lantaran satu form Yoast sering menyatukan meta sosial dan meta Google, tim lupa bedakan panjang deskripsi.

Deskripsi sosial boleh lebih emosional. Meta description SERP lebih factual.

Apakah Open Graph Wajib, Opsional, atau Urgent?

Pada level HTML, Open Graph opsional. Halaman tetap valid tanpa tag OG.

Namun pada level operasional website perusahaan, Open Graph mendekati wajib.

Apalagi bila URL sering dibagikan ke klien, partner, atau grup internal.

Bila budget terbatas, prioritaskan tiga URL dulu: beranda, halaman jasa utama, dan satu case study.

Baru cascade ke blog.

Justru perbandingan kanal paid Facebook versus Google Ads tidak menggantikan Open Graph.

Masing-masing lapisan berbeda. Baca iklan FB vs Google bila Anda menimbang budget media, bukan meta tag.

Ukuran, Tipe, dan Format File Open Graph

Dokumentasi Meta merekomendasikan gambar minimal 1200 × 630 px untuk tampilan tajam.

Minimum absolut 200 × 200 px.

Sementara preview besar butuh setidaknya sekitar 600 × 315 px.

Rasio target mendekati 1.91:1. Jauh dari rasio itu, feed bisa crop tengah.

Kami lebih sering memakai JPG untuk foto. PNG dipakai bila logo tajam dan background flat.

WhatsApp sering kompres agresif. File sumber di bawah ~300 KB lebih tahan.

Meta masih mengizinkan file sampai 8 MB, tapi file gemuk tidak membantu.

Jadi jangan andalkan screenshot penuh halaman 4K.

Crop fokus: produk, gedung, atau hero yang bersih.

Cara Membuat Open Graph di WordPress

Di WordPress, jalur paling cepat: plugin SEO seperti Yoast SEO atau Rank Math.

1. Buka editor halaman atau pos.
2. Buka panel sosial / Facebook di plugin SEO.
3. Isi judul sosial, deskripsi sosial, dan unggah gambar 1200 × 630.
4. Simpan, lalu uji URL di Facebook Sharing Debugger.

Bila Anda tidak memakai plugin, tambahkan meta di theme via wp_head.

Hati-hati duplikat tag bila plugin sudah aktif.

<?php
add_action( 'wp_head', function () {
  if ( ! is_singular() ) {
    return;
  }
  $title = get_the_title();
  $desc  = wp_strip_all_tags( get_the_excerpt() );
  $img   = get_the_post_thumbnail_url( null, 'full' );
  echo '<meta property="og:title" content="' . esc_attr( $title ) . '" />';
  echo '<meta property="og:description" content="' . esc_attr( $desc ) . '" />';
  if ( $img ) {
    echo '<meta property="og:image" content="' . esc_url( $img ) . '" />';
  }
} );

Featured image WordPress sering rasio 16:9 atau 1:1.

Jangan paksa featured sebagai OG tanpa crop ulang.

Setelah update gambar, klik “Scrape Again” di debugger Meta.

Sebab cache lama sering menipu tim marketing.

Cara Membuat Open Graph di Laravel

Di Laravel, Open Graph sering ditulis di Blade layout.

Data dikirim dari controller atau view composer.

<!-- resources/views/layouts/app.blade.php -->
<meta property="og:title" content="{{ $ogTitle ?? config('app.name') }}" />
<meta property="og:description" content="{{ $ogDescription ?? '' }}" />
<meta property="og:url" content="{{ url()->current() }}" />
<meta property="og:type" content="{{ $ogType ?? 'website' }}" />
<meta property="og:image" content="{{ $ogImage }}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Simpan aset OG di storage/app/public/og/ atau CDN.

Jangan andalkan path lokal yang tidak publik.

Untuk multi-page company profile, buat field CMS sederhana: og_title, og_description, og_image.

Lalu editor marketing bisa ubah tanpa deploy ulang tiap teks.

Meski, jangan biarkan field kosong tanpa fallback.

Fallback ke nama perusahaan plus logo resmi lebih aman daripada preview kosong.

Cara Membuat Open Graph di Next.js

Next.js App Router menyediakan Metadata API.

Pun file opengraph-image.tsx atau objek metadata di layout.tsx / page.tsx cukup praktis.

// app/page.tsx (contoh Metadata API)
export const metadata = {
  title: 'PT Contoh | Company Profile',
  description: 'Profil perusahaan manufaktur di Indonesia.',
  openGraph: {
    title: 'PT Contoh | Company Profile',
    description: 'Profil perusahaan manufaktur di Indonesia.',
    url: 'https://contoh.co.id',
    siteName: 'PT Contoh',
    images: [
      {
        url: 'https://contoh.co.id/og/home-1200x630.jpg',
        width: 1200,
        height: 630,
        alt: 'Preview company profile PT Contoh',
      },
    ],
    locale: 'id_ID',
    type: 'website',
  },
};

Bila halaman dinamis dari CMS, generate metadata di generateMetadata().

Ambil field OG dari API, lalu map ke objek openGraph.

Static export atau edge cache bisa menyimpan HTML lama.

Setelah ganti gambar, purge CDN dan uji ulang debugger.

Stack lain (Nuxt, plain HTML, Shopify) mengikuti pola sama.

Isi meta di head. Pakai URL gambar absolut. Uji crawler.

Checklist QA Open Graph Sebelum Go-Live

Sebelum tim marketing menyebar link, jalankan checklist singkat:

• Semua URL utama punya og:title, og:description, og:image, og:url.
• Gambar 1200 × 630, HTTPS, dan bisa diakses tanpa login.
• Tidak ada duplikat meta dari plugin plus theme.
• Preview diuji di Facebook Debugger dan LinkedIn Post Inspector.
• Teks di gambar tidak terpotong setelah crop platform.

Di proyek HardaWebPro, checklist ini masuk bareng SSL, redirect www, dan form kontak.

Soft launch tanpa QA preview hampir selalu menghasilkan “kenapa gambarnya aneh?”.

Freelance web developer HardaWebPro sering menemukan Open Graph hilang setelah migrasi tema.

Plugin SEO aktif, tapi social preview kosong karena field sosial tidak diisi.

Bila bisnis Anda baru menimbang channel sosmed berbayar, Open Graph tetap berguna sebelum iklan jalan.

Lihat dulu apakah model bisnis cocok di bisnis yang cocok pasang iklan di medsos.

Akhirnya, Open Graph adalah kontrol kecil dengan dampak reputasi besar.

Set sekali dengan benar. Lalu rawat tiap halaman penting saat campaign baru muncul.