Skip to content

Generator Meta Tag & Open Graph

Buat tag meta Open Graph, Twitter Card & SEO dengan pratinjau langsung Google, Facebook & X. 100% gratis, di browser, tanpa daftar — salin & tempel kodenya.

Tanpa Pelacakan Berjalan di Browser Gratis
Semuanya berjalan di browser Anda. Konten dan URL gambar Anda tidak pernah meninggalkan halaman ini — tanpa unggahan, tanpa daftar.
SEO Dasar
Open Graph (Facebook, LinkedIn…)
X (Twitter) Card
Lanjutan & ikon
Pemeriksaan
    Tag <head> yang dihasilkan 
     
      
     Impor dari <head> yang ada (diurai secara lokal, tidak ada yang diunggah) 
       
     
      
     Verifikasi setelah deploy: Facebook LinkedIn Google Rich Results 
     
     
      
      
       Keluaran tag dan spesifikasi platform diverifikasi terhadap protokol Open Graph (ogp.me), Google Search Central, serta dokumentasi berbagi Facebook, X, LinkedIn, dan Discord terkini. — Go Tools Team · Jul 15, 2026  
          
     
    Apa itu meta tag & Open Graph?
     
     
    Meta tag adalah potongan HTML di dalam <head> halaman Anda yang menjelaskan halaman kepada browser, mesin pencari, dan platform sosial. Tag SEO klasik adalah <title>, meta description, dan tautan canonical. Tag Open Graph (og:title, og:type, og:image, og:url, dan lainnya) adalah sebuah protokol, awalnya dari Facebook, yang mengontrol judul, deskripsi, dan gambar yang ditampilkan saat tautan Anda dibagikan — dan hampir setiap platform membacanya, termasuk LinkedIn, Slack, Discord, WhatsApp, Pinterest, dan Telegram.
    Twitter/X menggunakan tag twitter:card miliknya sendiri tetapi kembali ke tag Open Graph Anda ketika tag tersebut tidak ada, jadi satu set tag OG yang baik ditambah satu nilai twitter:card mencakup setiap jaringan. Generator ini menulis semua tag ini, menambahkan data terstruktur JSON-LD opsional, dan mempratinjau hasilnya secara langsung — sehingga Anda tidak perlu menulisnya dengan tangan atau menebak-nebak bagaimana sebuah pembagian akan terlihat.
     
      
      
     
    Spesifikasi gambar sosial & tag per platform
     
     
     
    Open Graph (Facebook & LinkedIn)
     
    Keduanya membaca og:title, og:description, og:image, dan og:url. Gambar yang direkomendasikan 1200×630 (1.91:1). Facebook menyimpan cache ~30 hari; LinkedIn ~7 hari — scrape ulang dengan debugger mereka setelah deploy.
     
     
    X (Twitter) Card
     
    twitter:card wajib (summary_large_image atau summary). X kembali ke og:* untuk selebihnya. Satu gambar 1200×630 berfungsi untuk OG maupun X; gambar di bawah 300×157 menurunkan kartu besar menjadi kecil.
     
     
    Slack & Discord
     
    Slack membaca Twitter Card lalu Open Graph dan dapat menampilkan dua kolom tambahan melalui twitter:label/data. Discord membaca Open Graph dan secara unik menggunakan theme-color untuk bilah aksen embed-nya.
     
     
    WhatsApp & Telegram
     
    WhatsApp membutuhkan og:title dan og:image dengan metadata di bagian atas HTML; Telegram membaca Open Graph dan hanya merender dengan andal dari gambar JPEG atau PNG.
     
     
    Pinterest Rich Pins
     
    Pinterest membaca Open Graph atau Schema.org. Sebuah Article Rich Pin membutuhkan og:type=article ditambah article:published_time dan article:author — semuanya dihasilkan di sini saat Anda memilih tipe article.
     
     
    Cuplikan pencarian Google
     
    Pratinjau SERP desktop dan seluler secara langsung mengukur judul dan deskripsi Anda dalam piksel — bukan sekadar karakter — sehingga Anda melihat risiko pemotongan sebelum Google melakukannya.
     
     
     
          
     
    Contoh meta tag
     
     
     
    Beranda situs web
     
     
    Title: Acme — Ship faster
