Bagaimana cara menghasilkan meta tag dan tag Open Graph untuk halaman saya?

Isi Judul halaman, Deskripsi meta, URL halaman, dan URL gambar media sosial. Tag akan terbentuk saat Anda mengetik. Pilih Format keluaran (HTML, Next.js, JSX, atau WordPress), lalu gunakan Salin atau Unduh dan tempel blok tersebut ke dalam head Anda.

Seberapa panjang seharusnya judul dan deskripsi meta saya?

Alat ini menyarankan 30-60 karakter untuk judul dan 70-160 untuk deskripsi. Pratinjau pencarian Google, dengan tampilan Desktop dan Seluler, menunjukkan kapan teks akan terpotong. Lebar adalah perkiraan karena Google memotong berdasarkan piksel.

Mengapa pratinjau tautan saya tidak menampilkan gambar atau menampilkan gambar yang salah?

URL gambar biasanya hilang, menggunakan http://, tidak dapat diakses secara publik, atau platform menyimpan pratinjau lama dalam cache. Alat ini merekomendasikan 1200x630 px, di bawah 5 MB, sebagai tautan https:// absolut, dan memperingatkan jika rasio atau ukurannya tidak sesuai.

Bisakah saya memeriksa meta tag dari halaman yang sudah saya miliki?

Ya. Buka Impor dari HTML yang ada, tempelkan head halaman atau HTML lengkap, lalu klik Isi formulir dari HTML. Bagian Audit kemudian akan mencantumkan masalah. Penguraian berjalan di browser Anda dan tidak menjalankan skrip atau mengambil apa pun.

Apakah generator ini mengirim detail halaman saya ke server?

Tidak. Tag dirangkai di browser Anda dan HTML yang ditempel dibaca dengan DOMParser browser, yang tidak menjalankan skrip atau membuat permintaan jaringan. Hanya pratinjau gambar yang memuat URL gambar yang Anda ketik.

Apakah benar-benar gratis?

Ya. Setiap alat gratis digunakan, tanpa akun dan tanpa kartu kredit. Prosesnya berjalan di perangkat Anda, bukan di server kami, itulah yang membuatnya tetap gratis.

Apakah berfungsi di mobile?

Ya. Berjalan di browser seluler terbaru di iOS dan Android, tanpa perlu memasang apa pun.

🏷️

Generator Meta Tag & Open Graph gratis

Hasilkan meta tag SEO, Open Graph, dan markup Twitter Card dengan pratinjau Google dan share sosial langsung. Salin langsung ke head halaman Anda.

Berjalan di browser AndaTanpa daftar, tanpa pop-upTidak perlu loginGratis selamanya

Berfungsi offline setelah dimuat

Judul halaman0 · 0/580px

URL halaman

Deskripsi meta0 · 0/920px

URL gambar media sosial

Terbaik: 1200×630 px, di bawah 5 MB, tautan https:// absolut.

Nama situs

Handle Twitter/X

Handle penulis Twitter/X

Tipe kartu Twitter

Tipe Open Graph

Sertakan juga

Sertakan tautan kanonik (menggunakan URL halaman)Charset dan viewport selulerPengingat untuk mengatur <html lang> ke idog:locale (bahasa halaman)Tautan faviconWarna tema (bilah browser di ponsel)

Pengindeksan mesin pencari

Judul 0/580px (target 30-60)Deskripsi 0/920px (target 70-160)

Pratinjau pencarian Google

example.com

Judul halaman Anda muncul di sini

Deskripsi meta muncul di sini. Buat menarik untuk meningkatkan rasio klik dari hasil pencarian.

Lebar hanya perkiraan: Google memotong berdasarkan piksel, bukan karakter.

Pratinjau kartu media sosial

Pratinjau og:image

example.com

Judul halaman

Deskripsi halaman

Tempel ke dalam <head>

Isi setidaknya satu bidang di atas untuk menghasilkan tag meta.

Penggunaan umum

Tag Meta untuk Posting BlogBuat judul, deskripsi, dan tag sosial sehingga artikel Anda terlihat bagus saat dibagikan.
Tag Meta untuk Halaman ProdukBuat halaman produk berbagi dengan indah dan terbaca dengan baik di hasil pencarian.
Tag Meta untuk Halaman LandasKontrol dengan tepat bagaimana halaman landas kampanye Anda muncul saat dibagikan dan dicari.
Buat Tag Meta untuk Aplikasi Web Apa PunDengan cepat buat set lengkap tag meta head untuk halaman atau situs baru.
Perbaiki Pratinjau Tautan JelekHentikan tautan Anda ditampilkan sebagai URL polos — tambahkan tag yang membuat kartu pratinjau kaya.

Cara kerja

Semua perangkaian tag dan penguraian head terjadi langsung di browser Anda — tanpa server yang terlibat. Alat ini menggunakan useMemo React untuk membangun string HTML secara reaktif dan DOMParser API native browser untuk membaca markup halaman yang ada untuk fitur impor/audit.

1
Masukan formulir menjalankan perakitan langsung
Saat Anda mengetik, hook useMemo langsung merangkai ulang seluruh blok tag — judul, meta description, properti Open Graph, dan atribut Twitter Card — meng-escape karakter khusus (&, <, >, ") sehingga keluaran aman ditempel langsung ke HTML.
2
Validasi URL via konstruktor URL browser
Setiap bidang URL (URL halaman, gambar sosial) divalidasi menggunakan konstruktor URL bawaan browser. Hanya alamat http:// atau https:// yang berbentuk-baik dengan hostname bertitik yang lolos; nilai tidak valid memblokir tombol salin dan menampilkan error inline.
3
Impor: DOMParser membaca markup head yang ada
Jika Anda menempel HTML <head> yang ada untuk mengauditnya, alat ini menjalankannya melalui DOMParser dalam mode inert — tidak ada skrip yang dijalankan dan tidak ada permintaan jaringan yang dibuat. Ini kemudian mengkueri dokumen yang diurai untuk selektor meta yang dikenal (og:title, twitter:description, tautan canonical, dll.) dan mengisi awal bidang formulir dengan apa pun yang ditemukannya.
4
Pratinjau Google dan kartu sosial langsung
Alat ini merender hasil pencarian Google bergaya dan pratinjau kartu Open Graph secara real time menggunakan state formulir yang sama, sehingga Anda bisa melihat persis bagaimana judul dan deskripsi akan dipotong sebelum Anda menyalin keluarannya.

Alat terkait

📐

Pengubah Ukuran Gambar Media Sosial

Ubah ukuran dan pangkas gambar ke ukuran 2026 yang tepat untuk Instagram, YouTube, TikTok, X, Facebook, LinkedIn dan Pinterest — dengan panduan zona aman dan ZIP batch. 100% di browser Anda, tanpa unggah.

CobaFile tetap lokal

🎼

Penyunting Tag Audio (ID3)

Edit tag ID3 MP3 — judul, artis, album, tahun, genre, dan sampul — 100% di browser Anda. Tanpa unggah, dan audio tidak dikodekan ulang. Gratis dan pribadi.

CobaFile tetap lokal

🔗

Generator Slug

Konversi judul atau teks apa pun menjadi slug yang ramah URL. Sempurna untuk postingan blog, halaman CMS, dan URL yang dioptimalkan SEO.

Coba