Lompat ke konten
SPCXTools

Generator Meta Tag

Buat tag meta SEO standar, Open Graph, dan Twitter card dengan pratinjau hasil pencarian langsung.

Berjalan secara lokal — file tidak pernah meninggalkan perangkat Anda

Memuat alat…

Cara menggunakan Generator Meta Tag

  1. 1Masukkan judul dan deskripsi halaman Anda. Perhatikan penghitung karakter untuk menghindari pemotongan teks di hasil pencarian.
  2. 2Masukkan URL kanonikal dan URL gambar untuk mengoptimalkan tampilan saat dibagikan ke media sosial.
  3. 3Sesuaikan pengaturan lanjutan seperti nama situs, bahasa (locale), warna tema, dan arahan robots (index/follow).
  4. 4Periksa pratinjau pencarian langsung untuk melihat tampilan halaman Anda di hasil pencarian.
  5. 5Salin kode HTML yang dihasilkan dan tempelkan ke bagian <head> website Anda.

Generator meta tag lengkap untuk website modern

Membuat website membutuhkan lebih dari sekadar konten yang terlihat. Agar halaman Anda tampil optimal di mesin pencari dan media sosial, Anda memerlukan kode HTML tersembunyi yang tepat. Generator meta tag gratis ini membantu Anda membuat tag <head> secara instan sesuai kebutuhan pengembangan web modern.

Saat Anda mengetik, alat ini menghasilkan kode HTML yang bersih dan di-escape dengan benar, mencakup meta tag SEO dasar, properti Open Graph, dan direktif Twitter card. Karena semuanya berjalan secara lokal di browser, draf judul, deskripsi, dan URL Anda tidak akan pernah diunggah ke server. Anda dapat dengan aman menyiapkan tag untuk produk yang belum dirilis atau website klien privat.

Meta tag SEO esensial

Mesin pencari seperti Google mengandalkan tag HTML tertentu untuk memahami halaman Anda dan menampilkannya di hasil pencarian. Memastikan tag ini benar adalah fondasi dari SEO on-page.

Judul dan Deskripsi: Tag <title> dan <meta name="description"> menentukan apa yang dilihat pengguna di halaman hasil mesin pencari (SERP). Jika terlalu panjang, mesin pencari akan memotongnya dengan tanda elipsis. Alat ini dilengkapi Penghitung Karakter bawaan yang akan memperingatkan Anda jika judul melebihi 60 karakter atau deskripsi melebihi 160 karakter, sehingga membantu Anda menulis teks yang ringkas dan mengundang klik.

URL Kanonikal: Tag <link rel="canonical"> memberi tahu mesin pencari versi URL mana yang merupakan salinan "utama". Hal ini mencegah masalah konten duplikat jika halaman Anda dapat diakses melalui beberapa URL (misalnya, dengan atau tanpa parameter pelacakan).

Direktif Robots: Kotak centang "index" dan "follow" menghasilkan tag <meta name="robots">. Secara default, mesin pencari akan mengindeks halaman Anda dan mengikuti tautannya. Jika Anda membuat halaman privat, halaman ucapan terima kasih, atau situs staging, menghapus centang pada kotak ini akan menghasilkan direktif noindex dan nofollow untuk mencegah crawler masuk. Untuk aturan crawler di seluruh situs, Anda juga sebaiknya menggunakan Pembuat Robots.txt.

Generator Open Graph dan Twitter card

Saat seseorang menempelkan link Anda di aplikasi pesan seperti Slack, Discord, atau iMessage, atau membagikannya di media sosial, Anda tentu ingin tampilannya menarik. Link teks biasa mudah diabaikan, tetapi preview dengan gambar besar dan judul tebal akan meningkatkan jumlah klik.

Generator tag og: Protokol Open Graph (og:) adalah standar industri untuk preview link yang menarik. Dengan mengisi kolom Image, Site Name, dan Locale, alat ini berfungsi sebagai generator tag og, menghasilkan properti persis (og:image, og:title, og:description, dll.) yang dibutuhkan oleh Facebook, LinkedIn, dan sebagian besar aplikasi pesan.

Generator Twitter card: Twitter menggunakan markup khususnya sendiri untuk menampilkan link. Alat kami dilengkapi generator Twitter card khusus yang menghasilkan tag twitter:card, twitter:title, twitter:description, dan twitter:image. Anda bisa memilih antara kartu "Summary" standar (gambar persegi kecil di sebelah teks) atau kartu "Summary with Large Image" (gambar lebar penuh di atas teks) melalui menu dropdown.

Mengontrol tampilan dan branding

Selain untuk pencarian dan media sosial, browser seluler modern menggunakan tag meta untuk menyesuaikan antarmuka (UI) browser itu sendiri.