Description: The all-in-one platform for modern teams.
URL: https://acme.com
Image: https://acme.com/og/home.png (1200×630)
     
    <title>Acme — Ship faster</title>
<meta name="description" content="The all-in-one platform for modern teams.">
<link rel="canonical" href="https://acme.com">

<meta property="og:title" content="Acme — Ship faster">
<meta property="og:type" content="website">
<meta property="og:image" content="https://acme.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://acme.com">

<meta name="twitter:card" content="summary_large_image">
     
     
    Sebuah beranda hanya membutuhkan empat tag Open Graph wajib ditambah judul, deskripsi, dan canonical. Karena gambarnya 1200×630, nilai width dan height terisi otomatis, sehingga bagikan Facebook pertama langsung tampil alih-alih kosong.
     
     
    Artikel blog (dengan article:* + JSON-LD)
     
     
    og:type: article
Title: The Complete Guide to Open Graph Tags
Author: Ada Lovelace
Published: 2026-07-15
     
    <meta property="og:title" content="The Complete Guide to Open Graph Tags">
<meta property="og:type" content="article">
<meta property="og:image" content="https://blog.example.com/og/guide.png">
<meta property="og:url" content="https://blog.example.com/open-graph-guide">
<meta property="article:published_time" content="2026-07-15T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">

<meta name="twitter:card" content="summary_large_image">

<script type="application/ld+json">{ "@type": "Article", "headline": "The Complete Guide to Open Graph Tags", "datePublished": "2026-07-15T00:00:00Z" }</script>
     
     
    Memilih tipe article membuka properti article:published_time dan article:author serta menghasilkan JSON-LD Article yang sesuai, sehingga mesin pencari dan Pinterest Rich Pins mendapatkan data terstruktur secara gratis.
     
     
    Twitter/X mewarisi Open Graph
     
     
    twitter:card: summary_large_image
