A bilingual site is not a translated site. Translation is the smallest part of the work, and treating it as the whole is why so many Arabic versions read and look like an afterthought.
URL structure comes first
Give each language its own address. A path prefix such as /ar/ is the most common and the easiest to maintain. What does not work is serving different languages at the same URL based on browser settings, because search engines cannot index two versions of one address, and a user who wants the other language cannot link to it.
Tell search engines the versions are pairs
Use hreflang to link each page to its counterpart. Without it, the two versions can be read as duplicates, or the wrong one gets served to the wrong audience.
One rule that is broken constantly: only declare hreflang where a genuine equivalent exists. Pointing at a page that does not exist is worse than declaring nothing.
Right-to-left is a layout change, not a text change
Setting dir="rtl" flips the reading order, but the layout only follows if it was built with logical properties. Use inline-start and inline-end rather than left and right, and text-align: start rather than left. A layout built on physical directions will mirror the text and leave the furniture behind, which reads as a broken page.
Directional icons need attention too. Arrows that mean "back" or "next" must point the other way; a magnifying glass does not.
Typography is where most Arabic sites fail
Latin typefaces have no Arabic glyphs, so if you do not load an Arabic face the browser silently substitutes whatever the operating system has. Your site then looks different on every visitor's screen.
The single most damaging mistake is letter-spacing. Arabic is cursive: the letters join. Applying tracking pulls those joins apart and renders words as a row of disconnected shapes. Any tracking in your design system has to be reset for Arabic. Arabic also needs more line-height than Latin, because its ascenders and descenders travel further.
Mixed-direction text
Arabic business writing is full of untranslated English terms. Declare the base direction on the block and let the bidi algorithm order the embedded Latin run inside it; that is what it is for. Avoid re-deriving direction per block from its first character, because an Arabic sentence that opens with an English product name will flip entirely and strand its punctuation.
Watch the interface strings too. "2 min read" set inside a right-to-left line resolves to "min read 2", because the digits are reordered against the Latin words. The fix is to translate the interface, not to fight it with CSS.
Frequently asked questions
Do I need every page in both languages?
No. Translate what serves the audience, and do not declare pairs for pages that only exist in one language.
Is machine translation acceptable?
As a first draft reviewed by a native speaker, yes. Published unreviewed, it damages credibility faster than having no Arabic version.
