# Site multilingue FR/AR/EN au Maroc : bonnes pratiques techniques et SEO

> Guide pour créer un site multilingue français, arabe, anglais au Maroc : architecture URL, hreflang, RTL, traduction des slugs, SEO international.

- Source : https://deadline.ma/conseils/developpement-web/site-multilingue-arabe-francais-anglais
- Auteur : Équipe deadLine — Agence web & digital à Casablanca
- Publié le 14 avril 2026
- Éditeur : deadLine, agence web à Casablanca (https://deadline.ma), éditeur du logiciel LINEPROD (https://lineprod.ma)

## En bref

Pour un site multilingue marocain, utilisez des sous-dossiers (/fr, /ar, /en), déclarez les balises hreflang réciproques, gérez le RTL au niveau du html dir, et traduisez les slugs eux-mêmes — pas juste les contenus. L'arabe est sous-exploité par 95% des sites marocains, c'est une opportunité SEO.

Un site multilingue au Maroc en 2026 doit gérer correctement le
français (toujours), souvent l'arabe (parfois oublié), et parfois
l'anglais (export, expatriés). Bien fait, c'est un avantage SEO
massif puisque 95% des concurrents ne traitent pas l'arabe
sérieusement. Mal fait, c'est un cauchemar de duplication de contenu
et d'indexation. Ce guide donne les bonnes pratiques techniques et
SEO.

## Faut-il vraiment un site multilingue ?

Avant la technique, la question stratégique. Trois cas justifient
clairement un site multilingue :

- **Audience arabophone large** dont une partie ne maîtrise pas le
  français (B2C grand public, e-commerce mass market, services
  publics)
- **Activité d'export** vers l'Europe ou les États-Unis (anglais
  obligatoire)
- **Présence dans plusieurs pays** (Maroc + Tunisie + Algérie par
  exemple)

Si votre cible est 100% marocaine francophone B2B (PME, professions
libérales, conseil), le français seul couvre 95% des leads
qualifiés. L'arabe et l'anglais ajoutent du travail sans gain
proportionnel.

## L'architecture URL — sous-dossiers gagnent

Trois architectures possibles pour un site multilingue :

| Architecture | Exemple | Avantages | Inconvénients |
|---|---|---|---|
| Sous-dossiers | site.ma/fr, site.ma/ar | Simple, autorité unifiée | Aucun sérieux |
| Sous-domaines | fr.site.ma, ar.site.ma | Sépare le SEO par langue | Complexité, perte d'autorité |
| Domaines distincts | site.ma, site.fr, site.ae | Hyper-local | Coût, gestion lourde |

Notre recommandation par défaut : **sous-dossiers**. Conservez
l'autorité de votre domaine principal, simplifiez la gestion, évitez
la fragmentation SEO. Sauf cas spécifique d'export massif sur des
marchés très différenciés, ne complexifiez pas avec des sous-domaines
ou domaines séparés.

## Les balises hreflang — non négociables

Sans hreflang, Google ne sait pas quelle version montrer à quel
visiteur. Résultat : un visiteur arabophone reçoit la version
française, ou pire, les deux versions se cannibalisent en SEO.

Sur chaque page, déclarez toutes les versions linguistiques
réciproquement :

```html
<link rel="alternate" hreflang="fr" href="https://site.ma/fr/services" />
<link rel="alternate" hreflang="ar" href="https://site.ma/ar/خدمات" />
<link rel="alternate" hreflang="en" href="https://site.ma/en/services" />
<link rel="alternate" hreflang="x-default" href="https://site.ma/fr/services" />
```

Le `x-default` indique la version par défaut quand aucune langue ne
correspond. Pour un site marocain principalement francophone,
toujours `fr`.

## Le RTL pour l'arabe — au-delà du `dir="rtl"`

L'arabe s'écrit de droite à gauche (Right-To-Left). Cela impose des
adaptations qui dépassent le simple `dir="rtl"` :

### Au niveau HTML

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

Le navigateur inverse alors le sens du texte et la majorité des
layouts. C'est la base.

### Au niveau CSS — utiliser les CSS logical properties

Au lieu de `margin-left`, utilisez `margin-inline-start` qui s'adapte
automatiquement au sens. Tailwind CSS v4 supporte les propriétés
logiques (`ms-4` au lieu de `ml-4`).

### Composants à adapter manuellement

- **Icônes directionnelles** (flèches "lire la suite") : inverser via
  `transform: scaleX(-1)` en RTL
- **Animations** qui se déplacent horizontalement
- **Tableaux** : la première colonne doit être à droite en arabe
- **Menus déroulants** : alignement à droite par défaut

### Typographie arabe

L'arabe a ses propres exigences typographiques. Choisir une font qui
supporte bien l'arabe — Noto Sans Arabic, Cairo, Tajawal sont les
références sur Google Fonts. Tester le rendu sur les mots longs et
les ligatures.

## Traduire les slugs eux-mêmes

L'erreur la plus fréquente : garder `/fr/services/site-vitrine` en
version arabe au lieu de le traduire en `/ar/خدمات/موقع-تعريفي`.

Conséquence : Google ne ranke pas la version arabe sur les requêtes
arabes. Le SEO arabe est cassé à la racine.

Bonne pratique : traduire les slugs avec les vrais mots arabes (pas
de translittération latine type `khadamat-mawqi3-tarifi`). Google
indexe correctement les caractères arabes dans les URLs depuis
2010+.

## Gérer le contenu multilingue côté CMS

### Next.js avec i18n natif (recommandé)

Configuration dans `next.config.ts` :

```typescript
const config = {
  i18n: {
    locales: ['fr', 'ar', 'en'],
    defaultLocale: 'fr',
  },
};
```

Routes automatiques `/fr/...`, `/ar/...`, `/en/...`. Détection auto
de la langue du visiteur. Aucun plugin tiers nécessaire.

### WordPress avec WPML ou Polylang

WPML est la référence payante (~99 USD/an). Polylang gratuit fait
l'essentiel. Les deux ralentissent significativement le site (plugins
lourds). Si on doit choisir : WPML pour les sites avec contenu
volumineux, Polylang pour les sites simples.

