Skip to content
Browse all guides

Issue #170 · important

Issue 170

What is this issue?

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

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

What This Issue Checks

The audit verifies that web pages declaring RTL languages (Arabic, Hebrew, Persian, etc.) in the lang attribute also include dir="rtl" on the <html> element to ensure proper text rendering and layout.

What is Considered a Passing Implementation

Your website passes this check when:

  • Pages with RTL language codes (ar, he, fa, ur, yi, ps, sd) have dir="rtl" on the <html> element
  • The dir attribute is set to "rtl" (not "ltr" or "auto") for RTL languages
  • The dir attribute is on the <html> element (not just on <body>)

Real-World Example

Passing Implementation:

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

Failing Implementation:

<!-- Missing dir attribute -->
<html lang="ar">
  <!-- or -->
  <!-- Wrong direction -->
  <html lang="ar" dir="ltr"></html>
</html>

Why does it matter?

Impact on SEO

Crawlability

While the dir attribute doesn't directly affect crawlability, properly rendered RTL pages ensure that search engine crawlers can correctly parse and understand the content structure and layout.

Indexability

Search engines need to understand the language and text direction of your content. Missing dir="rtl" can cause search engines to misinterpret the content structure, potentially affecting how the page is indexed for RTL language searches.

Rankings

RTL language pages that render incorrectly due to missing dir="rtl" create poor user experience, leading to higher bounce rates and lower engagement signals. This can negatively impact rankings in RTL language search results.

User Experience

The dir="rtl" attribute is critical for proper text rendering:

  • Without it, RTL text appears left-to-right instead of right-to-left
  • Punctuation, numbers, and mixed-script paragraphs render incorrectly
  • Page layout (sidebars, navigation, forms) doesn't mirror for RTL reading
  • This creates a very poor experience for Arabic, Hebrew, and Persian readers

Duplicate Content

While not directly related to duplicate content, improperly rendered RTL pages may be viewed as low-quality pages, which can affect how search engines evaluate and rank your content.

AI Search / AEO

As AI-powered search becomes more prevalent, properly structured RTL pages help AI understand your content's language and text direction, ensuring accurate representation in AI-generated answers for RTL language users.

How Resolving This Issue Improves SEO Health Score

Fixing RTL dir attribute issues improves your overall SEO health score by:

  • Ensuring proper rendering of RTL language content
  • Improving user experience for Arabic, Hebrew, and Persian visitors
  • Reducing bounce rates from incorrectly rendered RTL pages
  • Strengthening your website's international SEO signals for RTL languages
  • Ensuring search engines correctly interpret RTL content structure

How to fix it

Practical Recommendations

1. Add dir="rtl" to <html> Element for RTL Languages

Ensure that all pages serving RTL languages have the dir="rtl" attribute on the root <html> element.

Implementation:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>صفحة عربية</title>
  </head>
  <body>
    <!-- Page content -->
  </body>
</html>

2. Use Correct RTL Language Codes

Ensure the lang attribute uses the correct ISO 639-1 codes for RTL languages:

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

3. Place dir Attribute on <html>, Not Just <body>

While dir on <body> can work, it's best practice to place it on the <html> element to ensure all page content renders correctly.

Preferred:

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

Acceptable but not optimal:

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

4. Don't Use dir="ltr" for RTL Languages

Never set dir="ltr" on pages with RTL language codes. This explicitly forces incorrect left-to-right rendering.

Wrong:

<html lang="he" dir="ltr">
  <!-- Incorrect! -->
</html>

Correct:

<html lang="he" dir="rtl"></html>

5. Test RTL Rendering

After adding dir="rtl", test the page in a browser to ensure:

  • Text flows from right to left
  • Punctuation appears correctly
  • Layout mirrors appropriately (sidebars, navigation)
  • Forms and UI elements align correctly

Priority Order

  1. First: Add missing dir="rtl" to all RTL language pages
  2. Second: Fix any pages with dir="ltr" incorrectly set for RTL languages
  3. Third: Move dir attribute from <body> to <html> if needed
  4. Fourth: Verify all RTL language codes are correct in the lang attribute

Examples

Example 1: RTL Page Missing dir Attribute

Scenario

An Arabic language page doesn't have the dir attribute on the <html> element.

Problematic State (Fails)

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

Result: Browsers default to ltr (left-to-right) rendering. Arabic text appears in the correct Unicode order but is laid out from left to right, making it difficult to read.

Corrected State (Passes)

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

Result: Browsers render text correctly from right to left, with proper layout mirroring.

Example 2: dir Set to ltr on RTL Language Page

Scenario

A Hebrew language page explicitly sets dir="ltr" on the <html> element.

Problematic State (Fails)

<!DOCTYPE html>
<html lang="he" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>אתר בעברית</title>
  </head>
  <body>
    <p>שלום עולם</p>
  </body>
</html>

Result: The browser explicitly renders the page as left-to-right, overriding any default RTL behavior. Hebrew text appears incorrectly ordered.

Corrected State (Passes)

<!DOCTYPE html>
<html lang="he" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>אתר בעברית</title>
  </head>
  <body>
    <p>שלום עולם</p>
  </body>
</html>

Result: Hebrew text renders correctly from right to left.

Example 3: dir Only Set on Body, Not html

Scenario

A Persian language page has dir="rtl" on the <body> element but not on the <html> element.

Problematic State (Not Optimal)

<!DOCTYPE html>
<html lang="fa">
  <head>
    <meta charset="UTF-8" />
    <title>وبسایت فارسی</title>
  </head>
  <body dir="rtl">
    <p>سلام دنیا</p>
  </body>
</html>

Result: While this may work partially, it's not the best practice. Some layout and text direction may not render correctly.

Corrected State (Passes)

<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>وبسایت فارسی</title>
  </head>
  <body>
    <p>سلام دنیا</p>
  </body>
</html>

Result: The dir="rtl" on the <html> element ensures all page content renders correctly for RTL languages.

How PixyScan detects this

PixyScan checks whether pages serving right-to-left (RTL) languages have the dir="rtl" attribute on the root <html> element to ensure proper text rendering and layout.

Detection Process

PixyScan follows these logical steps to identify missing or incorrect dir attributes on RTL language pages:

1. Fetch the Page HTML

PixyScan issues an HTTP GET request to the target URL and reads the raw HTML response without JavaScript execution.

2. Extract the Opening <html> Tag

PixyScan parses the raw HTML to extract the opening <html> tag, which contains the lang and dir attributes.

3. Read the lang Attribute

PixyScan reads the value of the lang attribute from the <html> element to determine the declared language of the page.

4. Check if Language is RTL

PixyScan 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

5. Read the dir Attribute

If the page declares an RTL language, PixyScan reads the dir attribute from the <html> tag to check if it's present and set correctly.

6. Validate dir Attribute Value

PixyScan checks the value of the dir attribute:

  • rtl — Correct for RTL languages
  • ltr — Incorrect (explicitly wrong direction)
  • auto — Not recommended for RTL languages
  • Absent — Missing (will trigger the issue)

When the Issue is Flagged

The issue is flagged when any of these conditions are met:

  • RTL language without dir="rtl": The page declares an RTL language (lang attribute) but doesn't include dir="rtl" on the <html> element (either absent or set to wrong value)
  • dir explicitly set to ltr: The <html> element explicitly declares dir="ltr" while the page language is RTL (this overrides browser defaults and forces incorrect rendering)

When the Issue Passes

The issue passes when:

  • The page doesn't declare an RTL language (no check needed)
  • The page declares an RTL language AND has dir="rtl" on the <html> element
  • The dir attribute value is exactly "rtl" (not "ltr" or "auto")

References