Arabic websites done right: RTL design, fonts and Arabic SEO

Hundreds of millions of people use Arabic online, across more than twenty countries. Yet many Arabic websites still feel like a European site with the text swapped: misaligned icons, broken punctuation, awkward fonts and search results that never appear. Getting an Arabic website right is not difficult, but it requires deliberate choices in design, development and SEO.

This article walks through the essentials, from right-to-left (RTL) layout and typography to Arabic keyword research and local search. It is written for business owners and marketers, with enough technical detail to brief a developer.

RTL is more than right-aligned text

Arabic is written from right to left, so the whole reading direction of the page changes, not just the text alignment.

Set the direction at the right level

• Declare the language and direction on the root element, for example <html lang="ar" dir="rtl">. Browsers then handle much of the layout automatically.
• Use CSS logical properties (margin-inline-start, padding-inline-end, inset-inline-start, text-align: start) instead of left and right. One stylesheet then works for both Arabic and English.
• Modern layout techniques such as flexbox and grid follow the document direction, which saves a lot of manual work.

Mirror what has direction, and only that

A good RTL interface mirrors elements that express direction or order:

• navigation order, menus, breadcrumbs and tabs;
• back and forward arrows, "next" chevrons and carousels;
• progress steps in a checkout;
• the position of sidebars and form labels.

Some things should not be mirrored:

• logos and brand marks;
• media player controls (play, rewind) are usually kept as they are;
• icons that depict real objects, such as a clock, a checkmark or a shopping cart;
• charts and graphs with a numerical time axis, unless designed specifically for RTL;
• phone numbers, prices and product codes.

The safest approach is to agree on these rules in a design system and test every component in both directions.

Forms and inputs

Arabic forms are where many sites break. Make sure text fields align correctly, that email addresses and URLs (which are always left-to-right) display correctly inside an RTL form, and that validation messages appear on the correct side. Phone number fields should accept both Arabic-Indic and Western digits and normalise them.

Mixed Arabic and English content

Real Arabic content is often bidirectional: brand names, product codes, email addresses, prices and technical terms in Latin script appear inside Arabic sentences. Browsers use the Unicode bidirectional algorithm to handle this, but punctuation and numbers at the edges of mixed text can still end up in the wrong place.

Practical fixes:

• Wrap user-generated or embedded Latin text in <bdi> or use dir="auto" on fields where the language is unknown.
• Use <span dir="ltr"> for things like product codes or code snippets inside Arabic text.
• Test real content, not placeholder text. "Lorem ipsum" will not reveal bidirectional problems.

Arabic typography and fonts

Typography has a big impact on how professional an Arabic site feels.

• Choose a real Arabic typeface. System fallbacks often look inconsistent. Popular web options include IBM Plex Sans Arabic, Noto Sans Arabic and Noto Naskh Arabic, Cairo, Tajawal, Almarai and Readex Pro. Many come with matching Latin characters, which helps in bilingual layouts.
• Size up. Arabic letterforms are often visually smaller than Latin at the same font size. Many designers use a slightly larger size and more generous line height for Arabic text.
• Never add letter-spacing. Arabic is a connected script; letter-spacing breaks the joins between letters and makes text look broken.
• No all-caps or fake italics. Arabic has no capital letters, and slanted Latin-style italics are not a natural emphasis. Use weight or colour for emphasis instead.
• Load fonts efficiently. Arabic fonts can be large. Subset them, use modern formats (WOFF2) and font-display: swap to keep pages fast.
• Check diacritics. If your content uses vowel marks (tashkeel), for example in education or religious texts, test that the font renders them clearly at small sizes.

Numerals, dates and currencies

Arabic-speaking countries do not all use the same digits:

• Western Arabic digits (0123456789) are widely used online, including in much of the Gulf and North Africa.
• Eastern Arabic (Arabic-Indic) digits (٠١٢٣٤٥٦٧٨٩) are common in parts of the Middle East and in more traditional or formal contexts.

