Open Graph Generator – Cara Membuat Preview Link Website Jadi Lebih Menarik

Saat membagikan link blog atau website ke Facebook, WhatsApp, Telegram, Discord, atau media sosial lainnya, pernah melihat ada website yang otomatis menampilkan gambar thumbnail, judul, dan deskripsi menarik? Nah, fitur tersebut berasal dari teknologi bernama Open Graph atau biasa disebut OG Tag.

Contoh Preview Open Graph

bloggertool-html.blogspot.com

bloggerTool

Deskripsi website akan tampil di sini.

Pada kesempatan ini, saya coba membuat artikel yang menjelaskan cara kerja open graph dan sekaligus menyediakan Tool Open Grap Generator beserta kode scriptnya, untuk anda yang mau memasang Tool ini di blog atau websitenya sendiri

Bagi pemilik blog, landing page, toko online, maupun website pribadi, Open Graph sangat penting untuk meningkatkan tampilan link saat dibagikan. Dengan menggunakan Open Graph Generator, Anda dapat membuat meta tag OG secara otomatis tanpa perlu mengetik kode manual satu per satu.

Apa Itu Open Graph?

Open Graph adalah kumpulan meta tag HTML yang digunakan untuk memberi informasi kepada media sosial tentang isi sebuah halaman website. Teknologi ini pertama kali diperkenalkan oleh Facebook agar link yang dibagikan bisa tampil lebih rapi dan profesional.

Dengan adanya OG Tag, platform sosial media dapat mengetahui:

Judul halaman website
Deskripsi singkat konten
Thumbnail atau gambar preview
URL halaman
Jenis konten website

Fungsi Open Graph Pada Website

Open Graph bukan hanya sekadar mempercantik tampilan link. Teknologi ini memiliki banyak manfaat penting untuk website modern, terutama bagi blogger dan digital marketer.

1. Membuat Link Lebih Profesional

Tanpa Open Graph, link yang dibagikan biasanya hanya tampil berupa URL biasa saja seperti https://safelink-aza.blogspot.com. Namun dengan OG Tag, link akan berubah menjadi kartu preview lengkap dengan gambar dan deskripsi menarik seperti terlihat pada screenshot di bawah.

2. Meningkatkan CTR

Dengan adanya preview yang menarik saat di share ke media sosial, itu dapat meningkatkan kemungkinan orang mengklik link Anda. Thumbnail yang bagus dan judul yang jelas mampu menarik perhatian pengguna media sosial.

3. Membantu Branding Website

Nama website dan gambar yang konsisten akan membuat brand lebih mudah dikenali. Ini sangat berguna untuk blog, web maupun aplikasi toko online.

4. Mendukung SEO Modern

Walaupun Open Graph bukan faktor utama ranking Google, namun tampilan link yang baik dapat meningkatkan interaksi pengguna. Hal tersebut dapat membantu performa website secara keseluruhan dan bisa menjadikan traffik untuk tayangan blog kita.

Meta Tag Open Graph Yang Palung Penting

Berikut beberapa meta tag OG yang paling sering digunakan:

og:title → Judul halaman
og:description → Deskripsi website
og:image → Thumbnail preview
og:url → URL halaman
og:type → Jenis konten
og:site_name → Nama website

Cara Menggunakan Open Graph Generator

Menggunakan tool Open Graph Generator sangat mudah dan cocok untuk pemula sekalipun. Anda hanya perlu mengisi beberapa kolom seperti:

Judul website
Deskripsi halaman
URL website/bloh
Link gambar thumbnail
Nama website/blog
Tipe konten

Setelah semua data diisi, generator akan otomatis membuat kode meta tag Open Graph siap pakai. Anda tinggal copy dan lalu tinggal pasang di bagian <head> template Blogger atau website anda, awas jangan di tempel di baju atau celana ya, ga akan garuh itu bukan sablonan 😁😁.

Contoh Hasil Open Graph

