Meta Tag Generator
Alat pembuatan Meta tag berbasis browser yang mendukung pembuatan title, description, keywords, canonical, Open Graph, Twitter Card, robots, dan tag lainnya, escaping HTML entity otomatis, panduan panjang karakter waktu nyata dengan status warna, salin dan unduh satu klik.
Rekomendasi Terkait
Kasus penggunaan
- Hasilkan Meta tag lengkap secara batch untuk halaman beranda, halaman daftar, dan halaman detail sebelum peluncuran situs web baru, dengan cepat menyelesaikan pengaturan SEO dasar
- Konfigurasi tag Open Graph tipe article dan Twitter Card summary_large_image sebelum mempublikasikan postingan blog untuk meningkatkan kinerja berbagi di platform sosial
- Konfigurasi og:type tipe product untuk halaman produk e-commerce, atur informasi terstruktur seperti og:image, og:price:amount untuk mengoptimalkan tampilan produk di platform sosial
- Buat ulang tag canonical setelah desain ulang situs web atau perubahan domain untuk menstandarisasi URL dan menghindari pengenceran otoritas dari konten duplikat
- Konfigurasi theme-color untuk halaman web seluler agar bilah alamat Chrome dan Safari seluler konsisten dengan warna merek
- Saat mengembangkan dengan kerangka SSR/SSG seperti Next.js, Nuxt.js, Gatsby, dengan cepat menghasilkan kode Meta tag lengkap yang dibutuhkan untuk konfigurasi head
- Konfigurasi secara manual Meta tag untuk template halaman kustom di sistem CMS seperti WordPress dan Shopify tanpa bergantung pada plugin SEO
- Hasilkan dengan cepat kombinasi robots meta tag yang benar saat memecahkan masalah pengindeksan situs web (misalnya, noindex,nofollow untuk lingkungan staging)
- Operator media sosial mengonfigurasi kartu berbagi untuk halaman arahan kampanye guna memastikan pratinjau yang benar saat dibagikan ke Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, Discord
- Pengembang frontend yang menulis template halaman HTML mendapatkan escaping entity otomatis untuk Meta tag, menghindari kesalahan sintaks HTML yang disebabkan oleh karakter khusus
Cara Penggunaan
- Isi judul halaman (disarankan 50-60 karakter), meta description (disarankan 120-160 karakter), keywords (dipisahkan koma), canonical URL, dan author di bagian "Tag SEO Dasar"
- Pilih aturan pengindeksan dan pelacakan yang sesuai di bagian "Direktif Crawler robots": index/noindex (apakah akan mengindeks), follow/nofollow (apakah akan mengikuti tautan), dengan opsi tambahan untuk noarchive, nosnippet, dll.
- Masukkan atau pilih nilai warna hex theme-color di bagian "Pengaturan Warna Tema" untuk pewarnaan bilah alamat browser seluler
- Beralih ke bagian "Tag Open Graph", pilih og:type (salah satu dari website/article/product/profile), isi og:title, og:description, og:image (URL gambar berbagi, disarankan 1200×630 piksel), og:url, og:site_name, og:locale
- Beralih ke bagian "Tag Twitter Card", pilih jenis twitter:card (salah satu dari summary/summary_large_image/app/player), isi twitter:site @handle, twitter:title, twitter:description, twitter:image
- Amati area pratinjau waktu nyata di sebelah kanan dan indikator warna hitung karakter selama input: hijau berarti panjang optimal, oranye berarti mendekati batas, abu-abu berarti terlalu pendek atau terlalu panjang memerlukan penyesuaian
- Setelah memastikan tag benar, klik tombol "Salin ke Papan Klip" untuk menyalin semua kode dan tempel ke area head HTML, atau klik "Unduh File HTML" untuk disimpan sebagai meta-tags.html untuk digunakan nanti
Fitur
- Escaping HTML entity otomatis: dengan aman meloloskan lima karakter khusus &, <, >, ", ' untuk mencegah kesalahan sintaks pada tag HTML yang dihasilkan
- Indikator panjang title cerdas: hijau (optimal) dalam rentang 50-60 karakter, indikator status oranye/abu-abu jika terlalu panjang atau terlalu pendek, hitung karakter waktu nyata
- Indikator panjang meta description cerdas: hijau (rentang tampilan optimal) dalam 120-160 karakter, perubahan status warna waktu nyata jika terlalu panjang atau terlalu pendek
- Mendukung 4 opsi og:type: website (situs umum), article (blog/postingan), product (halaman produk), profile (halaman pribadi), sesuai dengan berbagai jenis halaman
- Mendukung 4 jenis twitter:card: summary (gambar kecil), summary_large_image (gambar besar), app (kartu aplikasi), player (kartu video/player)
- Kombinasi direktif robots: mendukung kombinasi bebas index/noindex, follow/nofollow, noarchive, nosnippet, noimageindex, dan direktif crawler lainnya
- Author meta tag: mendukung content-author, article:author, dan tag atribusi lainnya, cocok untuk blog dan situs berita
- Konfigurasi theme-color: mendukung pengaturan warna tema bilah alamat browser seluler, menyediakan pemilih warna dan input nilai hex
- Konfigurasi og:site_name: secara khusus mengatur bidang nama situs dalam protokol Open Graph untuk tampilan yang benar saat berbagi sosial
- Konfigurasi twitter:site @handle: mendukung pengisian akun @handle resmi Twitter/X untuk menghubungkan kartu berbagi dengan akun resmi
- Output terstruktur tiga bagian: menampilkan hasil yang dihasilkan dalam tiga bagian yang jelas: SEO Utama, Open Graph, dan Twitter Card, dengan struktur yang jelas sekilas
- Salin satu klik ke papan klip: kode yang dihasilkan dapat disalin dengan satu klik tanpa pemilihan manual, kompatibel dengan berbagai lingkungan browser
- Unduh sebagai meta-tags.html: tag yang dihasilkan dapat diunduh sepenuhnya sebagai file HTML mandiri untuk mudah disimpan atau langsung diimpor ke proyek
- Generasi dan pratinjau waktu nyata: konten input segera menghasilkan kode tag, dengan pratinjau sinkron tampilan hasil pencarian SERP dan gaya kartu berbagi sosial
Pertanyaan Umum
Apakah kode yang dihasilkan oleh Meta Tag Generator dapat langsung disalin ke situs web untuk digunakan? Apakah perlu modifikasi?
Dapat langsung disalin untuk digunakan. Kode yang dihasilkan oleh alat ini adalah Meta tag HTML format standar dengan escaping HTML entity otomatis; cukup tempel langsung di antara <head> dan </head> halaman Anda. Anda hanya perlu memastikan URL yang Anda isi (canonical, og:image, og:url, twitter:image) adalah alamat online nyata situs web Anda, bukan placeholder contoh. Jika menggunakan solusi manajemen head dari kerangka kerja seperti Next.js, Nuxt.js, React Helmet, Vue Meta, Anda mungkin perlu penyesuaian sedikit sesuai dengan sintaks template JSX/Vue kerangka kerja, tetapi atribut dan nilai tag dapat digunakan kembali secara langsung.
Mengapa saya harus mengisi og:image? Apa yang terjadi tanpa gambar?
og:image secara langsung memengaruhi efek visual dan rasio klik-tayang kartu berbagi sosial. Tautan tanpa og:image yang dibagikan ke Facebook, Twitter, LinkedIn, WeChat, dan platform lainnya baik menampilkan tautan teks telanjang tanpa pratinjau gambar apa pun, atau platform secara acak mengambil gambar kecil dari halaman (bisa berupa logo, avatar, gambar iklan, atau bahkan gambar yang tidak relevan), menghasilkan tampilan yang sangat buruk, dengan rasio klik-tayang biasanya 50%+ lebih rendah daripada pembagian dengan gambar pratinjau yang benar. Ukuran og:image yang disarankan adalah 1200×630 piksel (rasio 1.91:1), harus berupa URL absolut yang dapat diakses publik, ukuran file tidak melebihi 5MB.
Apakah tag Open Graph dan Twitter Card keduanya perlu dikonfigurasi? Apakah boleh hanya mengonfigurasi OG?
Platform Twitter/X memang membaca tag Open Graph sebagai cadangan — jika Anda tidak mengonfigurasi tag berawalan twitter: apa pun, Twitter akan mencoba menggunakan og:title, og:description, og:image untuk menghasilkan kartu. Tetapi mengonfigurasi Twitter Cards secara khusus memiliki beberapa manfaat: ① Anda dapat memilih jenis twitter:card yang paling sesuai (terutama tipe gambar besar summary_large_image; OG mungkin tidak default ke gaya gambar besar); ② Anda dapat mengatur twitter:site untuk menautkan akun Twitter resmi Anda, meningkatkan konversi pengikut; ③ Anda dapat mengoptimalkan panjang title/deskripsi secara terpisah untuk Twitter, dibedakan dari OG. Kami merekomendasikan untuk mengonfigurasi keduanya; alat ini mendukung generasi simultan dengan usaha yang pada dasarnya sama.
Apa yang terjadi jika panjang title dan meta description melebihi rentang yang disarankan? Apakah akan dikenakan hukuman?
Melebihi panjang tidak akan mengakibatkan hukuman mesin pencari, tetapi konten akan dipotong. Di hasil pencarian Google, bagian title yang melebihi sekitar lebar 600 piksel (sekitar 50-60 karakter) dipotong dengan elipsis, dan pengguna tidak dapat melihat title lengkap; meta description yang melebihi sekitar lebar 920 piksel (sekitar 120-160 karakter) juga dipotong. Masalah dengan terlalu pendek adalah membuang ruang tampilan yang berharga, tidak dapat sepenuhnya menyampaikan nilai halaman dan menarik klik. Perhatikan bahwa ini bukan batas hitung karakter yang tepat tetapi batas lebar piksel — karakter lebar penuh, huruf kapital, huruf lebar seperti W/M, dan emoji menempati lebih banyak lebar, jadi tampilan sebenarnya mungkin terpotong lebih awal dari yang disarankan hitung karakter. Indikator warna alat ini adalah referensi praktik terbaik berdasarkan hitung karakter.
Apa arti escaping HTML entity? Mengapa alat ini melakukannya secara otomatis?
Karakter tertentu dalam HTML memiliki makna sintaksis khusus; menulisnya langsung di nilai atribut akan merusak struktur HTML: tanda kutip ganda " adalah terminator nilai atribut, menulisnya langsung menyebabkan tag menutup lebih awal; & adalah pemula escape entitas; < dan > adalah pembatas tag. Karakter-karakter ini harus ditulis dalam bentuk entitas untuk ditampilkan dengan benar: & → &, < → <, > → >, " → ", ' → '. Jika title atau deskripsi Anda berisi &, tanda kutip, tanda kurung sudut, atau karakter khusus lainnya, menulisnya tanpa escaping menyebabkan kesalahan sintaks HTML yang dapat membuat tag berikutnya semuanya tidak valid. Alat ini menangani escaping ini secara otomatis; Anda cukup memasukkan teks asli langsung tanpa escaping manual.
Mengapa crawler Facebook/Twitter tidak dapat menangkap Meta tag dari halaman yang saya tulis dengan React/Vue?
Karena kerangka kerja frontend modern seperti React, Vue, dan Angular default ke perenderan sisi klien (CSR) — sumber HTML kosong atau hanya berisi wadah div, dan Meta tag disisipkan secara dinamis ke dalam DOM setelah browser mengeksekusi JavaScript. Tetapi sebagian besar crawler platform sosial seperti facebookexternalhit milik Facebook, Twitterbot, LinkedInBot, dan crawler WeChat tidak mengeksekusi JavaScript (atau memiliki kemampuan eksekusi yang sangat terbatas); HTML mentah yang mereka rayapi tidak mengandung Meta tag, secara alami tidak dapat menghasilkan kartu berbagi. Solusi: ① Gunakan SSR (Server-Side Rendering) atau SSG (Static Site Generation) dengan kerangka kerja seperti Next.js, Nuxt.js, Gatsby, Astro, merender Meta tag lengkap ke dalam sumber HTML di sisi server; ② Gunakan layanan prerendering seperti prerender.io, Rendertron untuk mengembalikan HTML statis ke crawler; ③ Gunakan layanan generasi gambar OG khusus untuk menghasilkan tag secara dinamis.
Apakah canonical dan og:url untuk halaman yang sama harus diisi secara identik?
Ya, keduanya harus konsisten. Tag canonical adalah untuk mesin pencari, memberitahu mereka URL pilihan; og:url adalah untuk platform sosial, memberitahu mereka URL unik untuk konten ini guna mengagregasi suka, komentar, dan jumlah berbagi. Keduanya menunjuk ke URL yang sama adalah praktik terbaik, menghindari pengenceran otoritas dan fragmentasi jumlah sosial. Perhatikan bahwa keduanya harus berupa URL absolut lengkap (termasuk https://, domain, jalur lengkap), bukan jalur relatif. Jika URL memiliki parameter UTM atau parameter pelacakan, baik canonical maupun og:url harus menunjuk ke URL bersih tanpa parameter.
Apakah tautan di halaman noindex masih akan dirayapi oleh crawler? Apakah akan meneruskan otoritas?
noindex berarti "jangan indeks halaman ini", bukan "jangan rayapi" dan bukan "jangan ikuti tautan". Crawler masih mengambil halaman noindex (satu-satunya cara mereka dapat melihat tag noindex), dan jika robots meta juga mengatur follow (yang merupakan default), crawler akan terus merayapi tautan di halaman. Tetapi mengenai penerusan otoritas: pernyataan resmi Google adalah bahwa halaman noindex pada akhirnya dihapus dari indeks, dan bobot tautan di halaman tersebut tidak meneruskan secara normal (karena halaman itu sendiri tidak diindeks). Jadi jika Anda ingin crawler mencapai halaman lain melalui halaman tertentu tetapi tidak ingin halaman itu sendiri diindeks, menggunakan noindex,follow berfungsi, tetapi jangan berharap halaman noindex meneruskan bobot seperti halaman normal.
Browser mana yang mendukung theme-color? Apakah iOS Safari mendukungnya?
theme-color saat ini didukung di: Chrome/Firefox/Edge/Brave dan browser berbasis Chromium lainnya di Android telah mendukungnya untuk waktu yang lama dengan efek yang paling jelas; Safari telah mendukung theme-color sejak iOS 15 dan macOS Monterey, tetapi implementasi Safari sedikit berbeda — secara otomatis menyesuaikan berdasarkan warna latar belakang halaman dan juga mendukung pengaturan warna yang berbeda untuk mode terang/gelap menggunakan atribut media. Chrome desktop juga menerapkan theme-color di bilah tab dll. dari versi tertentu. IE dan browser lama tidak mendukungnya, tetapi kurangnya dukungan tidak masalah — hanya tidak ada efek warna tema, tidak berdampak pada fungsionalitas apa pun. Warna tema yang disarankan harus cocok dengan warna header/bilah navigasi situs web Anda untuk konsistensi visual.
Mengapa hasil pencarian Google terkadang menunjukkan deskripsi yang bukan yang saya tulis?
Google tidak menjamin penggunaan 100% dari meta description yang Anda tulis. Ketika Google menilai deskripsi Anda tidak cukup relevan dengan kueri pencarian pengguna, atau kualitas deskripsi rendah (misalnya, penumpukan kata kunci, identik di seluruh situs, konten tidak cocok), Google secara otomatis mengekstrak cuplikan dari konten badan halaman yang dianggapnya paling relevan dengan istilah pencarian sebagai deskripsi hasil pencarian yang ditampilkan. Ini adalah perilaku normal Google, bukan bug. Untuk meningkatkan probabilitas deskripsi digunakan: ① Tulis deskripsi yang unik dan akurat mendeskripsikan konten untuk setiap halaman; ② Secara alami sertakan kata kunci inti halaman dalam deskripsi tanpa penumpukan; ③ Pertahankan panjang dalam rentang yang wajar, tidak terlalu pendek; ④ Konten deskripsi harus benar-benar tercermin dalam badan halaman. Meskipun Google terkadang menulis ulang, Anda tetap harus menulis deskripsi dengan hati-hati — ini adalah cara utama Anda untuk secara aktif mengontrol tampilan.
Setelah mengonfigurasi tag, bagaimana cara saya memverifikasi bahwa mereka benar-benar berlaku? Alat pemeriksaan apa yang tersedia?
Memverifikasi Meta tag melibatkan beberapa langkah dan alat: ① Pertama gunakan browser "Lihat Sumber Halaman" untuk mencari title, description, og:, dan tag lainnya di sumber HTML mentah untuk memeriksa apakah mereka ada dengan konten yang benar (catatan: kode sumber, bukan panel Elemen, karena sumber adalah apa yang dikembalikan server; CSR tidak akan muncul di sumber); ② Gunakan Facebook Sharing Debugger untuk memverifikasi tag OG dan menyegarkan cache; ③ Gunakan Twitter Card Validator untuk memverifikasi Twitter Cards; ④ Gunakan Google Rich Results Test untuk memeriksa tag dasar; ⑤ Gunakan alat "Inspeksi URL" di Google Search Console untuk melihat apa yang sebenarnya dirayapi Google, status pengindeksan; ⑥ Untuk pengujian lokal, gunakan pengalih user-agent browser untuk mensimulasikan crawler media sosial, atau gunakan perintah curl dengan Facebook UA untuk merayapi dan memeriksa HTML yang dikembalikan.
Apakah setiap halaman perlu dikonfigurasi Meta tag secara terpisah? Apakah boleh menggunakan satu set tag di seluruh situs?
Sama sekali tidak! Setiap halaman harus memiliki title dan meta description yang unik. Jika semua halaman di seluruh situs menggunakan title dan deskripsi yang sama, mesin pencari tidak dapat membedakan topik konten halaman yang berbeda: ① Mesin pencari tidak tahu apa isi setiap halaman dan tidak dapat memberi peringkat dengan benar; ② Semua halaman menunjukkan title dan deskripsi yang sama di hasil pencarian, pengguna tidak dapat membedakan mana yang harus diklik, menghasilkan CTR yang sangat rendah; ③ Mungkin dinilai sebagai situs berkualitas rendah oleh mesin pencari, memengaruhi otoritas seluruh situs. Tag OG dan Twitter Card pada prinsipnya juga harus berbeda per halaman. Hanya konfigurasi tingkat situs seperti theme-color, og:site_name, twitter:site yang dapat diseragamkan di seluruh situs; semua tag lainnya harus dikonfigurasi secara individual sesuai konten setiap halaman.
Apakah saya masih harus menulis meta keywords sekarang? Berapa banyak yang sesuai?
Google, Bing, Baidu, dan mesin pencari arus utama lainnya pada tahun 2026 tidak lagi menggunakan meta keywords sebagai faktor peringkat; apakah Anda menulisnya atau tidak, dan apa yang Anda tulis, pada dasarnya tidak memengaruhi SEO. Jika CMS atau template Anda memiliki bidang ini, luangkan beberapa detik untuk mengisi 3-5 kata kunci inti; jangan menghabiskan terlalu banyak waktu untuk mempertimbangkan pemilihan dan kepadatan kata kunci. Yang penting: jangan menumpuk puluhan kata kunci, jangan ulangi kata yang sama berkali-kali, jangan menulis istilah populer yang tidak relevan — meskipun keywords sendiri tidak digunakan untuk peringkat, penumpukan berlebihan mungkin diperlakukan sebagai sinyal spam oleh mesin pencari, yang justru kontraproduktif. Jika situs web Anda tidak memiliki bidang keywords atau Anda tidak repot-repot mengisinya, membiarkannya benar-benar kosong tidak apa-apa tanpa dampak negatif pada peringkat.
Apa perbedaan antara robots meta tag dan robots.txt? Mana yang memiliki prioritas lebih tinggi?
Keduanya beroperasi pada tingkat dan mekanisme yang berbeda: ① robots.txt adalah file teks yang ditempatkan di akar situs web, mengontrol perilaku crawler di tingkat situs atau direktori, misalnya, Disallow: /admin/ memberitahu semua crawler untuk tidak merayapi direktori /admin/; tetapi robots.txt adalah "perjanjian sopan santun" — crawler yang patuh menghormatinya, dan jika halaman yang dilarang dirayapi memiliki tautan eksternal yang menunjuk ke sana, mereka mungkin masih diindeks hanya tanpa deskripsi. ② robots meta adalah tag tingkat halaman yang ditempatkan di head HTML setiap halaman, yang dapat mengontrol secara presisi perilaku index/noindex/follow/nofollow dll. halaman individu, dengan prioritas lebih tinggi daripada robots.txt. ③ X-Robots-Tag adalah tingkat header respons HTTP, fungsionalitas yang sama dengan robots meta tetapi dikembalikan melalui header HTTP, dapat digunakan untuk kontrol pengindeksan file non-HTML (misalnya, PDF, gambar). Untuk sepenuhnya mencegah halaman diindeks, Anda harus menggunakan noindex (meta atau X-Robots-Tag); hanya mengandalkan robots.txt Disallow tidak dapat menjamin non-pengindeksan.
Setelah menghasilkan Meta tag dengan alat ini, apakah saya masih perlu mengonfigurasi data terstruktur Schema.org (JSON-LD)?
Meta tag dan data terstruktur Schema.org saling melengkapi, bukan pengganti. Meta tag terutama menangani: title/deskripsi halaman hasil mesin pencari, kartu berbagi platform sosial, kontrol crawler dasar. Data terstruktur Schema.org (biasanya disematkan di halaman sebagai JSON-LD) menangani: Rich Snippets, seperti bintang peringkat produk, harga/stok, navigasi breadcrumb, tanggal terbit artikel, blok akordeon FAQ, waktu/lokasi acara, dan tampilan yang ditingkatkan lainnya, yang dapat lebih meningkatkan CTR. Kami merekomendasikan untuk mengonfigurasi keduanya untuk halaman penting: ① Meta tag dasar (konten yang dihasilkan oleh alat ini); ② Data terstruktur Schema.org untuk jenis halaman yang sesuai. Keduanya tidak bertentangan, bersama-sama mengoptimalkan efek tampilan pencarian.
Pemecahan Masalah
Saat membagikan tautan ke Facebook/Twitter/LinkedIn, gambar tidak ditampilkan, atau gambar yang ditampilkan bukan og:image yang diatur
URL og:image menggunakan jalur relatif atau localhost/127.0.0.1/IP internal; crawler platform sosial tidak dapat mengakses alamat publik Gambar diblokir oleh robots.txt, atau server/WAF/CDN/firewall memblokir User-Agent crawler Facebook/Twitter (facebookexternalhit/Twitterbot/LinkedInBot) Ukuran gambar tidak memenuhi persyaratan: og:image lebih kecil dari 200×200 piksel akan diabaikan; summary_large_image lebih kecil dari 300×157 akan diturunkan File gambar terlalu besar (melebihi 5MB-8MB) atau format tidak didukung (hanya JPG/PNG/WebP/GIF yang didukung; SVG tidak didukung oleh beberapa platform) Tag dirender secara dinamis di sisi klien dengan JavaScript; crawler platform sosial tidak mengeksekusi JS, hanya SSR/SSG yang dapat dirayapi URL og:image mengembalikan kesalahan 404/403/5xx, atau dialihkan ke halaman login/halaman kesalahan Platform menyimpan cache versi lama tanpa gambar; setelah memodifikasi tag, alat Debugger resmi tidak digunakan untuk memaksa Scrape Again guna menyegarkan cache
Di hasil pencarian Google, title terpotong dan tidak ditampilkan sepenuhnya, atau Google secara otomatis menulis ulang title
Panjang title melebihi 50-60 karakter (atau sekitar lebar 600 piksel), kelebihan dipotong dengan elipsis Title berisi simbol khusus lebar penuh, emoji yang menempati lebar tambahan menyebabkan pemotongan lebih awal; panjang tampilan sebenarnya lebih pendek dari hitung karakter Penumpukan kata kunci title atau ketidakcocokan dengan konten halaman; Google menganggap title Anda tidak akurat dan mengambil teks lain dari badan halaman atau teks tautan jangkar untuk menulis ulang title Title untuk setiap halaman duplikat atau sangat mirip; Google tidak dapat membedakan halaman dan secara otomatis menghasilkan title yang berbeda Title hanya berisi nama merek tanpa deskripsi topik halaman, atau nama merek terlalu panjang memakan terlalu banyak ruang Terlalu banyak pemisah seperti |, -, _ digunakan, atau penggunaan pemisah tidak standar, menyebabkan Google menilai sebagai penumpukan pemisah Halaman memiliki hierarki judul h1-h6 yang berantakan atau beberapa tag h1; Google mungkin menulis ulang title menggunakan konten h1
Setelah konfigurasi Meta tag, halaman menunjukkan teks kacau, karakter khusus tampak tidak normal, atau terjadi kesalahan sintaks HTML
<meta charset="UTF-8"> tidak dideklarasikan, atau posisi deklarasi tidak di awal head (harus sebelum title) Nilai atribut content di meta description, og:description, dll. berisi tanda kutip ganda yang tidak diloloskan ("), menyebabkan tag menutup lebih awal dan struktur HTML rusak Konten berisi &, <, >, dan karakter khusus lainnya tanpa escaping HTML entity (& harus ditulis sebagai &, < sebagai <, > sebagai >) Pengkodean simpan sebenarnya file HTML bukan UTF-8 (misalnya, disimpan sebagai GBK/GB2312), tetapi charset mendeklarasikan UTF-8 menyebabkan ketidakcocokan pengkodean Header respons HTTP server Content-Type menentukan charset=GBK atau pengkodean non-UTF-8 lainnya, menggantikan deklarasi meta charset Escaping entitas yang salah digunakan (misalnya, menggunakan " untuk meloloskan tanda kutip di luar atribut, atau meloloskan karakter yang tidak perlu diloloskan) CMS atau mesin template meloloskan otomatis menyebabkan double escaping (misalnya, & menjadi &amp;, ditampilkan sebagai & bukannya &)
Tag canonical yang dikonfigurasi tidak berlaku, URL duplikat masih diindeks, atau canonical diabaikan oleh mesin pencari
URL yang ditunjuk canonical mengembalikan kesalahan 404/403/5xx, atau dialihkan ke halaman lain; mesin pencari tidak dapat mengakses versi canonical Halaman A canonical ke B, Halaman B canonical ke A (canonical melingkar), atau canonical rantai A→B→C→D membingungkan mesin pencari Canonical menunjuk ke halaman dengan konten yang jauh berbeda (bukan konten yang sangat duplikat/sama); mesin pencari menganggap pengaturan canonical salah dan mengabaikannya Canonical menggunakan jalur relatif (misalnya, href="/page") alih-alih URL absolut lengkap (href="https://example.com/page") Situs web memiliki beberapa versi protokol/domain (http/https, www/non-www) yang saling menunjuk secara canonical, tetapi pengalihan 301 tidak dikonfigurasi dengan benar Halaman yang dipaginasi (misalnya, ?page=2, ?page=3) semuanya canonical ke halaman pertama, menyebabkan konten berikutnya tidak diindeks; mesin pencari mengabaikan canonical yang tidak masuk akal seperti itu Halaman yang sama mendeklarasikan URL canonical yang berbeda secara bersamaan melalui tag link di HTML, header respons HTTP Link: <...>; rel="canonical", dan Sitemap; konflik prioritas
Setelah memodifikasi Meta tag, membagikan ulang masih menunjukkan title, deskripsi, atau gambar lama; tidak dapat melihat efek yang diperbarui
Platform sosial (Facebook/Twitter/LinkedIn) menyimpan cache informasi OG/Twitter Card untuk waktu yang lama (berpotensi berhari-hari hingga berminggu-minggu), tidak merayapi ulang pada setiap pembagian Alat debug resmi untuk platform yang sesuai (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) tidak digunakan untuk menjalankan Scrape Again/perayapan ulang guna memaksa penyegaran cache CDN (Cloudflare, dll.) menyimpan cache halaman HTML lama; crawler menerima versi lama yang di-cache CDN Sisi server, cache SSR, plugin cache WordPress, cache halaman Redis, dll. tidak dibersihkan; output masih HTML lama URL sumber daya seperti og:image tidak berubah tetapi konten gambar diperbarui; browser dan platform menyimpan cache berdasarkan URL; menambahkan parameter versi seperti ?v=2 diperlukan untuk memaksa pembaruan Setelah memodifikasi tag, halaman tidak dideploy dengan benar ke produksi; file berubah secara lokal tetapi lingkungan produksi masih memiliki versi lama Meta tag ditempatkan di area body HTML atau disisipkan secara dinamis dengan JS; crawler tidak membaca tag baru sama sekali, masih membaca versi yang sebelumnya di-cache
Tidak sengaja mengatur noindex,nofollow menyebabkan seluruh situs web atau halaman penting tidak diindeks oleh Google, tidak dapat dicari
Tag noindex,nofollow lingkungan pengembangan/staging tidak dihapus saat peluncuran; seluruh situs diluncurkan dengan noindex WordPress dan backend CMS lainnya opsi "Cegah mesin pencari mengindeks situs ini" dicentang, secara otomatis menambahkan noindex ke semua halaman robots.txt juga mengatur Disallow, menyebabkan crawler bahkan tidak mengambil halaman dan sehingga tidak melihat noindex; tetapi jika ada tautan eksternal yang menunjuk, halaman mungkin masih diindeks Header respons HTTP mengembalikan X-Robots-Tag: noindex (prioritas lebih tinggi daripada tag meta, banyak orang tidak menyadari header respons), misalnya, dari konfigurasi Nginx/Apache, pengaturan CDN CDN/WAF/plugin keamanan secara otomatis menambahkan header noindex (beberapa plugin keamanan salah operasi atau memiliki pengaturan default) Arahan kombinasi yang salah digunakan, misalnya, menulis noindex sebagai index tetapi parameter lain konflik, atau template seluruh situs menyertakan noindex dengan hanya halaman beranda yang menghapusnya sementara halaman dalam masih memilikinya Saat memigrasikan situs web dari staging/pengujian ke produksi, URL dasar, canonical, konfigurasi robots tidak diperbarui; noindex lingkungan staging terbawa ke produksi
Glosarium
- Meta tag
- Tag meta HTML yang ditempatkan di bagian head, digunakan untuk mendeskripsikan metadata halaman, menyampaikan title halaman, deskripsi, penulis, aturan crawler, dan informasi lainnya ke browser, mesin pencari, dan platform sosial.
- title
- Tag title HTML, mendefinisikan title tab browser dan title yang dapat diklik di halaman hasil mesin pencari (SERP); tag SEO terpenting, panjang yang disarankan 50-60 karakter.
- meta description
- Tag meta deskripsi halaman, ditampilkan sebagai teks deskripsi di bawah title SERP; tidak secara langsung memengaruhi peringkat tetapi secara signifikan memengaruhi rasio klik-tayang (CTR), panjang yang disarankan 120-160 karakter.
- meta keywords
- Tag meta kata kunci, digunakan oleh mesin pencari awal untuk menentukan topik halaman; karena penyalahgunaan, Google mengumumkan pada tahun 2009 bahwa itu tidak lagi digunakan, sekarang pada dasarnya tidak memiliki nilai SEO.
- canonical
- Tag tautan canonical (rel="canonical"), memberitahu mesin pencari mana yang merupakan versi pilihan di antara beberapa URL yang serupa, digunakan untuk menyelesaikan konten duplikat, URL parameter, domain pilihan, dan masalah lainnya.
- Open Graph
- Protokol metadata berbagi sosial yang diluncurkan oleh Facebook pada tahun 2010, menggunakan tag awalan og: untuk mengontrol gaya kartu berbagi tautan di platform sosial, didukung oleh Facebook, LinkedIn, WhatsApp, Slack, dan hampir semua platform.
- Twitter Card
- Protokol kartu berbagi platform Twitter/X menggunakan tag awalan twitter:, mendukung empat jenis kartu: summary, summary_large_image, app, player; dibaca oleh Twitter dengan prioritas di atas tag OG.
- og:type
- Tag tipe halaman Open Graph, menentukan jenis konten; nilai umum adalah website (situs umum), article (artikel), product (produk), profile (profil pribadi), menentukan bagaimana platform sosial mengurai konten.
- og:image
- Tag gambar berbagi Open Graph, menentukan URL gambar pratinjau kartu berbagi sosial; ukuran yang disarankan 1200×630 piksel (rasio 1.91:1), harus berupa URL absolut yang dapat diakses publik.
- twitter:card
- Tag jenis Twitter Card, menentukan jenis kartu berbagi; nilai adalah summary (gambar kecil), summary_large_image (gambar besar), app (aplikasi), player (pemutar); tag Twitter Card yang wajib.
- robots meta
- Tag meta kontrol crawler, memberitahu mesin pencari di tingkat halaman apakah akan mengindeks (index/noindex), mengikuti tautan (follow/nofollow), menampilkan cuplikan (noarchive), dll.; prioritas lebih tinggi daripada robots.txt.
- noindex
- Salah satu direktif robots, melarang mesin pencari mengindeks halaman; halaman tidak akan muncul di hasil pencarian. Crawler masih mengambil halaman untuk membaca tag ini tetapi tidak akan mengindeksnya. Biasanya digunakan untuk halaman uji, halaman internal, halaman bernilai rendah.
- nofollow
- Salah satu direktif robots, melarang crawler mesin pencari mengikuti semua tautan di halaman (berbeda dari rel="nofollow" pada tautan individu); biasanya digunakan untuk konten buatan pengguna, tautan iklan, halaman tautan eksternal yang tidak tepercaya.
- theme-color
- Tag meta warna tema browser, mendefinisikan warna bilah alamat/bilah alat browser seluler; efektif di Android Chrome, Safari 15+, dan browser lainnya, memberikan pengalaman merek yang lebih mendalam.
- author meta
- Tag meta penulis (name="author"), mendeklarasikan informasi pencipta konten; digunakan di blog dan situs berita bersama dengan article:author untuk mengidentifikasi penulis konten.
- HTML entity
- Karakter escape entitas HTML, digunakan untuk menampilkan karakter khusus dengan aman di HTML, seperti & untuk &, < untuk <, > untuk >, " untuk ", ' untuk ', menghindari kesalahan sintaks dan masalah XSS.
- SERP
- Search Engine Results Page, merujuk pada halaman hasil yang dikembalikan setelah pengguna memasukkan kata kunci di mesin pencari seperti Google/Baidu, berisi title, deskripsi, URL, cuplikan media kaya, dan elemen lainnya.
- CTR
- Click-Through Rate, proporsi pengguna yang mengklik setelah hasil pencarian ditampilkan. CTR adalah salah satu metrik SEO inti, secara langsung dipengaruhi oleh daya tarik title dan meta description, dan juga merupakan sinyal pengguna dalam algoritme peringkat Google.
- crawl budget
- Anggaran perayapan, jumlah perayapan dan halaman yang dialokasikan mesin pencari ke situs web Anda dalam waktu tertentu. Penggunaan robots meta, canonical, noindex yang tepat dapat menghindari pemborosan anggaran perayapan pada halaman bernilai rendah, memungkinkan halaman penting dirayapi lebih sering.
- viewport
- Tag meta viewport (name="viewport"), sangat penting untuk halaman web responsif modern, mengontrol lebar perenderan halaman dan zoom awal di seluler; konfigurasi standar adalah width=device-width, initial-scale=1.0.
Daftar Meta Tag Umum dan Tabel Referensi Atribut
| Nama Tag | Tujuan | Contoh Atribut/Penggunaan | Catatan |
|---|---|---|---|
title | Judul halaman, tab browser dan judul SERP | <title>Judul Halaman | Merek</title> | Disarankan 50-60 karakter, tempatkan kata kunci inti di depan, nama merek di akhir, unik per halaman |
meta description | Deskripsi halaman, teks deskripsi yang ditampilkan di SERP | <meta name="description" content="..."> | Disarankan 120-160 karakter, sertakan kata kunci dan CTA, unik per halaman |
meta keywords | Tag kata kunci | <meta name="keywords" content="kata1,kata2,kata3"> | Mesin pencari arus utama seperti Google/Bing/Baidu tidak lagi menggunakannya, tidak perlu prioritas konfigurasi |
link canonical | Tautan canonical, menentukan URL pilihan | <link rel="canonical" href="https://example.com/page"> | Harus menulis URL absolut lengkap, menyelesaikan masalah konten duplikat, jangan atur dalam rantai |
meta robots | Kontrol crawler, aturan pengindeksan/pengikutan tingkat halaman | <meta name="robots" content="index,follow"> | Prioritas lebih tinggi daripada robots.txt; noindex adalah yang benar-benar mencegah pengindeksan |
meta charset | Deklarasi pengkodean karakter | <meta charset="UTF-8"> | Harus ditempatkan di awal head; halaman web modern secara seragam menggunakan UTF-8 |
meta viewport | Kontrol viewport seluler | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | Penting untuk halaman web responsif; harus dikonfigurasi jika tidak pengalaman seluler sangat buruk |
meta author | Informasi penulis halaman | <meta name="author" content="Nama Penulis"> | Mengidentifikasi pencipta konten; digunakan untuk blog/situs berita |
meta theme-color | Warna tema browser seluler | <meta name="theme-color" content="#2563eb"> | Android Chrome/Safari 15+ mendukung; disarankan menggunakan warna utama merek |
og:title | Judul berbagi Open Graph | <meta property="og:title" content="..."> | Judul kartu berbagi sosial, bisa berbeda dari title SEO, lebih menarik klik |
og:description | Deskripsi berbagi Open Graph | <meta property="og:description" content="..."> | Deskripsi kartu sosial, disarankan di bawah 200 karakter |
og:image | Gambar berbagi Open Graph | <meta property="og:image" content="https://.../img.jpg"> | Disarankan 1200×630 piksel, URL absolut, dapat diakses publik, file <5MB |
og:url | URL canonical Open Graph | <meta property="og:url" content="https://example.com/page"> | Harus konsisten dengan canonical, digunakan untuk agregasi suka dan berbagi |
og:type | Jenis konten Open Graph | <meta property="og:type" content="website"> | Opsi: website/article/product/profile; jenis yang berbeda mendukung atribut yang diperluas berbeda |
og:site_name | Nama situs Open Graph | <meta property="og:site_name" content="GeekFormat"> | Menampilkan nama situs web secara keseluruhan, dibedakan dari judul halaman |
twitter:card | Jenis Twitter Card | <meta name="twitter:card" content="summary_large_image"> | Opsi: summary/summary_large_image/app/player |
twitter:site | Akun resmi Twitter | <meta name="twitter:site" content="@username"> | Isi @handle Twitter situs web/merek |
twitter:image | Gambar Twitter Card | <meta name="twitter:image" content="https://.../img.jpg"> | Kembali ke og:image jika tidak diisi; gunakan 1:1 untuk tipe summary, 2:1 untuk tipe besar |
Tabel Referensi Kasus Penggunaan og:type
| Nilai og:type | Kasus Penggunaan | Rasio Gambar yang Disarankan | Tag yang Dapat Diperluas |
|---|---|---|---|
website | Halaman beranda situs web, halaman umum, Tentang Kami, Hubungi Kami, dan halaman non-konten/produk lainnya | 1.91:1 (1200×630) | Tag og: dasar sudah cukup, tidak ada ekstensi khusus |
article | Postingan blog, siaran pers, dokumen pengetahuan, tutorial, konten kolom, dan konten terkait waktu lainnya | 1.91:1 (1200×630) | article:published_time (waktu terbit), article:modified_time (waktu ubah), article:author (penulis), article:section (kategori), article:tag (tag) |
product | Halaman detail produk e-commerce, halaman barang dagangan, halaman layanan berbayar, halaman arahan produk SaaS | 1.91:1 (1200×630); gambar produk disarankan persegi atau 4:3 | product:price:amount (harga), product:price:currency (mata uang seperti CNY/USD), product:availability (status stok), product:brand (merek) |
profile | Halaman beranda pribadi, halaman profil pengguna, halaman penulis, halaman resume pribadi | Gambar avatar 1:1 atau gambar sampul 1.91:1 | profile:first_name (nama depan), profile:last_name (nama belakang), profile:username (nama pengguna), profile:gender (jenis kelamin) |
Tabel Referensi Jenis twitter:card
| Jenis twitter:card | Gaya Kartu | Persyaratan Gambar | Kasus Penggunaan | Bidang Tambahan yang Diperlukan |
|---|---|---|---|---|
summary | Kartu ringkasan gambar kecil, gambar kecil di kiri/atas, teks di kanan/bawah | Minimum 144×144 piksel, persegi 1:1, <5MB | Artikel biasa, halaman, halaman alat, konten umum | Tidak ada bidang tambahan wajib; isi tag dasar |
summary_large_image | Kartu ringkasan gambar besar, spanduk lebar penuh di bagian atas, dampak visual yang kuat | Minimum 300×157 piksel, disarankan 1200×675, sekitar rasio 2:1, <5MB | Postingan blog, halaman produk, halaman kampanye, konten yang menginginkan rasio klik-tayang tinggi (disarankan sebagai default) | Tidak ada bidang tambahan wajib; pastikan ukuran gambar memenuhi persyaratan |
app | Kartu unduhan aplikasi, menampilkan ikon aplikasi, nama, peringkat, tombol unduh | Gambar persegi logo aplikasi, 144×144 atau lebih besar | Halaman unduhan Aplikasi iOS/Android, halaman promosi aplikasi seluler | twitter:app:name:iphone/ipad/googleplay, twitter:app:id:iphone/ipad/googleplay (ID toko aplikasi), twitter:app:url:iphone/ipad/googleplay (skema kustom) |
player | Kartu pemutar video/audio, pemutar media yang disematkan langsung di aliran | Gambar sampul pemutar, halaman pemutar harus HTTPS | Halaman konten video, podcast, halaman audio, halaman siaran langsung | twitter:player (URL pemutar, HTTPS), twitter:player:width (lebar pemutar), twitter:player:height (tinggi pemutar), twitter:player:stream (URL aliran video/audio), memerlukan persetujuan daftar putih Twitter |
- Simulator Buta Warna
- Konverter Warna
- Konverter .htaccess ke Nginx
- Konverter SQL
- Parser Cookie
- Cron Expression Generator
- Cron Expression Validator
- Format CSS
- Kompres CSS
- CSV ke Excel
- Konverter Mata Uang
- Diff Checker
- Generator Favicon
- Format XML
- Konverter Heksadesimal
- Format HTML
- Kompres HTML
- HTML ke Markdown
- Markdown ke HTML
- Formatter JavaScript
- Kompres JS
- Alat Pemformat JSX
- Kompres JSX
- Pengelompokan kata kunci
- Generator Lorem Ipsum
- Generator Tabel Markdown
- Meta Tag Generator
- Pembuat Kata Sandi
- Alat Pemeriksa Kekuatan Kata Sandi
- Generator QR Code/Barcode
- Alat Uji Regex
- Generator Slug
- Generator SQL
- Alat Pemformat SQL
- Penghitung Kata
- Alat Waktu
- Format TypeScript
- Kompres TypeScript
- Format TSX
- Kompres TSX
- Konverter Unix Timestamp
- Generator UUID
- Format YAML
- Konverter Kasus