Generator Meta Tag
Buat tag meta SEO, Open Graph, dan Twitter Card untuk situs web Anda.
Tentang tag meta
Tag meta menyediakan metadata tentang halaman HTML Anda. Mereka membantu mesin pencari memahami konten Anda, mengontrol bagaimana halaman Anda muncul dalam hasil pencarian, dan menentukan tampilan tautan di media sosial. Set tag meta yang dioptimalkan dengan baik dapat meningkatkan rasio klik-tayang dari pencarian dan berbagi sosial. Pertahankan judul di bawah 60 karakter dan deskripsi di bawah 160 karakter untuk tampilan optimal di hasil pencarian.
Empat keluarga metadata <head>
<head> halaman HTML modern biasanya membawa metadata dalam empat ember, masing-masing melayani audiens yang berbeda:
- Dasar dokumen, yang dibutuhkan setiap browser:
<title>,<meta charset="utf-8">,<meta name="viewport">,<meta name="description">. - Arahan SEO, yang dibaca oleh perayap mesin pencari:
<meta name="robots">,<link rel="canonical">, judul halaman yang berakhir sebagai tautan SERP. - Open Graph, yang dirender Facebook, LinkedIn, Slack, Discord, iMessage, dan sebagian besar klien tautan berbagi lainnya:
og:title,og:description,og:image,og:url,og:type,og:site_name. - Twitter Card, yang dirender X / Twitter untuk tautan yang dibagikan, dengan fallback ke tag OG jika tidak ada:
twitter:card,twitter:title,twitter:image,twitter:site,twitter:creator.
Generator ini menghasilkan keempat keluarga dari satu formulir. Output langsung masuk ke <head> dari file HTML mana pun: tempel, simpan, deploy. Untuk pembahasan mendalam khusus Open Graph, alat khusus Pratinjau Open Graph menampilkan rendering platform langsung.
Judul dan deskripsi: seberapa panjang seharusnya?
Google Search Central sangat jelas tentang jawabannya: tidak ada maksimum yang ketat. Cuplikan hanya dipotong sesuai lebar perangkat. Aturan judul 60 karakter dan deskripsi 160 karakter adalah konvensi industri yang berasal dari pemotongan lebar piksel yang diamati di SERP Google (~580 piksel di desktop). Pesan praktisnya:
- Judul, targetkan 50-60 karakter. Huruf kapital lebar (W, M, A kapital) menghabiskan lebih banyak ruang piksel daripada huruf sempit (i, l, t), sehingga dua judul 60 karakter dapat dirender dengan lebar yang sangat berbeda.
- Deskripsi, 150-160 karakter di desktop, ~120 di seluler. Letakkan informasi kunci di depan agar bertahan dari pemotongan seluler.
- Panjang tidak mempengaruhi peringkat; hanya mempengaruhi seberapa banyak cuplikan Anda yang dilihat pencari sebelum mengklik.
Meta tag robots: apa yang sebenarnya dikendalikan
Tidak seperti tag keywords usang (lihat di bawah), <meta name="robots"> masih hidup dan baik-baik saja; Google secara eksplisit mendukungnya. Nilai umum:
index, follow, default. Halaman dapat muncul dalam pencarian; perayap mengikuti tautannya.noindex, kecualikan halaman ini dari hasil pencarian. Berguna untuk halaman terima kasih, alat internal, arsip berpaginasi, halaman hasil pencarian, dan hal lain yang tidak ingin Anda saingi dengan konten asli Anda.nofollow, jangan ikuti tautan di halaman ini. Jarang menjadi pilihan tepat untuk seluruh halaman; biasanya diterapkan per-tautan melaluirel="nofollow".noindex, nofollow, keduanya. Sikap privasi terkuat untuk halaman yang dapat dijangkau publik.noarchive, jangan tampilkan salinan cache di hasil pencarian.nosnippet, jangan tampilkan cuplikan deskripsi, hanya judul.
Untuk override khusus Google, gunakan <meta name="googlebot"> dengan nilai yang sama. Perhatikan bahwa noindex juga dapat diekspresikan sebagai header HTTP X-Robots-Tag, yang merupakan tempat yang tepat untuk PDF, gambar, dan sumber daya non-HTML lainnya di mana Anda tidak dapat menambahkan meta tag.
Mengapa URL kanonikal penting
<link rel="canonical"> memberi tahu mesin pencari versi halaman mana yang "resmi" ketika beberapa URL menyajikan konten yang sama atau hampir identik. Kasus umum yang membutuhkan kanonikal:
- Garis miring di akhir atau tidak (
/pagevs/page/). - HTTP vs HTTPS (pengalihan lama terkadang membiarkan keduanya dapat diindeks).
- WWW vs apex (
www.example.comvsexample.com). - Parameter pelacakan (
?utm_source=...,?ref=...) menghasilkan URL "berbeda" tak berujung. - Paginasi, urutan sortir, parameter filter yang menghasilkan konten yang sama dalam urutan berbeda.
- Konten sindikasi yang diterbitkan ulang di beberapa situs (kanonikal mengarah ke aslinya).
Tanpa kanonikal, Google memilih satu versi sendiri dan mungkin memilih yang salah. URL kanonikal harus absolut (https:// lengkap) dan harus sesuai persis dengan URL yang ingin Anda indeks.
Tag yang dapat Anda lewati di tahun 2026
<meta name="keywords">, Google telah secara eksplisit menyatakan sejak September 2009 bahwa ia tidak menggunakan meta tag keywords sebagai sinyal peringkat. Bing lebih jauh: ia memperlakukan penjejalan kata kunci berlebihan dalam tag ini sebagai sinyal spam. Memasukkannya tidak merugikan SEO tetapi juga tidak membantu; bidang ini ada di generator ini untuk pengguna yang template korporatnya masih mengharapkannya.<meta http-equiv="refresh">untuk pengalihan, gunakan pengalihan HTTP 301/302 yang tepat dari server. Meta refresh menunda pengalihan dan membingungkan beberapa alat aksesibilitas.<meta http-equiv="X-UA-Compatible">, dibutuhkan hanya untuk kompatibilitas Internet Explorer, yang bukan lagi kekhawatiran.<meta name="revisit-after">, tidak pernah dihormati oleh perayap utama. Kultus kargo murni.<meta name="generator">, hanya informasional; memberi tahu dunia apa yang membangun situs Anda. Terkadang sinyal keamanan yang layak dihapus.
Dua tag yang setiap halaman benar-benar butuhkan
Selain <title> dan <meta name="description">, dua tag tidak dapat dinegosiasikan untuk halaman web modern:
<meta charset="UTF-8">, harus muncul dalam 1024 byte pertama dokumen, idealnya sebagai anak pertama dari<head>. HTML Living Standard mewajibkannya untuk penanganan karakter yang benar. Tanpanya, browser mungkin menebak pengkodean dan salah, terutama pada skrip non-Latin.<meta name="viewport" content="width=device-width, initial-scale=1">, memberi tahu browser seluler untuk merender halaman pada lebar sebenarnya perangkat alih-alih memperkecil dari tata letak desktop fiktif 980 piksel. Tanpanya, setiap pengguna seluler melihat versi halaman Anda yang kecil dan diperkecil yang hampir tidak dapat digunakan.
Open Graph dan Twitter Cards secara singkat
Ringkasan singkat; untuk pembahasan mendalam gunakan alat Pratinjau Open Graph. Empat tag OG yang diperlukan per ogp.me: og:title, og:type, og:image, og:url. Opsional tetapi direkomendasikan: og:description, og:site_name. Dimensi gambar: 1200×630 (1,91:1) adalah ukuran lintas-platform yang paling aman.
Untuk X / Twitter: sertakan twitter:card = summary_large_image (kartu lebar penuh modern) dan X kembali ke tag OG untuk semua yang lain jika tag khusus Twitter tidak ada. Pratinjau Twitter Card Validator mandiri dihapus oleh X pada 2 Agustus 2022; verifikasi dengan menempelkan URL ke Tweet Composer sebagai gantinya.
Data terstruktur adalah pekerjaan yang berbeda
Data terstruktur JSON-LD (menggunakan kosakata schema.org) adalah yang menggerakkan hasil Google yang kaya: kartu resep, info produk dengan peringkat bintang, cuplikan FAQ dalam pencarian, jejak breadcrumb. Berbeda dari meta tag dan tinggal di blok <script type="application/ld+json">, bukan tag <meta>. Keduanya direkomendasikan; satu tidak menggantikan yang lain. Meta tag mengontrol judul / deskripsi / kartu berbagi dasar; data terstruktur membuka format yang lebih kaya.
Kesalahan umum
- Memasukkan
meta keywordsdan mengharapkan manfaat SEO. Google mengumumkan pada 2009 bahwa ia tidak menggunakannya. Lebih dari dua puluh tahun kemudian masih ada di template lama; hapus atau abaikan. - Melupakan
<link rel="canonical">. Jika URL Anda memiliki parameter pelacakan atau versi alternatif, Google memilih satu sendiri. Tanpa kanonikal, versi yang dipilih mungkin bukan yang memiliki semua tautan masuk Anda. - Judul berbeda di
<title>,og:title, dantwitter:title. Tidak secara teknis salah, tetapi tidak konsisten. Default yang bersih adalah satu judul yang dibagi di ketiganya. - Logo situs generik sebagai
og:imagedi setiap halaman. Setiap halaman pantas mendapatkan gambar unik yang terkait dengan kontennya; menggunakan satu logo di seluruh situs menghasilkan pratinjau berbagi yang membosankan. - Meta
viewporthilang pada halaman yang ditargetkan untuk seluler. Browser seluler merender halaman pada lebar desktop fiktif dan memperkecil. Pengalaman pengguna sangat buruk. - Menggunakan
<meta http-equiv="refresh">untuk pengalihan. HTTP 301/302 dari server adalah cara yang benar; meta refresh lebih lambat dan tidak ramah aksesibilitas, dan banyak perayap menanganinya secara tidak konsisten untuk tujuan peringkat. - Judul lebih panjang dari ~580 piksel (~60 karakter lebar). Dipotong oleh Google dengan elipsis; bagian yang dipotong tidak terlihat oleh pencari.
- Lupa bahwa aplikasi satu halaman membutuhkan meta tag yang dirender server atau pra-dirender. Banyak perayap media sosial (Facebook, LinkedIn, Slack, Discord) tidak menjalankan JavaScript. Tag yang ditulis oleh JS sisi klien tidak akan terlihat oleh mereka.
Pertanyaan yang sering diajukan
Apakah meta tag keywords masih membantu SEO?
Tidak. Matt Cutts dari Google mengumumkan pada September 2009 bahwa <meta name="keywords"> tidak digunakan sebagai sinyal peringkat. Bing memperlakukan penjejalan kata kunci berlebihan dalam tag ini sebagai sinyal spam. Bidang ini disertakan dalam generator ini untuk kompatibilitas dengan template lama dan alur kerja CMS yang masih mengharapkannya; aman untuk dibiarkan kosong.
Apa perbedaan antara meta description dan OG description?
HTML <meta name="description"> adalah yang digunakan mesin pencari sebagai cuplikan di bawah judul halaman Anda dalam hasil. Open Graph og:description adalah yang ditampilkan kartu berbagi media sosial. Mereka bisa sama (dan biasanya sama) tetapi Anda dapat menulis versi yang berbeda jika audiens pencarian Anda dan audiens sosial Anda mengharapkan pembingkaian yang berbeda.
JavaScript saya menulis meta tag setelah halaman dimuat. Apakah itu baik-baik saja?
Untuk perayap utama Google (Googlebot), ya; Googlebot merender JavaScript dan melihat meta tag pasca-render. Untuk perayap media sosial (Facebook, LinkedIn, Slack, Discord, WhatsApp), umumnya tidak; sebagian besar tidak menjalankan JavaScript dan hanya melihat HTML awal. Jika situs Anda adalah aplikasi satu halaman, Anda membutuhkan rendering sisi server, pra-rendering, atau layanan seperti Prerender.io untuk memastikan perayap media sosial melihat meta tag yang tepat.
Tepatnya di mana tag-tag ini berada?
Di dalam <head> HTML Anda, idealnya dekat bagian atas. <meta charset> harus berada dalam 1024 byte pertama. <meta name="viewport"> segera setelahnya. Kemudian <title>, <meta name="description">, robots, canonical, tag OG, tag Twitter. Urutan dalam <head> tidak penting untuk SEO setelah charset dan viewport berada cukup awal.
Haruskah saya khawatir tentang tag meta refresh untuk keamanan?
Itu bukan risiko keamanan per se, tetapi pola yang buruk. Pengalihan HTTP 301/302 sisi server lebih cepat, menangani header rujukan dengan benar, dan lebih ramah aksesibilitas. Gunakan meta refresh hanya ketika Anda tidak memiliki kontrol sisi server atas pengalihan (host gaya GitHub Pages statis tanpa konfigurasi pengalihan).
Apakah meta tag saya diunggah ke server?
Tidak. Generator berjalan sepenuhnya di browser Anda. Bidang judul, deskripsi, URL, dan gambar Anda tetap di mesin Anda; cuplikan output disusun secara lokal dan disalin ke clipboard Anda berdasarkan permintaan. Ini penting karena tag draf sering kali berisi URL halaman yang belum dipublikasikan, nama produk internal, atau salinan pemasaran pra-peluncuran yang tidak ingin Anda alirkan melalui server pihak ketiga.
Alat terkait
Pratinjau Open Graph
Pratinjau tampilan tautan Anda di Facebook, Twitter, dan LinkedIn. Buat tag OG.
Generator robots.txt
Bangun file robots.txt dengan aturan user-agent, path allow/disallow, sitemap, dan delay crawl.
Generator slug URL
Ubah teks apa pun menjadi slug bersih yang ramah URL. Menangani aksen, karakter khusus, dan lainnya.