Apakah tag Open Graph memengaruhi SEO?

Tidak secara langsung — mesin pencari seperti Google tidak menggunakan tag OG untuk peringkat. Namun, mereka memengaruhi tingkat klik pada platform sosial dan aplikasi pesan, yang dapat mengalirkan trafik yang secara tidak langsung menunjukkan relevansi. Bayangkan mereka sebagai optimasi konversi untuk tautan yang dibagikan.

Berapa kali platform melakukan pemindaian kembali tag Open Graph?

Ini bervariasi. Facebook menyimpan data hingga 30 hari. LinkedIn dapat menyimpan data hingga satu minggu atau lebih. Slack mengambil ulang setiap kali link ditempatkan di saluran, sehingga biasanya data terbaru. Selalu gunakan alat pengecekan platform untuk memaksa pengambilan ulang setelah memperbarui tag.

Bisakah saya menggunakan gambar yang berbeda untuk Twitter dibandingkan dengan platform lain?

Ya. Tetapkan og:image untuk Facebook, LinkedIn, Discord, dan Slack. Lalu tetapkan twitter:image secara terpisah untuk Twitter/X. Mereka dapat mengacu pada file yang berbeda — berguna jika Anda ingin potongan persegi untuk Twitter dan ukuran lebar 1200×630 untuk yang lainnya.

Apa yang terjadi jika saya tidak menambahkan tag OG sama sekali?

Platform menggali halaman Anda dan menebak. Ini mungkin mengambil judul halaman dari tag , mengambil paragraf pertama sebagai deskripsi, dan memilih gambar acak dari halaman — sering kali logo, iklan, atau ikon. Hasilnya biasanya salah dan jarang dapat diklik.

Apakah tag Open Graph berfungsi pada aplikasi satu halaman (SPAs)?

Hanya jika tag OG ada dalam HTML yang di-render oleh server. Platform tidak menjalankan JavaScript saat melakukan pemindahan data — mereka membaca respons HTML murni. Jika aplikasi SPA hanya menghasilkan konten di sisi klien, tag OG pada konten tersebut tidak akan terlihat. Gunakan rendering di sisi server (SSR) atau generasi statis untuk memastikan tag tersebut ada dalam payload HTML awal.

Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Tag Open Graph — Hentikan Tautan Anda Terlihat Buruk di Slack

Diterbitkan pada 23 Mei 2026

Tag Open Graph mengendalikan gambar, judul, dan deskripsi yang ditampilkan saat Anda berbagi tautan di Slack, LinkedIn, Twitter, dan Discord. Pelajari 6 tag esensial, cara mengatur ukuran og:image secara tepat, dan cara menguji bahwa pratinjau Anda benar-benar berfungsi.

Tag Open Graph — Hentikan Tautan Anda Tampak Buruk di Slack 1

IKLAN · HAPUS?

Anda melekatkan URL ke dalam Slack. Sebagai ganti tampilan kaya dengan gambar besar, judul, dan ringkasan dua baris, Anda hanya mendapatkan tautan murni — atau kalimat acak yang diambil dari tengah halaman. Rekan-rekan Anda tetap mengkliknya, tetapi mereka tidak tahu apa yang akan mereka lihat.

Tag Open Graph memperbaikinya. Mereka adalah sejumlah <meta> baris di halaman Anda yang <head> mengatakan kepada Slack, LinkedIn, Twitter, Discord, dan setiap platform lainnya secara tepat apa yang harus ditampilkan ketika seseorang membagikan URL Anda. Jika Anda mengabaikannya, platform akan menebak — dengan buruk.

Apa Itu Tag Open Graph?

Open Graph (OG) adalah protokol yang diperkenalkan Facebook pada tahun 2010 agar halaman web dapat mengontrol tampilan saat dibagikan di platform tersebut. Ide-nya sederhana: tambahkan metadata terstruktur ke HTML <head> dan platform dapat mengambil judul, deskripsi, dan gambar yang tepat daripada menebak.

