[{"data":1,"prerenderedAt":771},["ShallowReactive",2],{"guide-url-encoding-international-characters":3},{"id":4,"title":5,"body":6,"date":763,"description":764,"extension":765,"meta":766,"navigation":434,"path":767,"readingTime":206,"seo":768,"stem":769,"__hash__":770},"guides\u002Fguides\u002Furl-encoding-international-characters.md","URL Encoding for International Characters Explained",{"type":7,"value":8,"toc":748},"minimark",[9,14,18,21,25,30,33,55,226,230,346,350,357,365,376,380,391,465,469,516,525,529,532,627,634,683,687,690,696,699,703,726,730,739,744],[10,11,13],"h2",{"id":12},"urls-and-the-ascii-limitation","URLs and the ASCII Limitation",[15,16,17],"p",{},"URLs were originally designed to carry only ASCII characters — letters, digits, and a limited set of symbols. RFC 3986 defines the allowed character set, and anything outside it must be percent-encoded.",[15,19,20],{},"This limitation becomes obvious when you work with international content. A Chinese character, an Arabic letter, or an accented Latin character cannot appear in a URL without encoding. The браузер (browser) handles this transparently most of the time, but understanding the mechanics helps you debug broken links and build correct URLs programmatically.",[10,22,24],{"id":23},"how-utf-8-percent-encoding-works","How UTF-8 Percent Encoding Works",[26,27,29],"h3",{"id":28},"the-two-step-process","The Two-Step Process",[15,31,32],{},"Encoding an international character for URLs involves two steps:",[34,35,36,44],"ol",{},[37,38,39,43],"li",{},[40,41,42],"strong",{},"Convert to UTF-8 bytes"," — Each Unicode character becomes 1 to 4 bytes",[37,45,46,49,50,54],{},[40,47,48],{},"Percent-encode each byte"," — Each byte becomes ",[51,52,53],"code",{},"%XX"," where XX is the hexadecimal value",[56,57,62],"pre",{"className":58,"code":59,"language":60,"meta":61,"style":61},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Manual encoding example for the Chinese character 中\nconst char = '中';\nconst utf8Bytes = new TextEncoder().encode(char); \u002F\u002F [0xE4, 0xB8, 0xAD]\nconst encoded = Array.from(utf8Bytes)\n  .map(b => '%' + b.toString(16).toUpperCase().padStart(2, '0'))\n  .join('');\n\u002F\u002F Result: %E4%B8%AD\n","javascript","",[51,63,64,73,95,124,143,204,220],{"__ignoreMap":61},[65,66,69],"span",{"class":67,"line":68},"line",1,[65,70,72],{"class":71},"sJ8bj","\u002F\u002F Manual encoding example for the Chinese character 中\n",[65,74,76,80,84,87,91],{"class":67,"line":75},2,[65,77,79],{"class":78},"szBVR","const",[65,81,83],{"class":82},"sj4cs"," char",[65,85,86],{"class":78}," =",[65,88,90],{"class":89},"sZZnC"," '中'",[65,92,94],{"class":93},"sVt8B",";\n",[65,96,98,100,103,105,108,112,115,118,121],{"class":67,"line":97},3,[65,99,79],{"class":78},[65,101,102],{"class":82}," utf8Bytes",[65,104,86],{"class":78},[65,106,107],{"class":78}," new",[65,109,111],{"class":110},"sScJk"," TextEncoder",[65,113,114],{"class":93},"().",[65,116,117],{"class":110},"encode",[65,119,120],{"class":93},"(char); ",[65,122,123],{"class":71},"\u002F\u002F [0xE4, 0xB8, 0xAD]\n",[65,125,127,129,132,134,137,140],{"class":67,"line":126},4,[65,128,79],{"class":78},[65,130,131],{"class":82}," encoded",[65,133,86],{"class":78},[65,135,136],{"class":93}," Array.",[65,138,139],{"class":110},"from",[65,141,142],{"class":93},"(utf8Bytes)\n",[65,144,146,149,152,155,159,162,165,168,171,174,176,179,182,185,187,190,192,195,198,201],{"class":67,"line":145},5,[65,147,148],{"class":93},"  .",[65,150,151],{"class":110},"map",[65,153,154],{"class":93},"(",[65,156,158],{"class":157},"s4XuR","b",[65,160,161],{"class":78}," =>",[65,163,164],{"class":89}," '%'",[65,166,167],{"class":78}," +",[65,169,170],{"class":93}," b.",[65,172,173],{"class":110},"toString",[65,175,154],{"class":93},[65,177,178],{"class":82},"16",[65,180,181],{"class":93},").",[65,183,184],{"class":110},"toUpperCase",[65,186,114],{"class":93},[65,188,189],{"class":110},"padStart",[65,191,154],{"class":93},[65,193,194],{"class":82},"2",[65,196,197],{"class":93},", ",[65,199,200],{"class":89},"'0'",[65,202,203],{"class":93},"))\n",[65,205,207,209,212,214,217],{"class":67,"line":206},6,[65,208,148],{"class":93},[65,210,211],{"class":110},"join",[65,213,154],{"class":93},[65,215,216],{"class":89},"''",[65,218,219],{"class":93},");\n",[65,221,223],{"class":67,"line":222},7,[65,224,225],{"class":71},"\u002F\u002F Result: %E4%B8%AD\n",[26,227,229],{"id":228},"examples-by-language","Examples by Language",[231,232,233,252],"table",{},[234,235,236],"thead",{},[237,238,239,243,246,249],"tr",{},[240,241,242],"th",{},"Character",[240,244,245],{},"Language",[240,247,248],{},"UTF-8 Bytes",[240,250,251],{},"Encoded URL",[253,254,255,274,292,310,328],"tbody",{},[237,256,257,261,264,269],{},[258,259,260],"td",{},"café",[258,262,263],{},"French",[258,265,266],{},[51,267,268],{},"63 61 66 C3 A9",[258,270,271],{},[51,272,273],{},"caf%C3%A9",[237,275,276,279,282,287],{},[258,277,278],{},"中",[258,280,281],{},"Chinese",[258,283,284],{},[51,285,286],{},"E4 B8 AD",[258,288,289],{},[51,290,291],{},"%E4%B8%AD",[237,293,294,297,300,305],{},[258,295,296],{},"مرحبا",[258,298,299],{},"Arabic",[258,301,302],{},[51,303,304],{},"D9 85 D8 B1 D8 AD D8 A8 D8 A7",[258,306,307],{},[51,308,309],{},"%D9%85%D8%B1%D8%AD%D8%A8%D8%A7",[237,311,312,315,318,323],{},[258,313,314],{},"München",[258,316,317],{},"German",[258,319,320],{},[51,321,322],{},"4D C3 BC 6E 63 68 65 6E",[258,324,325],{},[51,326,327],{},"M%C3%BCnchen",[237,329,330,333,336,341],{},[258,331,332],{},"東京",[258,334,335],{},"Japanese",[258,337,338],{},[51,339,340],{},"E6 9D B1 E4 BA AC",[258,342,343],{},[51,344,345],{},"%E6%9D%B1%E4%BA%AC",[10,347,349],{"id":348},"internationalized-domain-names-idns","Internationalized Domain Names (IDNs)",[15,351,352,353,356],{},"Domain names with international characters use a separate encoding called ",[40,354,355],{},"Punycode"," rather than percent-encoding. The browser displays the Unicode form but resolves the domain using its ASCII representation.",[56,358,363],{"className":359,"code":361,"language":362},[360],"language-text","Unicode:    пример.рф\nPunycode:   xn--e1afmkfd.xn--p1acf\n","text",[51,364,361],{"__ignoreMap":61},[15,366,367,368,371,372,375],{},"This distinction matters: percent-encoding applies to the ",[40,369,370],{},"path and query"," portions of a URL, while Punycode applies to the ",[40,373,374],{},"hostname",". Mixing them up causes resolution failures.",[10,377,379],{"id":378},"query-parameters-with-international-text","Query Parameters with International Text",[15,381,382,383,386,387,390],{},"When sending international text in query parameters, always encode the value, not the entire URL. The ",[51,384,385],{},"="," and ",[51,388,389],{},"&"," delimiters must remain unencoded:",[56,392,394],{"className":58,"code":393,"language":60,"meta":61,"style":61},"\u002F\u002F Correct: encode only the value\nconst query = 'q=' + encodeURIComponent('München');\n\u002F\u002F \"q=M%C3%BCnchen\"\n\n\u002F\u002F Wrong: encoding the entire URL breaks the structure\nconst broken = encodeURI('https:\u002F\u002Fexample.com\u002Fsearch?q=München');\n\u002F\u002F This works but is fragile — encodeURI won't encode ?, #, &, =\n",[51,395,396,401,425,430,436,441,460],{"__ignoreMap":61},[65,397,398],{"class":67,"line":68},[65,399,400],{"class":71},"\u002F\u002F Correct: encode only the value\n",[65,402,403,405,408,410,413,415,418,420,423],{"class":67,"line":75},[65,404,79],{"class":78},[65,406,407],{"class":82}," query",[65,409,86],{"class":78},[65,411,412],{"class":89}," 'q='",[65,414,167],{"class":78},[65,416,417],{"class":110}," encodeURIComponent",[65,419,154],{"class":93},[65,421,422],{"class":89},"'München'",[65,424,219],{"class":93},[65,426,427],{"class":67,"line":97},[65,428,429],{"class":71},"\u002F\u002F \"q=M%C3%BCnchen\"\n",[65,431,432],{"class":67,"line":126},[65,433,435],{"emptyLinePlaceholder":434},true,"\n",[65,437,438],{"class":67,"line":145},[65,439,440],{"class":71},"\u002F\u002F Wrong: encoding the entire URL breaks the structure\n",[65,442,443,445,448,450,453,455,458],{"class":67,"line":206},[65,444,79],{"class":78},[65,446,447],{"class":82}," broken",[65,449,86],{"class":78},[65,451,452],{"class":110}," encodeURI",[65,454,154],{"class":93},[65,456,457],{"class":89},"'https:\u002F\u002Fexample.com\u002Fsearch?q=München'",[65,459,219],{"class":93},[65,461,462],{"class":67,"line":222},[65,463,464],{"class":71},"\u002F\u002F This works but is fragile — encodeURI won't encode ?, #, &, =\n",[26,466,468],{"id":467},"encodeuricomponent-vs-encodeuri","encodeURIComponent vs encodeURI",[231,470,471,484],{},[234,472,473],{},[237,474,475,478,481],{},[240,476,477],{},"Function",[240,479,480],{},"Encodes",[240,482,483],{},"Leaves Unencoded",[253,485,486,501],{},[237,487,488,493,496],{},[258,489,490],{},[51,491,492],{},"encodeURI",[258,494,495],{},"International chars, spaces",[258,497,498],{},[51,499,500],{},": \u002F ? # [ ] @ ! $ & ' ( ) * + , ; =",[237,502,503,508,511],{},[258,504,505],{},[51,506,507],{},"encodeURIComponent",[258,509,510],{},"International chars, spaces, and all special chars",[258,512,513],{},[51,514,515],{},"~ ! ' ( ) *",[15,517,518,519,521,522,524],{},"Use ",[51,520,507],{}," for query parameter values. Use ",[51,523,492],{}," only when you need to encode a full URL while preserving its structure.",[10,526,528],{"id":527},"server-side-decoding","Server-Side Decoding",[15,530,531],{},"Most web frameworks automatically decode percent-encoded URL components. In Node.js:",[56,533,535],{"className":58,"code":534,"language":60,"meta":61,"style":61},"\u002F\u002F Express automatically decodes route parameters\napp.get('\u002Fsearch\u002F:query', (req, res) => {\n  const decoded = req.params.query; \u002F\u002F Already decoded from %C3%BC to ü\n});\n\n\u002F\u002F Manual decoding when needed\nconst decoded = decodeURIComponent('M%C3%BCnchen'); \u002F\u002F \"München\"\n",[51,536,537,542,575,591,596,600,605],{"__ignoreMap":61},[65,538,539],{"class":67,"line":68},[65,540,541],{"class":71},"\u002F\u002F Express automatically decodes route parameters\n",[65,543,544,547,550,552,555,558,561,563,566,569,572],{"class":67,"line":75},[65,545,546],{"class":93},"app.",[65,548,549],{"class":110},"get",[65,551,154],{"class":93},[65,553,554],{"class":89},"'\u002Fsearch\u002F:query'",[65,556,557],{"class":93},", (",[65,559,560],{"class":157},"req",[65,562,197],{"class":93},[65,564,565],{"class":157},"res",[65,567,568],{"class":93},") ",[65,570,571],{"class":78},"=>",[65,573,574],{"class":93}," {\n",[65,576,577,580,583,585,588],{"class":67,"line":97},[65,578,579],{"class":78},"  const",[65,581,582],{"class":82}," decoded",[65,584,86],{"class":78},[65,586,587],{"class":93}," req.params.query; ",[65,589,590],{"class":71},"\u002F\u002F Already decoded from %C3%BC to ü\n",[65,592,593],{"class":67,"line":126},[65,594,595],{"class":93},"});\n",[65,597,598],{"class":67,"line":145},[65,599,435],{"emptyLinePlaceholder":434},[65,601,602],{"class":67,"line":206},[65,603,604],{"class":71},"\u002F\u002F Manual decoding when needed\n",[65,606,607,609,611,613,616,618,621,624],{"class":67,"line":222},[65,608,79],{"class":78},[65,610,582],{"class":82},[65,612,86],{"class":78},[65,614,615],{"class":110}," decodeURIComponent",[65,617,154],{"class":93},[65,619,620],{"class":89},"'M%C3%BCnchen'",[65,622,623],{"class":93},"); ",[65,625,626],{"class":71},"\u002F\u002F \"München\"\n",[15,628,629,630,633],{},"Be cautious with double-encoding. If you encode a value that is already encoded, the ",[51,631,632],{},"%"," signs themselves get encoded, producing broken output:",[56,635,637],{"className":58,"code":636,"language":60,"meta":61,"style":61},"\u002F\u002F Double encoding problem\nconst once = encodeURIComponent('café');  \u002F\u002F \"caf%C3%A9\"\nconst twice = encodeURIComponent(once);    \u002F\u002F \"caf%25C3%25A9\" — broken\n",[51,638,639,644,666],{"__ignoreMap":61},[65,640,641],{"class":67,"line":68},[65,642,643],{"class":71},"\u002F\u002F Double encoding problem\n",[65,645,646,648,651,653,655,657,660,663],{"class":67,"line":75},[65,647,79],{"class":78},[65,649,650],{"class":82}," once",[65,652,86],{"class":78},[65,654,417],{"class":110},[65,656,154],{"class":93},[65,658,659],{"class":89},"'café'",[65,661,662],{"class":93},");  ",[65,664,665],{"class":71},"\u002F\u002F \"caf%C3%A9\"\n",[65,667,668,670,673,675,677,680],{"class":67,"line":97},[65,669,79],{"class":78},[65,671,672],{"class":82}," twice",[65,674,86],{"class":78},[65,676,417],{"class":110},[65,678,679],{"class":93},"(once);    ",[65,681,682],{"class":71},"\u002F\u002F \"caf%25C3%25A9\" — broken\n",[10,684,686],{"id":685},"seo-considerations-for-international-urls","SEO Considerations for International URLs",[15,688,689],{},"Google recommends using UTF-8 encoded URLs for non-ASCII characters rather than converting to ASCII approximations. The search engine displays the decoded Unicode characters in results, making the URL more readable for users.",[56,691,694],{"className":692,"code":693,"language":362},[360],"Preferred: https:\u002F\u002Fexample.com\u002Fcaf%C3%A9\nAvoid:     https:\u002F\u002Fexample.com\u002Fcafe\n",[51,695,693],{"__ignoreMap":61},[15,697,698],{},"Slug-based URLs often transliterate international characters to ASCII for simplicity. This approach works but sacrifices readability for non-Latin scripts.",[10,700,702],{"id":701},"key-takeaways","Key Takeaways",[704,705,706,709,712,720,723],"ul",{},[37,707,708],{},"URL encoding for international characters converts Unicode to UTF-8 bytes, then percent-encodes each byte",[37,710,711],{},"Domain names use Punycode, not percent-encoding — the two systems are separate",[37,713,518,714,716,717,719],{},[51,715,507],{}," for query values, ",[51,718,492],{}," for full URLs",[37,721,722],{},"Double-encoding breaks URLs — decode before re-encoding",[37,724,725],{},"Google handles UTF-8 encoded URLs well and displays Unicode in search results",[10,727,729],{"id":728},"try-it-yourself","Try It Yourself",[15,731,732,733,738],{},"Need to encode international characters in URLs? Use our free ",[734,735,737],"a",{"href":736},"\u002Ftools\u002Furl-encoder","URL Encoder"," to percent-encode any text instantly. Supports Unicode, Chinese, Arabic, and all international character sets — all processing happens locally in your browser.",[15,740,741],{},[734,742,743],{"href":736},"Try the URL Encoder →",[745,746,747],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":61,"searchDepth":75,"depth":75,"links":749},[750,751,755,756,759,760,761,762],{"id":12,"depth":75,"text":13},{"id":23,"depth":75,"text":24,"children":752},[753,754],{"id":28,"depth":97,"text":29},{"id":228,"depth":97,"text":229},{"id":348,"depth":75,"text":349},{"id":378,"depth":75,"text":379,"children":757},[758],{"id":467,"depth":97,"text":468},{"id":527,"depth":75,"text":528},{"id":685,"depth":75,"text":686},{"id":701,"depth":75,"text":702},{"id":728,"depth":75,"text":729},"2026-05-28","Learn how URL encoding handles international characters, Unicode, and non-ASCII text. Understand UTF-8 percent encoding for multilingual URLs.","md",{"immutable":434},"\u002Fguides\u002Furl-encoding-international-characters",{"title":5,"description":764},"guides\u002Furl-encoding-international-characters","XJeVyNqzN6wiQd0fLk7XHyDFDqU2m63h5LbO9IX7neI",1780401337875]