Inherit title/description/image from OG: on
     
    <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@acme">
     
     
    X membaca tag Open Graph Anda ketika tag twitter:* yang sesuai tidak ada, jadi Anda hanya perlu twitter:card. Generator tidak pernah mengeluarkan twitter:image kosong, yang justru akan merusak fallback tersebut.
     
     
     
          
     
    Cara menambahkan tag Open Graph ke situs Anda
     
       
    1.  1 
       
      Masukkan judul, deskripsi & URL
       
      Ketik judul halaman, meta description, dan URL canonical Anda. Meteran piksel menunjukkan apakah semuanya muat di cuplikan pencarian Google.
       
       
    2.  2 
       
      Tambahkan og:image dan pilih tipenya
       
      Tempel URL gambar 1200×630 dan pilih website, article, product, atau profile — kolom Open Graph dan JSON-LD yang sesuai muncul otomatis.
       
       
    3.  3 
       
      Periksa pratinjau langsung
       
      Beralih antara tab Google, Facebook, X, LinkedIn, Slack, dan Discord untuk melihat persis bagaimana tautan Anda akan terlihat sebelum diterbitkan.
       
       
    4.  4 
       
      Salin ke dalam  Anda
       
      Salin seluruh blok tag (atau satu bagian) dan tempel di dalam  HTML Anda. Verifikasi setelah deploy dengan debugger Facebook dan LinkedIn.
       
       
      5.  
     
      
     
    Kesalahan Open Graph yang umum
     
     
     
    Path og:image relatif
     
    Path seperti /cover.png berfungsi di editor Anda tetapi kosong saat dibagikan, karena crawler membutuhkan URL absolut.
     
     
     ✗ Salah 
    <meta property="og:image" content="/cover.png">
     
     
     ✓ Benar 
    <meta property="og:image" content="https://example.com/cover.png">
     
     
     
     
    og:url hilang
     
    Tanpa og:url canonical, jumlah pembagian terpecah di berbagai varian URL dan platform mungkin memilih alamat yang salah.
     
     
     ✗ Salah 
    <!-- no og:url -->
     
     
     ✓ Benar 
    <meta property="og:url" content="https://example.com/page">
     
     
     
     
    Gambar terlalu kecil atau rasio salah
     
    Facebook mengabaikan gambar di bawah 200×200 dan memotong apa pun yang jauh dari 1.91:1.
     
     
     ✗ Salah 
    600×600 og:image
     
     
     ✓ Benar 
    1200×630 og:image (1.91:1)
     
     
     
     
    Lupa twitter:card
     
    Bahkan dengan tag Open Graph lengkap, X tidak merender kartu kecuali twitter:card disetel.
     
     
     ✗ Salah 
    <!-- OG only, no twitter:card -->
     
     
     ✓ Benar 
    <meta name="twitter:card" content="summary_large_image">
     
     
     
     
    twitter:image kosong merusak fallback
     
    twitter:image yang kosong menghentikan X kembali ke og:image — hilangkan tag itu alih-alih membiarkannya kosong.
     
     
     ✗ Salah 
    <meta name="twitter:image" content="">
     
     
     ✓ Benar 
    <!-- omit it; X uses og:image -->
     
     
     
     
    Charset diletakkan terlalu akhir
     
    Deklarasi charset harus muncul dalam 1024 byte pertama dokumen atau akan diabaikan.
     
     
     ✗ Salah 
    <meta charset> after many tags
     
     
     ✓ Benar 
    <meta charset="utf-8"> first in <head>
     
     
     
     
     
      
     
    Kasus penggunaan umum
     
     
     
    Meluncurkan halaman arahan
     
    Hasilkan seluruh blok head untuk halaman pemasaran baru agar terlihat rapi saat seseorang membagikan tautannya di X, LinkedIn, atau Slack.
     
     
    Pratinjau blog & artikel
     
    Tambahkan article:published_time, article:author, dan Article JSON-LD agar postingan memenuhi syarat untuk Pinterest Rich Pins dan kartu sosial yang kaya.
     
     
    Memperbaiki pembagian yang rusak
     
    Impor tag Anda saat ini, temukan og:image yang hilang atau dimensi yang salah di panel pemeriksaan, perbaiki, lalu scrape ulang dengan tautan debugger.
     
     
    Cuplikan head framework
     
    Salin set tag yang bersih dan benar untuk dimasukkan ke situs statis, template CMS, atau partial head yang dirender server.
     
     
     
      
     
    Cara kerja generator
     
     
     
    Pratinjau langsung di browser
     
    Setiap kartu dirender dari nilai yang Anda ketik, tidak pernah dengan mengambil URL Anda. Itu membuat pratinjau tetap instan dan privat, dan itulah satu-satunya cara jujur untuk mempratinjau sebelum sebuah halaman di-deploy.
     
     
    Meteran SERP akurat per piksel
     
    Google memotong judul dan deskripsi berdasarkan lebar piksel, bukan jumlah karakter. Sebuah canvas mengukur teks Anda dengan font yang sama sehingga meteran berubah kuning tepat saat cuplikan akan terpotong.
     
     
    Pemeriksaan gambar sisi klien
     
    URL og:image Anda dimuat ke dalam Image di browser Anda untuk membaca lebar dan tinggi aslinya, lalu diperiksa terhadap 1200×630 dan rasio aspek kartu. Gambar lintas-asal tetap melaporkan ukurannya, sehingga pemeriksaan berfungsi tanpa unggahan apa pun.
     
     
    Set tag lengkap dan modern
     
    SEO dasar, Open Graph, Twitter Card, dan JSON-LD dalam satu blok, dengan charset dikeluarkan lebih dulu agar berada dalam 1024 byte pertama. Tag lawas seperti meta keywords dinonaktifkan secara default.
     
     
     
      
     
    Praktik terbaik meta tag
     
     
     
    Gunakan URL HTTPS absolut
     
    og:image dan og:url harus berupa URL https://… lengkap. Path relatif berfungsi secara lokal tetapi tampil kosong saat crawler mengambil halaman langsung.
     
     
    Selalu setel og:image:width & height
     
    Menyatakan dimensi memungkinkan platform menata kartu segera, sehingga bagikan pertama tidak kosong saat mereka mengambil gambar secara asinkron.
     
     
    Jaga canonical dan og:url tetap sama
     
    Arahkan keduanya ke satu URL canonical agar jumlah pembagian dan sinyal pencarian tidak terpecah di berbagai varian URL.
     
     
    Tulis sesuai anggaran piksel
     
    Targetkan judul sekitar 50–60 karakter dan deskripsi sekitar 155 — tetapi percayai meteran piksel, karena Google mengukur lebar, bukan jumlah karakter.
     
     
    Render tag di sisi server
     
    Crawler Facebook, LinkedIn, WhatsApp, Telegram, dan Discord tidak menjalankan JavaScript, jadi tag Open Graph harus ada di HTML statis atau yang dirender server.
     
     
     
      
     
    Pertanyaan yang sering diajukan
     
     
     Apa itu generator meta tag? 
     Generator meta tag membangun tag HTML yang berada di dalam <head> halaman Anda — <title>, meta description, tautan canonical, tag Open Graph untuk Facebook dan LinkedIn, serta tag Twitter/X Card. Alat ini menghasilkan semuanya sekaligus, menampilkan pratinjau langsung tentang bagaimana tautan Anda akan terlihat di Google, Facebook, X, LinkedIn, Slack, dan Discord, serta memungkinkan Anda menyalin kode dengan satu klik. Semuanya berjalan di browser Anda. 
     
     Bagaimana cara menambahkan tag Open Graph ke situs web saya? 
     Isi judul, deskripsi, URL canonical, dan URL og:image, pilih tipe Open Graph, lalu salin tag yang dihasilkan dan tempel di dalam <head> HTML Anda. Karena crawler Facebook, LinkedIn, WhatsApp, dan Telegram tidak menjalankan JavaScript, tag tersebut harus ada di HTML yang dirender server atau statis, bukan disisipkan oleh skrip sisi klien. 
     
     Berapa ukuran yang tepat untuk gambar Open Graph? 
     Ukuran og:image yang direkomendasikan adalah 1200×630 piksel, rasio aspek 1.91:1, yang juga memenuhi kartu summary_large_image milik X. Facebook mengabaikan gambar yang lebih kecil dari 200×200 dan menampilkan kotak kecil untuk apa pun di bawah 600×315. Selalu sertakan og:image:width dan og:image:height agar bagikan pertama langsung tampil, dan sajikan gambar melalui HTTPS di URL publik yang tidak diblokir oleh robots.txt. 
     
     Apakah tag twitter:card wajib? 
     Ya — twitter:card adalah satu-satunya tag Twitter/X yang harus Anda sertakan, jika tidak X tidak akan menampilkan kartu meskipun tag Open Graph Anda sudah ada. Setel ke summary_large_image untuk gambar besar atau summary untuk thumbnail kotak kecil. Untuk selebihnya (judul, deskripsi, gambar) X kembali ke tag og:* Anda, jadi alat ini mengabaikannya secara default agar markup tetap bersih. 
     
     Apakah meta tag membantu SEO? 
     Tag <title> dan canonical penting untuk SEO; meta description bukan faktor peringkat langsung tetapi memengaruhi rasio klik dengan membentuk cuplikan pencarian. Tag Open Graph dan Twitter Card tidak memengaruhi peringkat Google, tetapi mengontrol tampilan tautan Anda saat dibagikan, yang mendorong lalu lintas sosial. Google mungkin menulis ulang judul Anda di hasil pencarian, jadi tulislah judul yang jelas dan unik serta letakkan kata-kata penting di depan. 
     
     Apakah alat ini mengunggah konten atau gambar saya? 
     Tidak. Semuanya dihasilkan secara lokal di browser Anda dengan JavaScript. Judul, deskripsi, dan URL gambar Anda tidak pernah meninggalkan halaman — tidak ada server, tidak ada unggahan, dan tidak ada akun. og:image hanya dimuat di browser Anda sendiri untuk mempratinjaunya dan membaca dimensinya. 
     
     Bisakah saya mengimpor meta tag yang sudah saya miliki? 
     Ya. Buka panel Impor, tempel tag <meta> yang sudah ada, dan alat ini menguraikannya secara lokal dengan parser HTML bawaan browser untuk mengisi formulir — tanpa permintaan jaringan, tanpa unggahan apa pun. Ini adalah alternatif yang mengutamakan privasi dibandingkan alat yang mengambil URL langsung dari server mereka. 
     
     Mengapa pratinjau saya yang diperbarui masih menampilkan gambar lama di Facebook atau LinkedIn? 
     Platform menyimpan cache data Open Graph: Facebook sekitar 30 hari, LinkedIn sekitar 7 hari. Setelah Anda men-deploy, scrape ulang halaman dengan Facebook Sharing Debugger atau LinkedIn Post Inspector untuk menyegarkan judul, deskripsi, dan gambar yang di-cache. Tautan debugger tercantum di bawah kode yang dihasilkan. 
     
     
     
     
       
      
     
     
    Alat Terkait
      Lihat semua alat →
 
     
      
     
      
      
      
     
     
    Generator & Builder Perintah cURL
     
     
    Web & API
     
    Buat perintah curl di browser Anda — atur metode, header, autentikasi, dan body, dapatkan perintah siap salin secara instan. Preset untuk Bearer, POST JSON, unggah file. Gratis, privat, tanpa pendaftaran.
     
     
       
          
     
      
      
      
     
     
    Generator htpasswd — bcrypt, Apache MD5 (apr1) & Basic Auth
     
     
    Web & API
     
    Buat entri htpasswd dengan bcrypt, Apache MD5 (apr1), SHA-1 & lainnya. Dapatkan konfigurasi Apache, nginx & Docker siap pakai. 100% di browser Anda — tanpa upload.
     
     
       
          
     
      
      
      
     
     
    Konverter Basis Bilangan — Biner, Hex, Desimal & Oktal
     
     
    Alat Konversi
     
    Konversi antara biner, hex, desimal, oktal, dan basis apa pun (2-36) secara instan. Presisi BigInt, output siap kode. Gratis, privat — tanpa pendaftaran.
     
     
       
          
     
      
      
      
     
     
    Decode & Encode Base64 Online — Konversi Instan di Browser
     
     
    Encoding & Pemformatan
     
    Decode dan encode Base64 online gratis. Konversi real-time dengan dukungan UTF-8 dan emoji. 100% privat di browser Anda. Tanpa pendaftaran.
     
     
       
          
     
      
      
      
     
     
    Konverter Base64 ke Gambar
     
     
    Encoding & Pemformatan
     
    Decode string Base64 atau data URI kembali menjadi gambar di browser. Pratinjau, baca dimensi & MIME, lalu unduh sebagai PNG, JPG, GIF, SVG. Tanpa upload.
     
     
       
          
     
      
      
      
     
     
    Generator & Verifier Hash Bcrypt
     
     
    Alat Keamanan
     
    Buat dan verifikasi hash kata sandi bcrypt online — biaya yang dapat diatur, prefiks $2b$/$2a$/$2y$. 100% di browser Anda; kata sandi tidak pernah diunggah.