Ini bekerja sangat baik sehingga semua platform utama mengadopsinya. Hari ini, Slack, LinkedIn, Twitter/X, Discord, iMessage, WhatsApp, dan Telegram semua membaca tag OG saat menghasilkan tampilan tautan. Facebook tetap menggunakan tag ini juga.

6 Tag Open Graph Penting

Enam tag ini harus ada di setiap halaman yang ingin dibagikan. Jika Anda melewatkan salah satunya, platform akan mengisi bagian kosong itu sendiri — biasanya dengan salah.

<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="One or two sentences that explain what this page is about." />
<meta property="og:image" content="https://yoursite.com/images/og-image.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />

og:title — Judul yang ditampilkan di tampilan pra-tampilan. Jaga agar tidak melebihi 70 karakter. Jangan hanya menyalin tag Anda — judul OG bisa lebih menarik karena tidak perlu mencantumkan nama situs. <title> og:description
— Ringkasan dua baris di bawah judul. 150–200 karakter adalah kisaran yang ideal. Buatnya berguna, bukan kabur. og:image
— Gambar yang ditampilkan di kartu pra-tampilan. Ini adalah tag yang membuat atau menghancurkan tampilan tautan Anda. Lebih lanjut tentang ukuran di bawah ini. og:url
— URL resmi untuk halaman ini. Gunakan URL lengkap termasuk . Ini mencegah tampilan duplikat ketika konten yang sama dihubungkan dari URL berbeda. https://og:type
— Gunakan untuk kebanyakan halaman. Gunakan website untuk artikel blog, disertai dengan article og:site_name article:published_time dan article:author.
— Nama merek Anda. Beberapa platform menampilkan ini secara terpisah dari judul, jadi tetapkan nama yang singkat. Tag Kartu Twitter/X

Twitter memiliki sistem sendiri yang disebut Twitter Cards. Berita baiknya: jika tag Twitter Card hilang, sistem akan jatuh kembali ke tag OG. Berita buruknya: fallback ini tidak sempurna, dan Twitter tidak akan menampilkan kartu gambar besar kecuali Anda secara eksplisit memilihnya.

Tambahkan tag-tag ini bersama tag OG Anda:

Tag penting adalah

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="One or two sentences about this page." />
<meta name="twitter:image" content="https://yoursite.com/images/og-image.jpg" />

. Tetapkan ke twitter:carddan Anda mendapatkan kartu besar. Tetapkan ke summary_large_image dan Anda mendapatkan thumbnail kecil. Tanpa tag ini, Twitter akan menggunakan default summary dan gambar OG yang Anda buat secara hati-hati akan hilang. summary og:image — Tag yang Menanggung Beban

Jika ada satu tag yang harus benar, itu adalah

. Tampilan pra-tautan yang kosong mungkin tetap diklik. Tampilan dengan gambar yang kabur, diperbesar, atau hilang tidak akan. og:imageUkuran yang direkomendasikan

1200 × 630 piksel

— standar universal yang bekerja di Facebook, LinkedIn, Twitter, dan Slack Minimal: 600 × 315 piksel
— jika lebih kecil, beberapa platform akan melewatkan gambar sepenuhnya Ukuran file: di bawah 8 MB
— Facebook dan kebanyakan platform menolak file yang lebih besar Format: JPG atau PNG
— gunakan JPG untuk foto, PNG untuk grafik dengan teks Jauhkan konten penting dari tepi

Platform berbeda memotong gambar OG secara berbeda. Slack menampilkan kartu lebar, LinkedIn memotong menjadi persegi di beberapa konteks, dan aplikasi mobile melakukan hal mereka sendiri. Jaga logo, teks, dan fokus Anda di zona aman yang terpusat — sekitar 80% dari dalam gambar — untuk menghindari hal penting yang terpotong.

Cara Menambahkan Tag Open Graph ke Situs Anda

Situs HTML sederhana

Tempelkan tag-tag ini di dalam