<meta property="og:title" content="Judul Website">
<meta property="og:description" content="Deskripsi website">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">

Tips Agar Preview Open Graph Lebih Menarik

Gunakan gambar thumbnail ukuran besar dan jernih
Buat judul singkat namun menarik
Gunakan deskripsi yang jelas
Pastikan URL gambar dapat diakses publik
Gunakan warna dan desain thumbnail yang profesional

Gunakan Open Graph Generator

Kunjungi halaman bloggerTool, yaitu blog saya yang sebagian besar menyediakan Tool Tool Online gratis untuk kebutuhan coding HTML, CSS, JAVASCRIPT, dan untuk membantu menyusun kode secara cepat dalam pengembangan web

Dan jika anda mau memasang Tool ini di blog atau website sendiri, berikut saya sertakan Kode Script Full Open Graph Generator siap Copy Paste

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Script Open Graph Generator </div> <div style="max-width:900px;margin:auto;padding:20px;font-family:Arial,sans-serif"><h2 style="text-align:center">Open Graph Generator</h2> <p style="text-align:center;color:#666">Buat meta tag Open Graph otomatis untuk Blogger, website, landing page, dll.</p><div style="background:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08)"><label>Judul Website</label> <input id="ogTitle" type="text" placeholder="Contoh: Generator Link Premium" style="width:100%;padding:12px;margin:8px 0 15px;border:1px solid #ddd;border-radius:8px"> <label>Deskripsi</label> <textarea id="ogDesc" placeholder="Masukkan deskripsi website" style="width:100%;height:100px;padding:12px;margin:8px 0 15px;border:1px solid #ddd;border-radius:8px"></textarea><label>URL Website</label> <input id="ogUrl" type="text" placeholder="https://example.com" style="width:100%;padding:12px;margin:8px 0 15px;border:1px solid #ddd;border-radius:8px"> <label>URL Gambar Thumbnail</label> <input id="ogImage" type="text" placeholder="https://example.com/image.jpg" style="width:100%;padding:12px;margin:8px 0 15px;border:1px solid #ddd;border-radius:8px"> <label>Nama Website</label> <input id="ogSite" type="text" placeholder="Nama Blog / Website" style="width:100%;padding:12px;margin:8px 0 15px;border:1px solid #ddd;border-radius:8px"> <label>Tipe</label> <select id="ogType" style="width:100%;padding:12px;margin:8px 0 15px;border:1px solid #ddd;border-radius:8px"> <option value="website">website</option> <option value="article">article</option> <option value="blog">blog</option> <option value="product">product</option> </select><button onclick="generateOG()" style="width:100%;padding:14px;background:#111;color:#fff;border:none;border-radius:10px;font-size:16px;cursor:pointer"> Generate Open Graph </button><button onclick="copyOG()" style="width:100%;padding:14px;background:#28a745;color:#fff;border:none;border-radius:10px;font-size:16px;cursor:pointer;margin-top:10px"> Copy Meta Tag </button></div><div style="margin-top:25px"> <h3>Hasil Meta Tag</h3> <textarea id="result" readonly style="width:100%;height:320px;padding:15px;border:1px solid #ddd;border-radius:10px;background:#f7f7f7"></textarea> </div><div style="margin-top:25px;background:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08)"> <h3>Contoh Preview Open Graph</h3> <div id="previewCard" style="border:1px solid #ddd;border-radius:12px;overflow:hidden;max-width:500px"> <img id="previewImage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP5XACL_zJQBhDksNO34-ezJw3DuLVvJVlsPJ0UlTuuvUBYEaokBX7wYjUZXsYvjiHYurm4IKxEnBKlzzEsrDZ50tKqvb8DcnTKlcq646coEMHdp64Qi4OSee47dnjbLcpbQu_YW8WDssS_AjWTJWCJ-dR1iIaB4CYQ5pT0Rl4rgU6iZslaBZuMOc2XGY/s320/Open%20graph%20generator.png" style="width:100%;display:block"> <div style="padding:15px"> <div id="previewSite" style="font-size:13px;color:#777;margin-bottom:5px">bloggertool-html.blogspot.com</div> <div id="previewTitle" style="font-size:20px;font-weight:bold;margin-bottom:8px"><a href="https://bloggertool-html.blogspot.com/2026/05/open-graph-generator.html" target="_blank">bloggerTool</a></div> <div id="previewDesc" style="font-size:14px;color:#555">Deskripsi website akan tampil di sini.</div> </div> </div> </div><div style="margin-top:25px;background:#fff3cd;padding:15px;border-radius:10px;color:#856404"> <b>Fungsi Open Graph:</b><br><br> • Membuat link tampil keren saat dibagikan ke Facebook, WhatsApp, Telegram, Discord, dll.<br> • Menampilkan thumbnail otomatis.<br> • Membantu meningkatkan CTR dan tampilan website lebih profesional. </div></div><script> function generateOG(){ let title=document.getElementById('ogTitle').value; let desc=document.getElementById('ogDesc').value; let url=document.getElementById('ogUrl').value; let image=document.getElementById('ogImage').value; let site=document.getElementById('ogSite').value; let type=document.getElementById('ogType').value; let code=`<meta property="og:title" content="${title}"> <meta property="og:description" content="${desc}"> <meta property="og:url" content="${url}"> <meta property="og:image" content="${image}"> <meta property="og:site_name" content="${site}"> <meta property="og:type" content="${type}"> <meta name="twitter:card" content="summary_large_image">`; document.getElementById('result').value=code; // preview document.getElementById('previewTitle').innerText=title || 'Judul Website'; document.getElementById('previewDesc').innerText=desc || 'Deskripsi website akan tampil di sini.'; document.getElementById('previewSite').innerText=url || 'website.com'; if(image){ document.getElementById('previewImage').src=image; } } function copyOG(){ let text=document.getElementById('result'); text.select(); text.setSelectionRange(0,99999); document.execCommand('copy'); alert('Meta tag berhasil dicopy'); } </script>

Kesimpulan

Open Graph merupakan fitur penting untuk meningkatkan kualitas tampilan link website di media sosial. Dengan menggunakan Open Graph Generator, proses membuat meta tag menjadi jauh lebih cepat, praktis, dan tidak memerlukan kemampuan coding tingkat tinggi.

Bagi blogger, content creator, affiliate marketer, maupun pemilik bisnis online, penggunaan Open Graph dapat membantu meningkatkan klik, branding, dan tampilan profesional website saat dibagikan ke berbagai platform sosial media.

Keuntungan Menggunakan Open Graph Generator:

✅ Membuat preview link lebih menarik
✅ Meningkatkan CTR website
✅ Cocok untuk Blogger dan WordPress
✅ Mudah digunakan tanpa coding rumit
✅ Mendukung berbagai media sosial populer

Penutup

Akhir kata, terimakasih sudah menyimak artikel ini sampai akhir, dan juga terima kasih sudah menggunakan Tool yang di sediakan di blog sederhana ini,. Mohon maaf yang sebesar besarnya, jika masih banyak kekurangan dalam menyajikan artikel terutama kesalahan dalam tulisan serta penjelasan. Saya berharap semua yang saya share di blog ini bisa bermanfat dan membantu dalam dunia blogging anda. Jika ada saran atau kritik bisa langsung hubungi saya melalui Form Contact Me atau bisa kita diskusikan di kolom komentar postingan ini.

Pertanyaan Umum (FAQ)

Apa Keuntungan Menggunakan Open Graph?

Membuat preview link lebih menarik dan juga dapat meningkatkan CTR.

Kenapa harus menggunakan open graph generator?

Disampingb cocok untuk Blogger dan WordPress,Tool ini sangat ✅ Mudah digunakan tanpa coding rumit.

Contact Me

Open Graph Generator Online