Softonic

Penghasil Meta Tag

Langkah 1 / 3
SEO dasar
0/60
0/160
Robot
Berikutnya

Isi formulir dengan judul halaman, deskripsi, URL kanonik, gambar resmi, nama penulis, nama situs, dan nama akun Twitter; generator akan menghasilkan blok tag meta yang siap dicantumkan, mencakup dasar-dasar SEO, Open Graph (untuk Facebook, LinkedIn, Discord, dan Slack), Twitter Card, favicon atau ikon Apple Touch, serta opsional Schema.org JSON-LD untuk artikel atau produk. Sangat praktis saat Anda membangun situs statis secara manual atau menambahkan metadata ke sistem manajemen konten (CMS) yang hanya menyediakan editor mentah <head>.

Cara membuat cuplikan judul

  1. 1

    Masukkan metadata halaman

    Judul, deskripsi, URL kanonik, penulis, nama situs.

  2. 2

    Tambahkan URL gambar sosial

    Digunakan untuk kedua model `og:image` dan `twitter:image`. Resolusi 1200×630 merupakan pilihan yang ideal.

  3. 3

    Pilih opsi

    Jenis kartu Twitter, direktif robot, warna tema, jenis Schema.org.

  4. 4

    Salin hasil keluaran

    Sebuah blok tag HTML `<meta>` yang siap ditempelkan di antara `<head>...</head>`.

Apa yang dihasilkan oleh generator

<!-- Primary Meta -->
<title>Page title, Site name</title>
<meta name="description" content="A 150-character summary of the page content.">
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Page title">
<meta property="og:description" content="Same description or a social-optimized one">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Site name">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@siteaccount">
<meta name="twitter:creator" content="@authoraccount">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

<!-- Icons -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#0b5ed7">

Panduan per bidang

  • Judul: 50–60 karakter. Masukkan kata kunci utama. Letakkan merek di akhir: Page title, Brand.
  • Deskripsi: 140–160 karakter. Baik dibaca secara mandiri. Hindari penggunaan kalimat standar yang diulang-ulang di berbagai halaman.
  • Canonical: URL absolut, termasuk https://; cocok dengan og:url.
  • Gambar OG: ukuran minimal 1200×630 px (rasio yang disarankan oleh Facebook, yaitu 1,91:1); format JPG atau PNG; ukuran tidak lebih dari 8 MB.
  • Kartu Twitter: summary_large_image jika Anda memiliki gambar berkualitas tinggi; summary untuk thumbnail berukuran kecil.
  • Robot: index, follow untuk halaman publik; noindex, nofollow untuk konten tahap persiapan atau konten ringan.

Fitur Tambahan opsional

  • JSON-LD untuk artikel atau produk memungkinkan Google menampilkan hasil pencarian yang lengkap (penulis, tanggal terbit, harga, serta jumlah bintang ulasan).
  • theme-color memberikan warna pada tampilan krom browser di Android Chrome dan iOS Safari.
  • og:locale untuk situs berbahasa ganda (misalnya en_US, es_ES).
  • Tambahan untuk og:type=article: article:published_time, article:author, article:section, article:tag.

Kesalahan umum yang dicegah oleh generator ini

  • Lupa menggunakan tag viewport. Halaman Anda ditampilkan dengan lebar layar desktop di perangkat seluler, pada tingkat pembesaran 0,3.
  • Judul yang berbeda pada <title>, og:title, dan twitter:title; kartu berbaginya menjadi tidak konsisten.
  • URL gambar relatif dalam og:image tidak dapat ditangani oleh Facebook; kartu gagal ditampilkan.
  • og:type tidak tersedia. Nilai default dapat digunakan, namun Facebook lebih memilih menggunakan nilai yang eksplisit.

Pertanyaan yang Sering Diajukan

Secara teknis, Twitter kembali menggunakan Open Graph jika tag buatan Twitter sendiri tidak tersedia; oleh karena itu, meskipun hanya mengatur OG, Twitter tetap akan menampilkan kartu profil. Penambahan tag khusus Twitter memungkinkan Anda menyesuaikan tampilan pengalaman pengguna (misalnya dengan rasio aspek gambar yang berbeda).

1200×630 px (rasio aspek 1,91:1). Facebook dan LinkedIn menampilkan gambar ini dalam ukuran penuh; Twitter memotongnya untuk kartu ringkasan. Jangan letakkan konten penting di tepi, bagian tengah seluas 60% merupakan zona aman.

Tidak perlu; halaman tetap dapat ditampilkan dengan baik tanpa fitur ini. JSON-LD mendukung fitur hasil yang lebih lengkap (kartu resep, panel FAQ berbentuk akordion, daftar produk) ketika jenis kontennya sesuai dengan skema Schema.org. Tambahkan JSON-LD di tempat yang tepat.

Antara <head> dan </head> dalam HTML Anda, sebelum munculnya stylesheet atau skrip eksternal yang dapat menunda proses pengecekan oleh parser.

Tidak. Semua konten dihasilkan secara lokal di peramban Anda.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Generator EditorConfig

Buat file .editorconfig dengan gaya dan ukuran indentasi, akhir baris, charset, dan aturan spasi Anda untuk format yang konsisten di berbagai IDE dan editor.

Validator Email

Validasi alamat email: pemeriksaan sintaks RFC 5322, pengecekan live record MX, serta detail bagian lokal, domain, dan panjang. Tidak ada email yang dikirim.

Pemformat HTML

Format HTML secara lokal di browser dengan inden dua atau empat spasi. HTML tidak diunggah atau divalidasi.

Alat ini tersedia dalam bahasa lain