Skip to main content

RTL dir="rtl" on <html> for Arabic/Hebrew/Persian Content

Issue No: 170

Category: International SEO Issue type: Issue Priority: STANDARD

Description

Pages serving right-to-left (RTL) languages such as Arabic, Hebrew, or Persian must declare dir="rtl" on the root <html> element so browsers and search engines correctly interpret text directionality, layout, and reading order.

How do we capture it

Where to Find

On the opening <html> tag of the document:

<html lang="ar" dir="rtl">

Or on the <body> tag (less preferred but valid):

<body dir="rtl">

HTML Extraction Flow

When the XeoPix crawler downloads the HTML response, the parser:

  1. Issues an HTTP GET to the target URL.
  2. Reads raw response bytes without JavaScript execution.
  3. Extracts the opening <html> tag.
  4. Reads the lang attribute to determine the declared language.
  5. Checks whether the declared lang value maps to a known RTL language (Arabic: ar, Hebrew: he, Persian/Farsi: fa, Urdu: ur, Yiddish: yi, Pashto: ps, Sindhi: sd).
  6. Reads the dir attribute from the <html> tag.
  7. Flags a mismatch when the lang indicates an RTL language but dir is absent or set to ltr.
  8. Sets rtl_dir_explicitly_wrong = TRUE when dir is present but set to ltr on an RTL language page (distinct from simply absent).

Validation Logic

The crawler validates:

  • The lang attribute on <html> against the RTL language code list.
  • The dir attribute value: accepted values are rtl, ltr, auto.
  • Whether a RTL lang value is paired with dir="rtl".

RTL language codes that require dir="rtl":

LanguageISO 639-1 Code
Arabicar
Hebrewhe
Persian (Farsi)fa
Urduur
Yiddishyi
Pashtops
Sindhisd

Examples of invalid configurations:

  • <html lang="ar"> — missing dir attribute.
  • <html lang="ar" dir="ltr"> — wrong direction for Arabic.
  • <html lang="en" dir="rtl"> — direction applied to a non-RTL language.

How to Get It

Crawler should:

  1. Fetch raw HTML.
  2. Extract the opening <html> tag via regex or HTML parser.
  3. Read lang attribute value (e.g., ar, he, fa).
  4. Check if lang belongs to the RTL language list.
  5. Read the dir attribute from <html>.
  6. Store whether the combination is valid.

What to store

FieldTypeComment
html_langTEXTThe lang attribute value on the <html> element
html_dirTEXTThe dir attribute value on the <html> element (rtl, ltr, auto, or absent)
is_rtl_languageBOOLEANWhether the declared lang belongs to a known RTL language
has_rtl_dir_attributeBOOLEANWhether dir="rtl" is present on the <html> element
rtl_dir_mismatchBOOLEANWhether the page declares an RTL language but is missing dir="rtl" (covers both absent and wrong direction)
rtl_dir_explicitly_wrongBOOLEANWhether dir is explicitly set to ltr on an RTL language page (as opposed to merely absent)

Condition for trigger

The following trigger rules evaluate RTL dir attribute compliance.

  • Trigger Rule 1: RTL Language Without dir="rtl"

    • Target Field: rtl_dir_mismatch
    • Evaluation Logic: = TRUE
    • Severity: WARNING
    • Diagnostic Message: "The page declares an RTL language (lang attribute) but does not include dir="rtl" on the <html> element. Browsers and search engines may render text in the wrong direction."
  • Trigger Rule 2: dir Explicitly Set to Wrong Direction on RTL Page

    • Target Field: rtl_dir_explicitly_wrong
    • Evaluation Logic: = TRUE
    • Severity: CRITICAL
    • Diagnostic Message: "The <html> element explicitly declares dir="ltr" while the page language is RTL. This overrides browser defaults and forces incorrect left-to-right rendering for RTL content."

Sources

Long description

The HTML dir attribute controls the base text direction of a document. For right-to-left languages such as Arabic (ar), Hebrew (he), and Persian (fa), the dir="rtl" attribute must be applied to the root <html> element so that the browser renders text, punctuation, layout, and UI elements in the correct reading direction.

Correct RTL declaration:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>موقع عربي</title>
</head>
<body>
<p>مرحبا بالعالم</p>
</body>
</html>

Without dir="rtl":

  • Browsers default to ltr (left-to-right) rendering.
  • Arabic/Hebrew text appears in the correct Unicode order but is laid out from left to right.
  • Punctuation, numbers, and mixed-script paragraphs render incorrectly.
  • Page layout (sidebars, navigation, forms) does not mirror for RTL reading.
  • Search engines may treat the page as a non-RTL page, affecting language-specific ranking signals.

Affected languages and their ISO 639-1 codes:

  • Arabic: ar
  • Hebrew: he
  • Persian/Farsi: fa
  • Urdu: ur
  • Yiddish: yi
  • Pashto: ps
  • Sindhi: sd

SEO Impact

Missing dir="rtl" on RTL language pages may cause:

  • Poor user experience for Arabic, Hebrew, and Persian readers.
  • Misrendered text layouts reducing time-on-site and increasing bounce rate.
  • Reduced quality signals for RTL language pages in regional search results.
  • Incorrect rendering of structured data and page snippets in RTL locales.

Common Failure Scenarios

1. RTL Page Missing dir Attribute

<!-- BAD: Arabic language page without dir -->
<html lang="ar">

<!-- GOOD -->
<html lang="ar" dir="rtl">

2. dir Set to ltr on RTL Language Page

<!-- BAD: explicitly wrong direction -->
<html lang="he" dir="ltr">

<!-- GOOD -->
<html lang="he" dir="rtl">

3. dir Only Set on Body, Not html

<!-- PARTIAL: not ideal -->
<html lang="fa">
<body dir="rtl">

<!-- BEST PRACTICE -->
<html lang="fa" dir="rtl">

Diagnostic Output Example

RTL direction attribute missing.

Affected URL:
https://example.com/ar/

Detected lang: ar (Arabic — RTL language)
Detected dir: (absent)

Recommendation:
Add dir="rtl" to the <html> element: <html lang="ar" dir="rtl">

How to Fix

Add dir="rtl" to the opening <html> tag on pages serving RTL languages. For pages serving a mix of RTL and LTR content within the same document, use the dir attribute on specific block elements. Use CSS logical properties for layout instead of physical properties to ensure correct RTL mirroring.