Pernahkah kamu share link artikel di WhatsApp atau Facebook, lalu yang muncul cuma teks link polos tanpa gambar preview, tanpa judul yang jelas, tanpa deskripsi? Itu biasanya karena website-nya belum pasang Open Graph tag dengan benar.
Open Graph adalah protokol yang dikembangkan Facebook β dan sekarang dipakai juga oleh hampir semua platform media sosial β untuk mengontrol bagaimana sebuah halaman ditampilkan saat dibagikan. Dengan tag yang tepat, artikel yang di-share bisa tampil dengan gambar header yang menarik, judul yang sesuai, dan deskripsi singkat yang membuat orang penasaran untuk klik.
Di blog ini, saya implementasikan Open Graph secara manual di PHP. Begini caranya.
Tag Open Graph yang Wajib Ada
Ada empat tag Open Graph yang dianggap wajib:
<meta property="og:title" content="Judul Artikel" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://kawunganten.com/slug-artikel" />
<meta property="og:image" content="https://kawunganten.com/uploads/gambar.jpg" />og:title β judul yang ditampilkan saat di-share. Bisa berbeda dari judul HTML aslinya, tapi biasanya saya samakan saja.
og:type β jenis kontennya. Untuk artikel blog, nilainya article. Untuk halaman depan, bisa pakai website.
og:url β URL canonical halaman ini. Penting supaya semua share link ke halaman yang sama merujuk ke URL yang konsisten.
og:image β ini yang paling berpengaruh secara visual. Gambar yang akan ditampilkan saat artikel di-share. Idealnya ukurannya 1200x630 pixel.
Tag Tambahan yang Saya Rekomendasikan
Selain empat tag wajib, ada beberapa tambahan yang berguna:
<meta property="og:description" content="Deskripsi singkat artikel, sekitar 2-3 kalimat." />
<meta property="og:site_name" content="Kawunganten" />
<meta property="og:locale" content="id_ID" />
<!-- Twitter Card (beda format tapi konsep serupa) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Judul Artikel" />
<meta name="twitter:description" content="Deskripsi singkat." />
<meta name="twitter:image" content="https://kawunganten.com/uploads/gambar.jpg" />Twitter/X punya sistem sendiri yang disebut Twitter Cards, tapi secara konsep mirip dengan Open Graph. Saya tambahkan keduanya supaya artikel tampil bagus di semua platform.
Implementasi Dinamis di PHP
Di blog ini, setiap halaman artikel punya Open Graph tag yang di-generate dinamis berdasarkan data artikel tersebut. Di bagian <head> template PHP:
<?php if (isset($post)): ?>
<meta property="og:title" content="<?= htmlspecialchars($post['title']) ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://kawunganten.com/<?= $post['slug'] ?>" />
<meta property="og:image" content="<?= $post['image_url'] ?>" />
<meta property="og:description" content="<?= htmlspecialchars(substr(strip_tags($post['content']), 0, 160)) ?>" />
<?php else: ?>
<!-- Default untuk halaman non-artikel -->
<meta property="og:title" content="Kawunganten β Blog dari Desa" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://kawunganten.com" />
<meta property="og:image" content="https://kawunganten.com/assets/og-default.jpg" />
<?php endif; ?>Perhatikan bagian deskripsi: saya pakai strip_tags() untuk buang HTML dari konten, lalu ambil 160 karakter pertama. Cara mudah untuk generate deskripsi otomatis tanpa perlu input manual dari setiap artikel.
Cara Test Open Graph
Setelah pasang tag Open Graph, cara tercepat untuk cek hasilnya adalah pakai Facebook Sharing Debugger (cari saja di Google). Tool itu akan fetch halaman kamu dan menampilkan bagaimana artikel akan kelihatan saat di-share di Facebook β termasuk gambar preview, judul, dan deskripsi.
Kalau ada yang salah β misalnya gambar tidak muncul atau judul tidak sesuai β debugger itu juga menampilkan error message yang membantu identifikasi masalahnya.
Satu catatan: setelah kamu ubah tag Open Graph, platform media sosial kadang masih cache versi lama untuk beberapa waktu. Pakai tombol "Scrape Again" di Facebook Debugger untuk paksa mereka ambil versi terbaru.
Dampaknya
Sejak pasang Open Graph tag yang benar, artikel-artikel dari kawunganten.com yang di-share di WhatsApp atau media sosial terlihat jauh lebih menarik. Ada gambar, ada judul, ada deskripsi. Lebih mengundang klik dibanding sekadar teks link polos.
Hal kecil, tapi lumayan berpengaruh ke kesan pertama. Dan implementasinya tidak butuh waktu lama β sekali pasang, selesai.
Sudah pasang Open Graph di blog atau website kamu? Ada hal lain yang kamu tambahkan selain tag standar di atas? Cerita di komentar ya β siapa tahu ada yang belum saya tahu dan bermanfaat untuk ditambahkan juga.
Belum ada komentar. Jadilah yang pertama menulis.
Tulis Komentar