There is no single correct choice; decide per market and be consistent. Using the Intl APIs in JavaScript (for example Intl.NumberFormat('ar-SA') or 'ar-AE') helps format numbers, dates and currencies correctly. Also think about whether you need Hijri dates alongside Gregorian dates, and how currency symbols and codes (SAR, AED, SYP, EUR) appear next to Arabic text.

Arabic SEO: structure first

Separate URLs and hreflang

Each language version should have its own URL, for example /ar/ and /en/, and never rely only on a cookie or browser language to switch content. Search engines need to be able to crawl every version.

Add hreflang tags so Google shows the right version to the right user:

• hreflang="ar" for a general Arabic version;
• country-specific variants such as ar-SA, ar-AE or ar-SY only if you really have different content per country;
• an x-default for the fallback version.

Each page should reference all its language versions, including itself, and the references must be reciprocal. Mistakes here are among the most common technical SEO issues on multilingual sites.

Arabic metadata and URLs

Write Arabic page titles, meta descriptions and headings, not English ones on Arabic pages. For URL slugs, you can use Arabic characters (they are percent-encoded behind the scenes) or a short transliteration or English slug. Both can work; Latin slugs are easier to share and less error-prone, while Arabic slugs can match the search query more visibly. Choose one approach and apply it consistently.

Arabic keyword research: spelling and dialect matter

Arabic keyword research is where most generic SEO approaches fall short.

Modern Standard Arabic vs dialects

Formal written content usually uses Modern Standard Arabic (MSA), but people often search the way they speak. Vocabulary differs per region. A mobile phone, for example, is commonly called "جوال" in Saudi Arabia, while "موبايل" is common in the Levant, including Syria, and "هاتف" is the formal term. Your keyword list should reflect the words your actual customers use in your target country.

Spelling variants

Arabic has several letters that people frequently interchange when typing, and search engines do not always treat them as identical:

• alif with or without hamza (أ / إ / ا);
• taa marbuta and haa at the end of a word (ة / ه);
• yaa and alif maqsura (ي / ى);
• singular vs plural and definite vs indefinite forms (موقع / مواقع / المواقع).

Check search volumes and results for the main variants, and make sure your content naturally includes the forms people use most.

Arabizi and English terms

Some users, especially younger users and those in the diaspora, search in Latin-script Arabic ("Arabizi") or mix English terms with Arabic ("تصميم website"). For many tech and business topics, the English term is the common search term even among Arabic speakers. Include these variants where they are genuinely used.

Tools

Standard SEO tools support Arabic, but their volume data for smaller markets can be thin. Combine them with Google Search Console data, Google's autocomplete in the target country, and input from native speakers who know the local market.

Local search and Google Maps in Arabic markets

For local businesses, map results are often as important as normal search results.

• Create or claim your Google Business Profile and fill it in completely, including categories, opening hours, photos and services.
• Use your consistent business name; where appropriate, make sure customers can find you by both the Arabic and the Latin spelling of your name.
• Keep your name, address and phone number identical on your website, profile and directories.
• Collect reviews and reply to them, in the language the customer used.
• In the Gulf, also consider Apple Maps (via Apple Business Connect), as iPhone usage is high, and in Saudi Arabia make sure your address follows the National Address format.

Map and business-profile availability can differ per country, so check what is supported in each market you target.

Testing checklist

1. Every component tested in both RTL and LTR.
2. Real Arabic content reviewed by a native speaker.
3. Mixed text, numbers and punctuation checked on mobile and desktop.
4. Fonts subsetted and page speed checked for Arabic pages.
5. Separate URLs, correct hreflang and Arabic metadata.
6. Keyword list covering dialect words and spelling variants.
7. Local business profiles complete and consistent.

Conclusion

An Arabic website that is done right feels natural to its visitors: the layout flows from right to left, the typography is clear, numbers and mixed text behave, and search engines understand exactly which page to show to whom. Planning RTL and Arabic SEO from the start costs far less than fixing them afterwards.

Smart Design is a web agency based in Haarlem with an Arabic-speaking team, building websites in Dutch, English and Arabic for clients worldwide. Read more about having a website built, our approach to SEO optimisation, or our work for websites in Syria. Planning an Arabic site? Get in touch and we will gladly think along with you.