Ahmed Fayed Logo AF ligature mark with Ahmed Fayed wordmark. Software Engineer & Systems Builder

Online store SEO

Arabic and English versions of your store: lang, dir and hreflang

18 Oct 2026 ·5 min read · اقرأ بالعربية

A bilingual store has to tell browsers and search engines two things on every page. First, which language the page is in and which way it reads, through the lang and dir attributes on the <html> tag. Second, where the same page lives in the other language, through hreflang tags, so Google can show Arabic searchers the Arabic page and English searchers the English one. When these are missing or wrong, Arabic pages can render left to right, Google can show searchers the wrong language, and in the worst case an Arabic page whose canonical points to the English version can drop out of Google altogether.

How to check

  1. View the source of an Arabic page. The <html> tag should read lang="ar" (or ar-SA) with dir="rtl". On the English page, expect lang="en", with dir="ltr" or no dir.
  2. Search the <head> for hreflang. Each version should list itself and every other version with absolute URLs, and the other version should list the same set in return.
  3. Check the canonical on each version points to that version, not to the other language.
  4. Check the language switcher is a normal link (<a href="…">), not a button that only works with JavaScript. Google only follows <a> elements that have an href.
  5. Check that the sitemap lists both language versions.
  6. Run the free audit. Store Audit by Ahmed Fayed checks lang, dir, hreflang codes and reciprocity, cross-language canonicals, switcher links and sitemap coverage.

The correct markup

<html lang="ar" dir="rtl">
<head>
  <link rel="canonical" href="https://example.com/ar/products/oud">
  <link rel="alternate" hreflang="ar" href="https://example.com/ar/products/oud">
  <link rel="alternate" hreflang="en" href="https://example.com/en/products/oud">
  <link rel="alternate" hreflang="x-default" href="https://example.com/en/products/oud">
</head>

The English page carries the same three alternate lines and a canonical pointing to itself. Google's rules:

  • Put hreflang in the HTML head, in HTTP headers or in the sitemap. One method is enough.
  • Use ISO 639-1 language codes, optionally with an ISO 3166-1 region: ar, ar-SA, en. A region on its own is invalid.
  • Add x-default for visitors whose language matches neither version.
  • Arabic words in URLs are fine, and Google recommends words in your audience's language, but they should be percent-encoded in the code.

The W3C adds one rule for direction: set it with dir on the <html> tag, and don't use CSS to apply the base direction.

How to fix

Salla

Salla's default Raed theme outputs lang and dir from the store's language settings, so check those settings first if the attributes are wrong; custom themes may differ. Salla says multilingual stores use /ar/ and /en/ paths and that it adds hreflang automatically. I haven't verified that on a live bilingual Salla store. On an Arabic-only store checked for this article, /en loaded the homepage with no hreflang, which is expected for a single-language store. If your bilingual store is missing hreflang, it's a platform limitation: send example URLs to Salla support.

Zid

Hreflang on bilingual Zid stores is unconfirmed; the Arabic store checked had none on its product page. I haven't found a hreflang setting in Zid, so if your bilingual store lacks it, contact Zid support with examples.

Shopify

When Markets use distinct URLs (a subfolder, subdomain or separate domain), Shopify adds hreflang automatically through content_for_header, with x-default pointing to the primary domain. The toggle is at Online Store › Preferences › Automatic hreflang tags. If your theme or an app adds its own hreflang as well, you get duplicates: keep one source. For direction, Shopify's Horizon theme sets dir per language, while Dawn sets only lang. In a theme like Dawn, add dir to the existing <html> tag in layout/theme.liquid, the way Horizon does, keeping your other attributes:

<html lang="{{ request.locale.iso_code }}" dir="{{ request.locale.direction | default: 'ltr' }}">

WordPress/WooCommerce

WPML, Polylang, TranslatePress and Weglot each output hreflang. Fix errors in that plugin's settings rather than adding tags by hand, and make sure your SEO plugin and the multilingual plugin aren't both printing them. How each plugin sets x-default by default is unconfirmed; check yours.

Custom-coded

Generate the canonical and hreflang set for each page pair from the same route map, so both versions always list each other.

Common mistakes

  • hreflang="sa". In ISO 639-1, sa is Sanskrit, not Saudi Arabia. Use ar or ar-SA.
  • Region-only or invented codes.
  • One-way hreflang: the Arabic page lists the English one, but not the reverse.
  • Relative URLs in hreflang tags.
  • An Arabic canonical pointing to the English page.
  • Setting direction with CSS alone (direction: rtl).
  • English values in structured data on Arabic pages.

Run the free Store Audit by Ahmed Fayed to check the language setup on your store. If you'd like help fixing this, contact me on WhatsApp +20 102 702 0701 or at ahmed-fayed.com.

Sources

Multilingual

More in this series

Back to guides