Why Arabic websites need more than a mirrored template
Most Arabic websites that feel wrong were built in English first and flipped at the end. A single direction rule moves the logo and menu to the right, but it leaves behind hard-coded margins, arrows pointing the wrong way, sliders that move backwards and form labels that sit on the wrong side of their fields. Visitors notice within seconds, and in markets where Arabic is the first language, that impression shapes trust in the business.
We build Arabic and multilingual websites with both directions in mind from the first wireframe. The html element carries the correct lang and dir values for each language. Stylesheets use CSS logical properties, such as margin-inline-start and padding-inline-end, so one set of components works in both left-to-right and right-to-left layouts. Every template is designed, built and tested in Arabic as well as English or French, not converted after sign-off.
Bidirectional text, numbers and brand names
Arabic pages rarely contain only Arabic. Prices, phone numbers, dates, product codes, email addresses and Latin brand names all appear inside right-to-left sentences, and without care they can display out of order. A phone number that reverses or a price whose currency sign jumps to the wrong side is more than a cosmetic bug.
We isolate mixed-direction content in the markup, set input fields to the direction their content needs, and agree per market whether to use Western digits or Eastern Arabic digits. Icons get the same attention. Directional icons such as back and next arrows mirror, while logos, play buttons, checkmarks and most charts stay as designed.
Arabic fonts that read well and load fast
Arabic script has connected letters, diacritics and taller ascenders and descenders than Latin text, so it needs typefaces designed for screens and more generous line height. We choose fonts that stay legible at small sizes on phones, subset them to the characters you actually use, serve compressed WOFF2 files and preload only what the first screen needs. The result is text that looks right without slowing pages down, which matters for Core Web Vitals and for visitors on mobile data.
URLs, hreflang and language switchers
Search engines need a separate, crawlable URL for each language version and a clear signal about how those versions relate. We agree a structure early, usually language or market folders, and decide whether Arabic slugs use Arabic script or transliteration. Then we build hreflang clusters from page relationships in the CMS, with codes such as ar-AE and en-AE for the UAE, ar-SA for Saudi Arabia, ar-MA and fr-MA for Morocco, and en-CA and fr-CA for Canada, plus an x-default.
The language switcher links each page to its true equivalent rather than the homepage, and we never force visitors into a language based on IP address alone. Our international SEO team handles market-level keyword research, so each version targets the terms people actually search in that language.
Middle East, North Africa and Canada
For the Gulf, the Levant and Iraq, most sites pair Arabic with English, and local details matter: WhatsApp contact options, Hijri dates for events and seasonal campaigns, and copy that reads naturally rather than as a literal translation. See our Middle East market notes for more on how search behaves across the region.
In North Africa, French often sits alongside Arabic, particularly in Morocco, Algeria and Tunisia. We write French for those audiences rather than reusing copy written for France, and plan the language order around how your customers actually browse. In Canada, English and French versions need to be equally complete. Quebec’s Charter of the French Language, strengthened by Bill 96, sets expectations for French on commercial websites, and we build French versions with that in mind while recommending you confirm the details with a legal adviser.
Adding languages to an existing site
If you already have a website, adding Arabic or French can be part of a website revamp. A Refresh redesigns and extends the site on your current platform when its templates and CMS can support a second direction. A Rebuild moves you to a modern stack when they can’t. Either way, SEO is built in from the start: language versions are crawlable, redirects protect existing rankings, and native speakers review the copy before anything goes live. We scope and quote every project in USD after a free website review.