Building a bilingual Arabic and English website: what to get right

Right-to-left layout, URL structure, hreflang, fonts and content that is written rather than translated. A checklist for B2B companies in the Gulf and Egypt.

Building a bilingual Arabic and English website: what to get right

Short answer: Treat Arabic as a full version of the site, not a translation layer. Use a separate URL for each language, mark the pair with hreflang tags, mirror the layout for right-to-left reading, choose fonts made for Arabic and write the copy natively.

For a B2B company selling in Egypt and the Gulf, a bilingual website is the default. Yet many Arabic versions are an afterthought: machine-translated text pushed into an English layout, with menus that point the wrong way and pages that search engines cannot tell apart. Buyers notice, and so does Google.

Give each language its own URL

Each language version should live at its own address, for example example.com/services/ for English and example.com/ar/services/ for Arabic. Avoid switching languages with cookies or scripts on the same URL, because search engines then see only one version.

Subfolders such as /ar/ are the simplest choice for most companies, because both languages share the authority of one domain. Separate domains make sense only when the two markets are run as separate businesses.

Tell search engines which page is which

hreflang tags tell search engines that two pages are versions of each other in different languages. Each page lists itself and its counterpart, for example en and ar, plus an x-default for visitors whose language does not match. Get this wrong and Google may show your English page to Arabic searchers, or treat the two as duplicates.

Each version also needs its own title tag, meta description and headings, written in that language around the terms people actually search for. Arabic search terms are not translations of English ones; research them separately.

Mirror the layout for right-to-left

Arabic reads from right to left, so the whole layout should mirror: navigation, alignment, icons that imply direction such as arrows, form fields and progress indicators. Set dir=”rtl” and lang=”ar” on the Arabic pages, and build the CSS with logical properties such as margin-inline-start, so one stylesheet works in both directions.

Some things should not flip: logos, phone numbers, product images and charts with a time axis usually stay as they are. Test every template in both directions before launch.

Choose fonts made for Arabic

Latin fonts with Arabic added as an afterthought often look uneven next to each other. Choose an Arabic typeface designed to sit well beside your English one, check its weights match, and give Arabic text slightly more line height. Load only the weights you use, so the site stays fast.

Write the copy, do not translate it

A B2B buyer in Riyadh reads differently from one in London. Arabic copy should be written by someone who writes for that market, with the same message as the English version but its own phrasing, examples and level of formality. Keep a short glossary so product and service names stay consistent.

Keep the language switch useful

The language switch should take visitors to the same page in the other language, not back to the home page. Label it with the language name in its own script, for example English and العربية, rather than with flags.

Check forms, emails and everything after the click

Forms need labels and error messages in both languages, and the confirmation email should match the language the visitor used. If leads go into a CRM, record the language so your sales team replies in it.

A short launch checklist

  • Separate URLs per language, linked by hreflang tags with x-default
  • Native titles, descriptions and headings in each language
  • dir and lang attributes set correctly on every page
  • Layout, navigation and directional icons mirrored for Arabic
  • Arabic fonts chosen and loaded efficiently
  • Language switch that keeps the visitor on the same page
  • Forms, errors and emails in both languages
  • Both versions listed in the XML sitemap and tested on mobile

Frequently asked questions

Should an Arabic website use a subfolder or a separate domain?

For most companies a subfolder such as /ar/ is best, because both languages share the authority of one domain. Separate domains suit companies that run each market as a separate business.

What is hreflang?

hreflang is a tag that tells search engines which pages are language versions of each other, so each searcher sees the version in their language and the pages are not treated as duplicates.

Can we use machine translation for the Arabic version?

It can help with a first draft, but buyers notice translated copy. For pages that sell, write the Arabic natively or have a native writer rework the translation.

Keep reading