Input Warna Tema menghasilkan tag <meta name="theme-color">. Tag ini memberi tahu browser seluler (seperti Chrome di Android atau Safari di iOS) untuk mengubah warna bilah alamat dan bilah status agar sesuai dengan brand Anda. Cukup gunakan pemilih warna atau tempel kode hex untuk mengintegrasikan warna brand Anda langsung ke antarmuka browser. Padukan dengan ikon kustom dari Favicon Generator kami untuk pengalaman seluler dengan branding yang maksimal.

Tips menulis tag meta yang efektif

  • Utamakan pembaca manusia: Meski kata kunci (keyword) itu penting, judul dan deskripsi Anda pada dasarnya adalah teks iklan. Buatlah semenarik mungkin dan relevan dengan tujuan pencarian pengguna.
  • Gunakan URL absolut: Untuk gambar Open Graph dan Twitter, selalu gunakan URL absolut yang lengkap (misalnya, https://example.com/image.jpg) alih-alih path relatif (/image.jpg). Media sosial tidak dapat memproses path relatif sehingga gambar Anda akan gagal dimuat.
  • Cek pratinjau langsung: Gunakan simulasi pratinjau hasil pencarian untuk melihat kesesuaian judul dan deskripsi Anda. Jika teks tampak terpotong atau aneh, perbaiki sebelum menyalin kode.
  • Gunakan ukuran gambar yang tepat: Untuk Twitter card "Summary with Large Image" dan postingan Open Graph standar, ukuran gambar 1200 × 630 piksel secara umum dianggap sebagai resolusi paling optimal.

Pertanyaan yang sering diajukan

Apa itu meta tag?
Meta tag adalah potongan teks yang mendeskripsikan konten halaman web. Teks ini tidak tampil di halaman, melainkan di dalam kode sumbernya. Mesin pencari menggunakannya untuk memahami isi halaman, sementara jejaring sosial menggunakannya untuk membuat pratinjau tautan (link preview).
Apa itu Open Graph generator?
Open Graph (OG) adalah protokol yang awalnya dibuat oleh Facebook untuk menstandarkan tampilan URL saat dibagikan di media sosial. Open Graph generator membuat meta tag og: yang diperlukan untuk menampilkan pratinjau lengkap (dengan gambar, judul, dan deskripsi) di platform seperti Facebook, LinkedIn, Discord, dan Slack.
Apa perbedaan antara Twitter Card dan Open Graph?
Meskipun Open Graph didukung secara luas di berbagai platform, Twitter menggunakan meta tag twitter: miliknya sendiri untuk membuat "Twitter Card". Namun, jika tag Twitter tidak ada, Twitter biasanya akan menggunakan tag Open Graph. Alat kami menghasilkan keduanya untuk memastikan kompatibilitas maksimal.
Berapa panjang ideal untuk judul dan deskripsi?
Mesin pencari biasanya memotong judul setelah sekitar 60 karakter dan deskripsi setelah sekitar 160 karakter. Alat kami dilengkapi penghitung karakter yang akan berubah menjadi merah jika Anda melebihi batas ini, membantu Anda menulis teks yang ringkas dan efektif.
Apa fungsi kotak centang "index" dan "follow"?
Keduanya mengontrol meta tag robots. "Index" memberi tahu mesin pencari apakah halaman Anda boleh ditampilkan di hasil pencarian. "Follow" memberi tahu apakah mesin pencari harus merayapi tautan di halaman Anda. Menghapus centang akan menghasilkan perintah noindex atau nofollow.
Apakah data saya aman?
Ya. Alat ini berjalan sepenuhnya di browser Anda menggunakan JavaScript. Teks dan URL yang Anda masukkan tidak pernah dikirim ke server, sehingga draf konten Anda dijamin tetap sepenuhnya privat.

Alat terkait

Generator Robots.txtBuat dan unduh file robots.txt kustom untuk mengontrol crawler mesin pencari dan memblokir bot AI.Penghitung KarakterHitung karakter saat Anda mengetik dan lihat langsung apakah teks Anda sesuai dengan batas setiap platform.Pembuat FaviconUbah logo, huruf, atau emoji menjadi paket favicon lengkap beserta kode HTML untuk menggunakannya.Encode & Decode Base64Konversi teks dan file ke Base64 dan sebaliknya, dengan dukungan penuh UTF-8 dan Base64URL.Base64 ke GambarDecode string Base64 dan Data URI menjadi gambar yang dapat dilihat dan diunduh secara instan langsung di browser Anda.Kalkulator ChmodKonversi antara kotak centang, angka oktal seperti 755, dan hak akses simbolik seperti rwxr-xr-x.