Generator Meta Tag & Open Graph

Tag yang penting untuk SEO

<title>

Sinyal on-page paling penting dan judul yang bisa diklik di hasil pencarian. Letakkan topik utama di depan, buat unik untuk setiap halaman, dan akhiri dengan nama merek. Google menulis ulang judul yang dianggap tidak membantu, terlalu panjang, atau dijejali kata kunci.

meta description

Bukan faktor peringkat, tetapi sering dipakai sebagai cuplikan di bawah judul sehingga memengaruhi klik. Ringkas halaman dalam 120–160 karakter dengan alasan untuk berkunjung.

canonical

<link rel="canonical"> menentukan URL yang diutamakan ketika konten yang sama bisa diakses dari beberapa alamat (parameter pelacakan, http dan https, garis miring di akhir).

robots

noindex menjauhkan halaman dari hasil pencarian, nofollow meminta crawler tidak mengikuti link-nya. Index, follow adalah default, jadi tag ini hanya ditulis jika Anda mengubahnya.

viewport & charset

Sebenarnya bukan tag SEO, tetapi setiap halaman membutuhkannya: UTF-8 dan viewport responsif adalah syarat untuk mobile-first indexing.

keywords

Diabaikan Google dan Bing untuk peringkat selama lebih dari satu dekade. Sertakan hanya jika pencarian internal atau sistem lain membacanya.

Open Graph: tampilan link saat dibagikan

Open Graph adalah protokol yang diperkenalkan Facebook dan kini dibaca hampir semua platform: LinkedIn, Slack, Discord, WhatsApp, Telegram, iMessage, Pinterest, dan banyak lagi. Tag utamanya adalah og:title, og:description, og:image, og:url, dan og:type; og:site_name dan og:locale menyempurnakan kartunya.

Gambar menentukan berhasil tidaknya kartu. Gunakan URL https:// absolut, 1200 × 630 piksel (rasio 1,91:1), di bawah 5 MB, dalam format JPEG, PNG, atau WebP, dan jauhkan teks serta logo dari tepi karena tiap platform memotong dengan cara berbeda. Platform menyimpan cache kartu: setelah mengubah tag, segarkan dengan Sharing Debugger Facebook, Post Inspector LinkedIn, atau dengan membagikan URL yang diberi query string.

Twitter / X Card

X membaca tag twitter:card miliknya sendiri untuk memilih tata letak — summary_large_image untuk gambar selebar penuh, summary untuk thumbnail persegi kecil — serta twitter:site dan twitter:creator untuk handle situs dan penulis. Untuk judul, deskripsi, dan gambar, X memakai tag Open Graph sebagai cadangan, jadi generator hanya menulis twitter:title, twitter:description, dan twitter:image saat Open Graph dimatikan, agar markup tidak duplikat.

Saat ini X menampilkan kartu gambar besar berupa gambar dengan judul di atasnya dan domain di bawahnya; deskripsi hanya muncul pada kartu summary di beberapa klien.

Panjang judul: karakter versus piksel

Google memotong judul berdasarkan lebar, bukan jumlah karakter: di desktop batasnya sekitar 600 piksel dalam font mirip Arial 20 piksel, yang muat sekitar 50–60 karakter tergantung hurufnya — "WWW" tiga kali lebih lebar dari "iii". Penghitung mengukur judul dengan font tersebut di browser Anda, sehingga mencerminkan kata-kata Anda yang sebenarnya. Deskripsi dipotong di sekitar 920 piksel, kira-kira 155–160 karakter di desktop dan lebih sedikit di ponsel.

Pemotongan bukan penalti — hanya menyembunyikan akhir teks — tetapi menaruh kata-kata penting di awal memastikan kata itu terlihat. Pastikan judul dan deskripsi sesuai dengan konten yang terlihat; dengan begitu Google lebih mungkin mempertahankannya.

Di mana meletakkan tag

Semua tag ini harus berada di dalam elemen <head> halaman, dan harus ada di HTML yang dikirim server: crawler pratinjau link tidak menjalankan JavaScript, jadi tag yang ditambahkan oleh kode sisi klien tidak terlihat oleh Facebook, LinkedIn, dan X. Di framework seperti Next.js, Nuxt, atau Astro, gunakan API metadata-nya untuk merender tag di server. Setiap nilai atribut di-escape sebagai HTML, sehingga tanda kutip dan ampersand di judul Anda tidak bisa merusak markup.

Padukan dengan robots.txt yang mengizinkan crawler menjangkau halaman Anda, sitemap XML yang mencantumkan URL kanonis Anda, dan favicon agar hasil pencarian menampilkan ikon Anda.