Meta Charset Tag
Apa <meta charset="utf-8"> melakukan, mengapa HTML spec ingin ini di pertama 1024 bytes, bagaimana sebuah wrong encoding penyebab mojibake, dan mengapa ini adalah sebuah rendering-correctness issue alih-alih sebuah peringkat factor.
1 sinyal bukti di halaman ini
- Alat aktif terkaitHTTP Header Checker
meta charset tag — <meta charset="utf-8"> — declares Anda halaman's character encoding so browser dan crawler turn mentah bytes ke right characters. HTML spec memerlukan ini di dalam pertama 1024 bytes dari document, dan best practice adalah literal pertama child dari <head>. Mendapatkan ini wrong (missing, late, atau sebuah mismatched encoding) dan Anda mendapatkan mojibake: accented letters, curly quotes, em dashes, non-Latin scripts, dan emoji render sebagai garbage — yang dapat corrupt apa displayed dan terindeks. ini adalah Tidak sebuah direct peringkat factor; Google's hanya guidance adalah untuk 'gunakan Unicode/UTF-8 di mana mungkin.' UTF-8 adalah near-universal, spec-diperlukan encoding untuk HTML5 hari ini. sebuah server-dikirim konten-jenis header charset overrides di-halaman tag, yang adalah sebuah umum sumber dari migration bugs. ini adalah satu dari browser-facing tags di meta-tags cluster.
TL;DR — meta charset tag adalah satu line dari HTML —
Bukti untuk klaim ini For HTML documents, the charset declaration must identify UTF-8. Cakupan: Modern HTML conformance requirements. Tingkat keyakinan: tinggi · Diverifikasi: WHATWG HTML: Character encoding declaration Bukti untuk klaim ini The complete character-encoding declaration must occur within the first 1024 bytes of the document. Cakupan: HTML serialization requirement intended to make encoding available early to parsers. Tingkat keyakinan: tinggi · Diverifikasi: WHATWG HTML: Specifying the document's character encoding<meta charset="utf-8">— itu tells browser cara baca Anda halaman’s text. Mendapatkan ini wrong atau leave ini out dan special characters (accents, curly quotes, emoji) dapat turn ke garbled nonsense. ini tidak help Anda peringkat, tetapi rusak-looking text adalah buruk untuk everyone, including Google. Put ini pertama di Anda<head>dan gunakanutf-8. Selesai.
Apa tag melakukan
setiap halaman web adalah stored sebagai mentah bytes. itu bytes hanya become letters Anda baca setelah sesuatu decides yang character setiap byte (atau group dari bytes) mewakili. meta charset tag adalah bagaimana Anda halaman tells browser — dan mesin pencari crawler — yang sistem untuk gunakan:
<meta charset="utf-8">utf-8 adalah encoding Anda ingin di hampir setiap case. ini dapat mewakili essentially
setiap character dan script di gunakan hari ini, plus emoji, semua di satu sistem.
Apa goes wrong tanpa ini
jika Anda tidak declare sebuah encoding, browser memiliki untuk guess. Ketika ini guesses wrong,
Anda mendapatkan mojibake — garbled text di mana sebuah curly apostrophe becomes sesuatu like
’, atau café menampilkan up sebagai café. Accented letters, em dashes, “smart” (terjemahan) “smart” quotes,
non-Latin scripts (Arabic, Cyrillic, Chinese, Japanese), dan emoji adalah biasa
casualties. Plain unaccented English dapat look fine bahkan ketika encoding adalah wrong,
yang adalah persis mengapa bug sneaks melalui.
Di mana untuk put ini
Dua sederhana aturan:
- Put
<meta charset="utf-8">pertama di dalam Anda<head>, sebelum judul atau apa pun else. - gunakan
utf-8, tidak beberapa older encoding.
itu’s ini. sebagian besar situs templates dan CMSs sudah melakukan ini untuk Anda — jika yours tidak, tambahkan ini.
melakukan ini memengaruhi SEO?
Tidak secara langsung. charset tag adalah tidak sebuah peringkat factor. tetapi jika sebuah wrong encoding garbles Anda text, itu rusak konten adalah apa pengguna see dan apa Google dapat end up pengindeksan dan menunjukkan — so ini adalah worth getting right bahkan though ini tidak akan move Anda up hasil oleh itself.
ingin spec detail — “pertama 1024 bytes” (terjemahan) “pertama 1024 bytes” aturan, mengapa old syntax masih hangs sekitar, dan bagaimana sebuah server header dapat diam-diam override Anda tag? Switch untuk Advanced tab.
periksa declared encoding dari command line
Replace URL, lalu bandingkan respons header dengan tag near mulai dari
HTML. sebuah charset di HTTP Content-Type header takes precedence di atas
di-document declaration.
url="https://example.com/"
curl -sSI "$url" | grep -i '^content-type:'
curl -sS "$url" | head -c 1024 | grep -oiE '<meta[^>]+charset[^>]*>'di sebuah browser console, ini reports parsed encoding, declared tag, dan
apakah itu tag adalah pertama element di <head>:
const charset = document.querySelector('meta[charset]');
console.table({
documentCharacterSet: document.characterSet,
declaredCharset: charset?.getAttribute('charset') ?? 'missing',
firstHeadElement: document.head.firstElementChild?.outerHTML ?? 'missing',
charsetIsFirst: document.head.firstElementChild === charset,
});console reflects browser’s parsed document. gunakan curl periksa sebagai well
ketika Anda perlu prove apa server sebenarnya dikirim.
Inspect respons sebelum debugging markup
gunakan header HTTP Checker untuk inspect langsung
Content-Type respons header. jika ini declares sebuah charset, bandingkan itu nilai dengan
<meta charset="utf-8">; sebuah conflict dapat jelaskan mojibake bahkan ketika HTML tag
looks correct.
untuk placement, gunakan View Sumber alih-alih hanya Elements panel. Konfirmasi
charset declaration adalah pertama child dari <head> dan muncul di dalam pertama
1 024 bytes dari document.
Validate sebuah charset perbaiki
Test 1 — Header dan tag agree
- Hypothesis: langsung respons dan HTML keduanya declare UTF-8.
- metode: periksa respons
Content-Typeheader, lalu inspect View Sumber untuk<meta charset="utf-8">. - Lulus condition: Tidak conflicting server-declared charset ada.
- Fail condition: header declares lainnya encoding atau tag adalah missing.
- Berikutnya tindakan: Perbaiki server header pertama, lalu retest langsung respons.
Test 2 — declaration adalah early cukup
- Hypothesis: browser sees tag sebelum ini memiliki untuk guess sebuah encoding.
- metode: Fetch pertama 1 024 bytes dan inspect mulai dari
<head>. - Lulus condition: menyelesaikan charset tag adalah di dalam itu bytes dan adalah
pertama element di
<head>. - Fail condition: Comments, injected scripts, atau lainnya markup push ini kemudian.
- Berikutnya tindakan: Move tag ahead dari semua nonessential head markup.
Test 3 — nyata characters render correctly
- Hypothesis: perbaiki eliminates mojibake di pengguna-terlihat dan dapat diindeks text.
- metode: Spot-periksa sebuah accented character, curly quote, em dash, non-Latin text, dan emoji pada langsung halaman dan di View Sumber.
- Lulus condition: setiap character renders sebagai authored setelah sebuah hard refresh.
- Fail condition: Replacement glyphs atau garbled byte sequences tetap.
- Berikutnya tindakan: Roll back encoding perubahan jika ini introduced corruption, lalu trace sumber file, template, database, dan respons header secara terpisah.
TL;DR —
Bukti untuk klaim ini For HTML documents, the charset declaration must identify UTF-8. Cakupan: Modern HTML conformance requirements. Tingkat keyakinan: tinggi · Diverifikasi: WHATWG HTML: Character encoding declaration Bukti untuk klaim ini The complete character-encoding declaration must occur within the first 1024 bytes of the document. Cakupan: HTML serialization requirement intended to make encoding available early to parsers. Tingkat keyakinan: tinggi · Diverifikasi: WHATWG HTML: Specifying the document's character encoding<meta charset="utf-8">declares document’s character encoding. WHATWG HTML spec memerlukan declaration untuk menjadi serialized completely di dalam pertama 1024 bytes dari document, dan untuk HTML5 nilai harus matchutf-8; best practice adalah placing ini sebagai literal pertama child dari<head>. sebuah missing, late, atau mismatched encoding produces mojibake — corrupted accented characters, curly quotes, non-Latin scripts, dan emoji — yang adalah sebuah rendering dan pengindeksan-correctness masalah, tidak sebuah sinyal peringkat. Google’s hanya publik line adalah “use Unicode/UTF-8 where possible.” (terjemahan) “gunakan Unicode/UTF-8 di mana mungkin.” sebuah server-dikirimContent-Typecharset header overrides di-document tag, yang adalah sebuah classic post-migration mojibake bug. hanya satu charset meta element adalah diizinkan per document, dan ini memiliki Tidak effect di XML. sebuah UTF-8 byte-order mark (BOM), jika present, wins di atas semuanya else; jika tidak header HTTP wins di atas di-halaman tag — penuh precedence order di bawah.
Apa tag adalah
«The charset declaration tells a parser which character encoding to use when it turns
the document’s bytes into text. The WHATWG HTML Living Standard puts it plainly: “The
charset attribute specifies the character encoding used by the document. This is a
character encoding declaration.” MDN’s framing is the practical version: “This
attribute declares the document’s character encoding.”
» (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh tiga, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)
modern syntax adalah pendek form:
<meta charset="utf-8">ada juga sebuah legacy pre-HTML5 form Anda’ll masih see di older templates:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Keduanya declare yang sama hal. pada sebuah modern HTML5 document Anda hanya perlu pendek
<meta charset="utf-8"> — menggunakan keduanya adalah redundant, tidak harmful, dan spec memungkinkan
hanya satu charset-declaring meta element per document anyway. ( http-equiv form adalah
best thought dari sebagai legacy alih-alih sesuatu untuk tambahkan fresh; jika Anda’re auditing sebuah halaman
itu memiliki ini, ini tidak rusak, ini adalah hanya old.)
spec requirements Anda sebenarnya perlu untuk know
«UTF-8 is effectively mandatory for HTML5. MDN states it directly: the attribute’s
“value must be an ASCII case-insensitive match for the string utf-8, because UTF-8
is the only valid encoding for HTML5 documents.” The WHATWG spec goes further and
requires the document’s actual encoding to be UTF-8 regardless of what’s declared.
UTF-8 covers essentially every script plus emoji, which is why the ISO-8859-1 /
Windows-1252 / Shift-JIS era of per-region encodings is over for new work — those
survive only as legacy compatibility cases.
» (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian lima puluh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)
ini harus land di pertama 1024 bytes dari document. ini adalah sebuah hard spec
requirement, tidak sebuah soft suggestion. MDN: “<meta> elements yang declare a character
encoding harus menjadi located entirely dalam itu pertama 1024 bytes dari itu document.” (terjemahan) “tidak terdefinisi elements yang declare sebuah character
encoding harus menjadi located entirely di dalam pertama 1024 bytes dari document.”
alasan adalah mechanical — parser sniffs byte stream untuk sebuah encoding sebelum ini
dapat safely interpret rest. jika Anda declaration menampilkan up too late, parser dapat
sudah memiliki committed untuk sebuah guessed encoding (atau memiliki untuk restart, yang costs
performa). Note framing dengan hati-hati: ini adalah pertama 1024 bytes dari entire
document, tidak hanya dari <head>.
Best practice beats spec minimum: membuat ini pertama child dari <head>. jangan
settle untuk “di suatu tempat di itu pertama 1024 bytes” (terjemahan) “di suatu tempat di pertama 1024 bytes” — put <meta charset="utf-8"> sebelum
Anda <title>, <link>, <script>, <style>, dan setiap lainnya tag. ini adalah
placement modern tooling memeriksa. ada sebuah open
Lighthouse issue (#10023)
proposing sebuah audit itu secara khusus memeriksa apakah <meta charset> equals
document.head.firstElementChild — i.e. flagging tag ketika ini tidak literal
pertama element di head, tidak merely ketika ini adalah missing. direction dari tooling adalah toward
memeriksa placement, tidak hanya presence.
hanya satu charset meta element per document, dan ** charset attribute memiliki Tidak
effect di XML/XHTML documents** (ini adalah permitted di sana hanya untuk ease migration untuk dan
dari XML). Worth sebuah caveat jika Anda’re berfungsi dengan XHTML-disajikan konten atau
RSS/Atom-berdekatan templates.
BOM, header HTTP, meta tag — precedence order
browser jangan hanya baca meta tag di isolation; encoding-sniffing algorithm memeriksa three sources di sebuah fixed order, dan pertama satu itu memberikan sebuah jawaban wins:
- sebuah UTF-8 byte-order mark (BOM) — sebuah sedikit bytes di very mulai dari file. jika browser detects sebuah BOM, itu determines encoding dengan certainty; tidak ada apa pun else adalah consulted.
- ** HTTP
Content-Typeheader’s charset**, jika server mengirim satu dan ada Tidak BOM. ini takes precedence di atas di-document meta declaration. - ** di-document
<meta charset>(atau legacyhttp-equiv) declaration**, diperiksa hanya jika neither dari di atas supplied sebuah encoding.
dalam praktik, BOMs adalah rare pada hand-authored HTML (mereka’re lebih umum sebagai sebuah artifact
dari certain text editors atau file-export alat), so header-vs-tag conflict adalah
satu itu bites sebagian besar sering: sebuah halaman itu correctly declares <meta charset="utf-8">
dapat masih render garbled jika sebuah CDN, proksi terbalik, atau misconfigured server mengirim sebuah
berbeda charset di header. ini adalah sebuah classic symptom right setelah sebuah server atau CDN
migration — HTML tidak perubahan, tetapi header melakukan, dan now header adalah
fighting tag. Ketika Anda’re debugging mojibake, periksa untuk sebuah BOM dan respons
header charset, tidak hanya halaman sumber.
adalah meta charset sebuah SEO peringkat factor?
Tidak — dan ini adalah worth menjadi blunt karena fear-based audit-alat copy sometimes implies jika tidak. ini adalah sebuah rendering- dan pengindeksan-correctness prerequisite, tidak sebuah peringkat sinyal.
Google’s guidance di sini adalah thin dan indirect dibandingkan dengan tags ini discusses constantly (judul, deskripsi meta, robots, canonical). tidak ada dedicated Google Penelusuran Central halaman tentang character encoding — ini adalah satu entry di dalam umum meta tags Google mendukung reference, di bawah “Konten-Jenis dan charset.” (terjemahan) “konten-jenis dan charset.” Google’s hanya pada-record line adalah sebuah recommendation, tidak sebuah peringkat claim: “We merekomendasikan menggunakan Unicode/UTF-8 di mana possible.” (terjemahan) “kami merekomendasikan menggunakan Unicode/UTF-8 di mana mungkin.” Tidak verbatim statement dari Mueller, Illyes, Splitt, atau Canel secara khusus naming “meta charset” (terjemahan) “meta charset” atau “mojibake” (terjemahan) “mojibake” surfaces di trade press atau Penelusuran Off Record archives — charset adalah treated sebagai basic web-standards hygiene, table stakes like valid markup, alih-alih sebuah topic warranting SEO commentary.
Bing memiliki Tidak distinct publik position pada pada-halaman tag either; -nya documentation
references UTF-8 hanya untuk -nya own API/feed formats (IndexNow key files, Webmaster API
permintaan headers), tidak sebagai guidance tentang HTML <meta charset> pada Anda halaman. Since
Bingbot adalah sebuah standard HTML parser, practical implication adalah yang sama: ikuti
HTML spec’s UTF-8 / 1024-byte aturan.
So di mana dapat ini hurt Anda? Indirectly, dan hanya ketika encoding adalah genuinely rusak: garbled text adalah sebuah konten-quality dan UX masalah, ini dapat corrupt apa muncul di snippets, dan severely rusak output dapat look rusak untuk Google’s pengindeksan sistem too. industry consensus, sebagai Ahrefs’ own meta-tags guide (oleh Joshua Hardwick) puts ini, adalah itu “unless Anda halaman adalah severely rusak sebagai a hasil dari charset issues (yang adalah unlikely), itu impact adalah going untuk menjadi quite minimal.” (terjemahan) “unless Anda halaman adalah severely rusak akibatnya dari charset issues (yang adalah unlikely), impact adalah going untuk menjadi quite minimal.” Perbaiki ini karena rusak text adalah buruk, tidak karena Anda expect sebuah peringkat bump.
cara periksa dan perbaiki ini
sebuah quick diagnostic path ketika Anda suspect sebuah encoding masalah:
- View sumber / DevTools. Konfirmasi
<meta charset="utf-8">ada dan adalah pertama child dari<head>. di DevTools, periksaContent-Typerespons header untuk sebuah charset nilai — jika ini disagrees dengan tag, header wins dan adalah Anda mungkin culprit. aturan out sebuah BOM too: ini adalah rarer, tetapi jika present ini beats keduanya header dan tag. - Validators dan crawler flag ini. W3C validator dan aturan-based checkers (e.g. Rocket Validator’s “charset setelah itu pertama 1024 bytes” (terjemahan) “charset setelah pertama 1024 bytes” aturan) akan panggil out sebuah late atau missing declaration. situs audits di Ahrefs situs Audit dan Screaming Frog surface charset issues di seluruh sebuah seluruh situs.
- Perbaiki right layer. jika placement adalah wrong, move tag untuk top dari head.
jika encoding adalah wrong ( bytes themselves tidak UTF-8, atau header mengirim sebuah
conflicting charset), memperbaiki meta tag alone tidak akan help — Anda memiliki untuk re-encode
file sebagai UTF-8 dan/atau correct server’s
Content-Typeheader so header dan tag agree.
perbaiki adalah hampir selalu trivial setelah Anda’ve identified yang layer adalah di fault. ini adalah sebuah stable, panjang-settled bagian dari HTML spec — ada Tidak recent deprecation atau platform-perilaku perubahan untuk track; satu-satunya evolving nuance adalah tooling increasingly memeriksa placement, tidak hanya presence.
Di mana ini sits
charset tag adalah satu dari browser-facing head elements — like viewport tag, ini adalah tentang rendering, tidak peringkat, yang puts ini di sebuah berbeda bucket dari SEO-active tags di meta-tags cluster ( judul element, deskripsi meta, dan robots family). ini adalah berdekatan untuk internationalization berfungsi I spend sebuah lot dari time pada: encoding adalah layer underneath hreflang dan multi-script konten — hreflang tells Google yang language/region versi untuk sajikan, tetapi jika encoding adalah wrong text di itu versi adalah garbled regardless. untuk penuh map dari head elements grouped oleh job mereka melakukan, see meta tags hub.
AI summary
sebuah condensed take pada Advanced versi:
- Apa ini adalah:
<meta charset="utf-8">declares document’s character encoding so browser dan crawler map mentah bytes untuk correct characters. - Spec aturan: declaration harus sit di dalam pertama 1024 bytes dari seluruh
document; HTML5 memerlukan nilai untuk menjadi
utf-8(dan sebenarnya encoding untuk menjadi UTF-8). Best practice: literal pertama child dari<head>. hanya satu charset meta element per document; ini memiliki Tidak effect di XML/XHTML. - Legacy syntax:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">adalah older pre-HTML5 form — redundant pada modern halaman; gunakan pendek form. Anda tidak perlu keduanya. - Precedence order: sebuah UTF-8 BOM, jika present, wins di atas semuanya; jika tidak sebuah
server-dikirim
Content-Typecharset overrides di-halaman tag — sebuah classic post-migration mojibake bug. Debug header (dan periksa untuk sebuah BOM), tidak hanya sumber. - mengapa ini penting: sebuah missing/late/mismatched encoding penyebab mojibake (garbled accents, curly quotes, non-Latin scripts, emoji) — sebuah rendering/pengindeksan-correctness issue, tidak sebuah peringkat factor.
- Apa Google says: hanya sebuah indirect line — “We recommend using Unicode/UTF-8 where possible.” (terjemahan) “kami merekomendasikan menggunakan Unicode/UTF-8 di mana mungkin.” Tidak dedicated doc, Tidak rep quote pada charset/mojibake. Bing memiliki Tidak distinct pada-halaman position. Industry framing (Ahrefs): impact adalah minimal unless halaman adalah “severely broken.” (terjemahan) “severely rusak.”
- Diagnose: view-sumber/DevTools untuk tag dan respons-header charset; validators (W3C, Rocket Validator) dan situs audits (Ahrefs, Screaming Frog) flag late atau missing declarations. Perbaiki right layer — placement vs. sebenarnya encoding/header.
Dokumentasi resmi
Utama-sumber dan spec documentation.
Standards (WHATWG / MDN)
- HTML Standard (WHATWG) — Specifying document’s character encoding — normative aturan: charset declaration, pertama-1024-bytes requirement, UTF-8, satu-per-document limit, dan XML exception.
- HTML Standard (WHATWG) — Determining character encoding — encoding-sniffing algorithm: BOM detection pertama, lalu HTTP-tingkat
Content-Typecharset, lalu di-document meta declaration. - MDN —
<meta>: metadata element — plain-language reference:utf-8-hanya untuk HTML5, 1024-byte aturan, dan legacyhttp-equivform.
- Meta tags dan HTML attributes itu Google mendukung — satu-satunya Google guidance touching charset, di bawah “Content-Type and charset” (terjemahan) “konten-jenis dan charset”: accepted
http-equivdancharsetforms dan “use Unicode/UTF-8 where possible” (terjemahan) “gunakan Unicode/UTF-8 di mana mungkin” recommendation.
Bing / Microsoft
- IndexNow — getting dimulai — Bing references UTF-8 hanya untuk -nya own API/key-file formats, tidak sebagai pada-halaman HTML guidance. tidak ada dedicated Bing doc pada
<meta charset>tag.
Tooling
- Lighthouse issue #10023 — warn tentang late atau missing
<meta charset>— proposed audit memeriksa apakah charset tag adalahdocument.head.firstElementChild.
Quotes dari sumber
pada—record statements dari HTML spec, MDN, dan Google. setiap tautan adalah sebuah deep tautan itu jumps untuk quoted passage di mana sumber mendukung ini.
WHATWG HTML Standard — apa tag adalah
«- “The charset attribute specifies the character encoding used by the document. This is a character encoding declaration.”
— HTML Living Standard (WHATWG).
Source
» (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh tujuh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)
MDN — encoding dan placement aturan
- “Ini attribute declares itu document’s character encoding. Jika itu attribute adalah present, its value harus menjadi an ASCII case-insensitive match untuk itu string
utf-8, karena UTF-8 adalah itu hanya valid encoding untuk HTML5 documents.<meta>elements yang declare a character encoding harus menjadi located entirely dalam itu pertama 1024 bytes dari itu document.” (terjemahan) “ini attribute declares document’s character encoding. jika attribute adalah present, -nya nilai harus menjadi sebuah ASCII case-insensitive match untuk string tidak terdefinisi, karena UTF-8 adalah satu-satunya valid encoding untuk HTML5 documents. tidak terdefinisi elements yang declare sebuah character encoding harus menjadi located entirely di dalam pertama 1024 bytes dari document.” — MDN Web Docs, “<meta>: itu metadata element.” (terjemahan) “tidak terdefinisi: metadata element.” Jump untuk quote
Google — (thin) official position
«- “These tags define the page’s content type and character set respectively. Make sure that you surround the value of the content attribute in the http-equiv meta tag with quotes—otherwise the charset attribute may be interpreted incorrectly. We recommend using Unicode/UTF-8 where possible.”
— Google Search Central, “Meta tags and attributes that Google supports.”
Jump to quote
» (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sembilan puluh satu, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)
Industry — honest framing dari SEO impact
- “Unless your page is severely broken as a result of charset issues (which is unlikely), the impact is going to be quite minimal.” (terjemahan) “Unless Anda halaman adalah severely rusak akibatnya dari charset issues (yang adalah unlikely), impact adalah going untuk menjadi quite minimal.” — Ahrefs Blog, “Meta Tags for SEO: A Simple Guide for Beginners” (terjemahan) “Meta Tags untuk SEO: sebuah sederhana Guide untuk Beginners” (Joshua Hardwick). Sumber
Meta charset audit — checklist
sebuah quick lulus untuk konfirmasi Anda halaman declare dan render encoding correctly:
- setiap halaman memiliki
<meta charset="utf-8">di<head>. - charset tag adalah pertama child dari
<head>— sebelum<title>,<link>,<script>,<style>, dan apa pun lainnya<meta>. - declaration lands di dalam pertama 1024 bytes dari document (ini akan jika ini adalah pertama child dari head).
- nilai adalah
utf-8— tidak ISO-8859-1, Windows-1252, atau sebuah per-region code halaman. - file itself adalah sebenarnya saved/disajikan sebagai UTF-8 ( declaration dan nyata byte encoding harus agree).
- hanya satu charset meta element per halaman.
- server’s
Content-Typerespons header charset agrees dengan tag ( header wins di atas tag jika mereka conflict) — verify di DevTools, terutama setelah apa pun CDN atau server migration. - Tidak stray UTF-8 byte-order mark (BOM) di mulai dari file — rare, tetapi jika present ini outranks keduanya header dan tag.
- Spot-periksa halaman dengan non-ASCII konten (accents, curly quotes, non-Latin scripts, emoji) — plain English dapat look fine bahkan ketika encoding adalah rusak.
- Ran halaman melalui W3C validator / sebuah crawler (Ahrefs situs Audit, Screaming Frog) untuk catch late atau missing declarations di scale.
- jangan tambahkan legacy
http-equiv="Content-Type"form fresh — pendek<meta charset="utf-8">adalah cukup.
Meta charset cheat sheet
** dua syntaxes**
| Form | Syntax | gunakan ini? |
|---|---|---|
| Modern (HTML5) | <meta charset="utf-8"> | Ya — ini adalah apa Anda ingin |
| Legacy (pre-HTML5) | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | Tidak untuk baru berfungsi; redundant, hanya satu needed |
** aturan itu penting**
| aturan | detail |
|---|---|
| nilai | harus menjadi utf-8 untuk HTML5 (spec memerlukan sebenarnya encoding untuk menjadi UTF-8 too) |
| Placement (spec minimum) | di dalam pertama 1024 bytes dari document |
| Placement (best practice) | literal pertama child dari <head> |
| Count | Satu charset meta element per document — Tidak lebih |
| XML/XHTML | charset attribute memiliki Tidak effect di XML documents |
| Precedence | sebuah UTF-8 BOM wins di atas semuanya; else sebuah server Content-Type header charset overrides di-halaman tag |
Fast facts
- Wrong/missing/late encoding → mojibake (garbled accents, curly quotes, non-Latin scripts, emoji). Plain ASCII English dapat masih look fine — bug hides.
- Tidak sebuah peringkat factor. Google’s hanya line: “use Unicode/UTF-8 where possible.” (terjemahan) “gunakan Unicode/UTF-8 di mana mungkin.”
- Impact adalah minimal unless halaman adalah severely rusak (Ahrefs) — tetapi rusak text adalah masih worth memperbaiki untuk pengguna dan pengindeksan.
- Debugging mojibake? periksa untuk sebuah BOM pertama, lalu respons-header charset, tidak hanya view-sumber — BOM beats header, dan header beats tag.
- Tooling adalah moving toward memeriksa placement (pertama child dari head), tidak hanya presence (see Lighthouse #10023).
Uji pemahaman Anda: Meta Charset Tag
Five quick pertanyaan pada character encoding dan charset tag. Pick sebuah jawaban untuk setiap, lalu periksa.
Log perubahan
Diperbarui 18 Jul 2026.
Ringkasan editorial dan detail perubahan yang tercatat.Detail perubahan
-
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
Perbandingan lengkap tidak tersedia — tidak ada cuplikan sebelumnya yang diarsipkan untuk revisi ini.