### Shopify

Shopify gère mal le multilingue nativement. Apps tierces (Weglot,
LangShop) ajoutent un coût mensuel et ont des limites en arabe RTL.
À éviter pour un e-commerce marocain multilingue sérieux.

## SEO multilingue — les détails qui changent tout

1. **Sitemap.xml par langue** : un sitemap unique avec hreflang, ou
   des sitemaps séparés. Soumettez chacun à Google Search Console.
2. **Schema.org localisé** : `inLanguage: "ar-MA"` sur les pages
   arabes
3. **Meta title et description** traduits par un humain (pas
   Google Translate) — c'est ce que Google affiche en SERP
4. **Internal linking** entre les versions linguistiques de la même
   page
5. **Surveiller la cannibalisation** dans Search Console — si la
   version FR ranke en arabe ou inversement, hreflang est mal
   configuré

## L'opportunité de l'arabe au Maroc

95% des sites marocains négligent le SEO en arabe. Pourtant :

- 60% des recherches Google au Maroc se font en arabe ou en alternance
  FR/AR (Google Trends 2026)
- Les requêtes arabes ont une concurrence beaucoup plus faible que
  les équivalents français
- L'arabe est sous-exploité même par les acteurs internationaux

Pour un site B2C ou public mass-market, ajouter une version arabe
bien faite peut multiplier le trafic organique par 1,5 à 2 en 6
mois — sans toucher au SEO français existant.

## Erreurs courantes à éviter

1. **Traduire avec Google Translate** sans relecture humaine — perte
   de crédibilité immédiate, surtout en arabe
2. **Garder les slugs FR en version arabe** — le SEO arabe ne décolle
   jamais
3. **Oublier les balises hreflang réciproques** — Google ne sait pas
   quelle version servir
4. **Ne traduire que la home et le menu** — Google attend que TOUTES
   les pages importantes soient traduites
5. **Mélanger les langues dans une même page** — confusion pour les
   moteurs et les visiteurs

## Pour aller plus loin

- [Création de site web au Maroc — guide complet 2026](/conseils/developpement-web) — la pillar du silo
- [SEO au Maroc — le guide 2026](/conseils/marketing-digital/seo-maroc-guide-2026) — l'arabe est l'opportunité SEO la plus sous-exploitée
- [WordPress vs Next.js vs Shopify](/conseils/developpement-web/wordpress-vs-nextjs-vs-shopify) — le multilingue influence le choix de stack

## Conclusion

Un site multilingue au Maroc est une opportunité quand l'audience le
justifie, et un cauchemar quand on l'aborde mal. Les fondations
techniques (sous-dossiers, hreflang, RTL, slugs traduits) sont les
mêmes pour tout le monde. La différence se fait sur la qualité de
traduction et la rigueur du SEO par langue.

[Échangez 20 min avec notre équipe](/contact) — nous évaluons si le
multilingue est pertinent pour votre projet et identifions
l'architecture optimale, sans surenchérir si une seule langue
suffit.

## Questions fréquentes

### Mon site doit-il être en plusieurs langues au Maroc ?

Si votre cible est 100% marocaine francophone : non, le français suffit. Si vous ciblez l'export, les expatriés, ou une audience arabophone large : oui — FR + AR (et EN si international). L'arabe ouvre un trafic SEO local sous-exploité par 95% des concurrents.

### Sous-domaines (fr.site.ma) ou sous-dossiers (site.ma/fr) ?

Sous-dossiers dans 99% des cas. Plus simple à mettre en place, conserve l'autorité du domaine principal, plus facile à indexer pour Google. Les sous-domaines compliquent inutilement le SEO et l'analytics.

### Faut-il traduire les URLs (slugs) eux-mêmes ?

Oui. /fr/services/site-vitrine doit devenir /ar/خدمات/موقع-تعريفي pour ranker en arabe. Garder /fr/services/site-vitrine en arabe coupe le SEO arabe à la racine — c'est l'erreur la plus fréquente.

### Comment gérer le RTL pour l'arabe ?

Au niveau du html : <html lang='ar' dir='rtl'>. Le navigateur inverse alors le sens d'affichage du texte et la majorité des layouts simples. Les composants complexes (icônes directionnelles, animations) demandent du CSS spécifique. Tailwind CSS et CSS logical properties simplifient grandement le RTL.

### Faut-il utiliser Google Translate ou faire traduire à la main ?

Traduction humaine impérative pour le contenu commercial et les pages services. Google Translate (ou DeepL) acceptable seulement pour des contenus secondaires (mentions légales, FAQ basique). Une mauvaise traduction tue la crédibilité, surtout en arabe où les nuances comptent.

### Quel CMS gère le mieux le multilingue ?

Next.js avec i18n natif est notre choix par défaut — performance préservée, SEO solide, RTL géré proprement. WordPress avec WPML ou Polylang fonctionne mais ralentit le site. Shopify gère mal le multi-langue, ses apps tierces (Weglot, LangShop) ont des limites en arabe RTL.