dari HTML Anda, sebelum penutup tag <head> : </head> Jika Anda menjalankan WordPress, Anda tidak perlu mengubah kode. Plugin seperti Yoast SEO, Rank Math, atau All in One SEO mengelola tag OG secara otomatis. Setelah diinstal, cari bagian "Sosial" di editor postingan/halaman — Anda dapat menetapkan judul, deskripsi, dan gambar OG khusus untuk setiap konten secara terpisah dari judul SEO dan deskripsi meta.

<head>
  <!-- your existing tags -->
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Page description." />
  <meta property="og:image" content="https://yoursite.com/og.jpg" />
  <meta property="og:url" content="https://yoursite.com/page/" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Site Name" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

WordPress

Aplikasi Next.js dan React

Di Next.js App Router, gunakan ekspor bawaan

dalam metadata Bagaimana Menguji Tag Open Graph Anda page.tsx:

export const metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Page description.',
    images: ['https://yoursite.com/og.jpg'],
    url: 'https://yoursite.com/page/',
    type: 'website',
    siteName: 'Site Name',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Page Title',
    description: 'Page description.',
    images: ['https://yoursite.com/og.jpg'],
  },
};

Jangan asumsikan tag Anda bekerja — platform menyimpan tampilan secara agresif dan versi yang disimpan mungkin sudah berusia beberapa hari. Gunakan alat-alat berikut untuk memeriksa dan memaksa pembaruan:

Pengaturan Berbagi Facebook

— menampilkan tepat apa yang dibaca Facebook dan memungkinkan Anda menghapus cache dan mengulang pemindaian Pemeriksaan Postingan LinkedIn
— LinkedIn menyimpan data secara ketat, jadi ini adalah satu-satunya cara yang dapat memaksa pembaruan Pengujian Kartu Twitter
— melihat bagaimana kartu Anda akan terlihat di Twitter/X — memeriksa tag OG dari URL apa pun langsung dari browser tanpa harus login ke platform
Pemeriksa Open Graph di IO Tools berguna untuk audit cepat — tempelkan URL apa pun dan alat ini akan mengambil semua tag OG dan kartu Twitter dalam satu tampilan, sehingga Anda bisa melihat tag yang hilang tanpa harus beralih antara pengaturan platform tertentu.

Itu Pemeriksa Open Graph Jika Anda perlu menghasilkan tag OG bersih dan terformat dari awal, maka

menghasilkan markup yang tepat untuk setiap halaman. Generator Tag Meta HTML 5 Kesalahan Umum Open Graph

Menggunakan URL gambar relatif

harus merupakan URL absolut ( — og:image ). Jalur relatif sepertihttps://yoursite.com/image.jpgakan gagal diam-diam dan gambar tidak akan dimuat. /images/og.jpg Satu gambar OG untuk seluruh situs
— Gambar fallback tunggal bekerja untuk halaman utama, tetapi artikel blog, halaman produk, dan halaman landing masing-masing layak memiliki gambar mereka sendiri. Gambar umum untuk seluruh situs menghancurkan makna konteks yang membuat tampilan tautan menarik. Lupa
— Tanpa itu, Twitter akan menggunakan thumbnail kecil bahkan jika Anda memiliki gambar OG sempurna berukuran 1200×630. Selalu tambahkan tag ini secara eksplisit. twitter:card Menerbitkan perubahan tanpa memperbarui cache
— Platform menyimpan data OG secara agresif. Setelah memperbarui tag, gunakan pengaturan platform untuk memaksa pemindaian ulang, atau tampilan lama akan tetap muncul selama beberapa hari. Menulis deskripsi og:description yang terdengar seperti judul
— Gunakan bidang deskripsi untuk menambahkan informasi yang tidak terdapat dalam judul: apa yang akan dipelajari pembaca, siapa yang ditujukan, dan masalah apa yang dipecahkan. Tag Open Graph — Hentikan Tautan Anda Tampak Buruk di Slack 2