Hong Kong · 8 min read
URLs, hreflang, Chinese typography, font loading and editorial workflow: a practical guide to building a bilingual website for a Hong Kong business.
By Chris ·
Most bilingual websites in Hong Kong are an English site with a Chinese translation bolted on. You can tell within a minute: the Chinese menu wraps onto two lines, a heading breaks mid-phrase, half the forms still show English labels, and the “最新消息” page stopped being updated in 2023.
For a professional firm, that is not a cosmetic problem. A Chinese-reading client who lands on a neglected version draws a reasonable conclusion: this firm does not really work in my language. Here is how to structure a bilingual site so both versions are genuinely first-class.
1. Give each language its own URL
Search engines index URLs, not language toggles. If your Chinese content only appears after JavaScript swaps the text, or lives at the same URL as the English, it will be poorly indexed or not indexed at all.
Use a separate path for each language on the same domain:
- /en/ for English
- /zh-hk/ for Traditional Chinese
Subfolders keep all your authority on one domain, which matters if your firm does not have hundreds of sites linking to it. Separate domains for each language split that authority and double the maintenance.
2. Tell search engines how the versions relate
Each page should declare its alternate-language versions with hreflang, and each version should point back. A typical set for a practice-area page:
hreflang="en-HK"→ the English pagehreflang="zh-HK"→ the Traditional Chinese pagehreflang="x-default"→ whichever version should catch everyone else
Set the matching lang attribute on each page (en-HK or zh-HK) and translate the title, meta description, image alt text and structured data, not just the body copy. Each language version should also have its own self-referencing canonical. A common mistake is pointing the Chinese canonical at the English page, which tells Google to ignore the Chinese version entirely.
3. Do not auto-redirect by location
It is tempting to detect a visitor’s location or browser language and redirect them. Do not. Search engine crawlers mostly crawl from outside Hong Kong and may never see your Chinese pages, and an English-reading expatriate in Causeway Bay does not want to be forced into Chinese. Offer a clear, persistent language switcher and let people choose.
4. Treat Chinese typography as its own discipline
Traditional Chinese is not English with different characters. A few details make the difference between a page that looks considered and one that looks translated:
- Line height. Chinese text usually needs more generous leading than English, often around 1.7 to 1.8.
- No italics. Chinese fonts have no true italic, so browsers fake a slanted version that looks wrong. Use weight or colour for emphasis instead.
- Full-width punctuation. Use 「」 and ， 。 consistently, and make sure your CMS does not convert them.
- Line length and breaks. Chinese has no spaces between words, so headings can break in awkward places. Check every heading at every screen width.
5. Load Chinese fonts carefully
A full Traditional Chinese font can weigh several megabytes. Load it naively and your Chinese pages will be dramatically slower than your English ones, especially on mobile.
Two sensible approaches:
- System fonts. A font stack such as PingFang HK, Microsoft JhengHei and Noto Sans TC uses fonts already on the visitor’s device. It is fast and reliable.
- Subset web fonts. If the brand needs a specific typeface, serve it in small subsets (by Unicode range) so the browser only downloads the characters on the page.
Test the Chinese pages on a mid-range phone on mobile data, not just on a studio laptop.
6. Decide on the register of the Chinese
Professional firms almost always use formal written Chinese rather than colloquial Cantonese. Decide this up front, write it into a short style guide (including how the firm’s name, partners’ names and practice areas are rendered) and make sure every translator follows it.
7. Build a workflow that keeps both versions in step
Bilingual sites usually fail through drift, not on launch day. Someone updates an English partner profile and the Chinese version is never touched. Build the workflow into the CMS:
- Link each page to its translation, so an edit to one flags the other as outdated
- Show editors a simple list of pages where the two languages have drifted apart
- Assign a named owner for each language
8. Do not forget the enquiry route
A Chinese-language visitor should be able to make an enquiry in Chinese and receive an answer in Chinese. Translate the forms, the confirmation messages and the auto-reply emails, and route Chinese enquiries to someone who can respond in kind. Where you collect personal data, present your Personal Information Collection Statement in both languages.
The short version
Separate URLs, correct hreflang, real Chinese typography, careful font loading and a workflow that stops drift. Get those right and both versions of your firm look like they were built on purpose.
More on how we approach this for Hong Kong businesses and for local-market websites in general. If you are planning a bilingual site and want a second pair of eyes on the structure, get in touch.
