Par Mhamed Bouamar, Fondateur de KamaWeb — Publié le 8 juillet 2026 — Temps de lecture : 11 minutes
En résumé
Au Maroc, 45 % du contenu web est consommé en arabe et 32 % en français (DataReportal, 2025) : un site monolingue laisse donc près de la moitié du marché à la concurrence. La bonne nouvelle, c’est que construire un site bilingue FR / arabe n’a rien d’insurmontable. Le RTL (right-to-left) n’est pas un problème de complexité technique, mais un problème de connaissance : avec dir="rtl" sur la balise <html> et les propriétés CSS logiques (margin-inline-start au lieu de margin-left), la mise en page se retourne presque toute seule. Pour le contenu, privilégiez l’arabe classique (Fusha) sur le site corporate — il s’indexe correctement — et réservez la darija (en arabizi) aux réseaux sociaux. Côté technique : Polylang pour une vitrine ou un blog, WPML pour un e-commerce WooCommerce sérieux, Astro pour un site statique moderne. Et n’oubliez jamais les balises hreflang : invisibles pour le visiteur, elles sont critiques pour que Google classe chaque version. Surtout, fuyez le Google Translate Widget : il ne fait pas de SEO.
Vous avez un beau site en français, soigné, qui convertit bien… auprès des francophones. Mais à Casablanca comme à Fès ou Agadir, une grande partie de vos prospects tape ses recherches en arabe, lit en arabe, et achète plus facilement quand on lui parle dans sa langue. Si votre site ne propose qu’une version française, ces visiteurs-là ne vous trouvent souvent même pas — et quand ils vous trouvent, ils repartent.
Le réflexe, chez beaucoup de dirigeants de PME, c’est de reculer devant la technique : « l’arabe s’écrit à l’envers, ça va tout casser, ça va coûter une fortune ». C’est faux. Dans cet article, on démonte ce mythe et on vous donne la marche à suivre concrète, du choix linguistique jusqu’aux balises SEO.
Pourquoi un site bilingue FR / Arabe est devenu incontournable au Maroc
Commençons par le chiffre qui change tout : 45 % du contenu consommé en ligne au Maroc l’est en arabe, contre 32 % en français et 23 % dans d’autres langues, principalement l’anglais (DataReportal, 2025). Autrement dit, un site uniquement en français s’adresse à un tiers de l’audience et tourne le dos au reste.
Et cette audience est massive. Le Maroc compte 35,3 millions d’internautes, avec un taux de pénétration de 92,2 % (Digital 2025). Quasiment tout le pays est en ligne, et la majorité y consomme du contenu arabe au quotidien.
Cette audience achète, aussi. 24,9 % des Marocains ont acheté en ligne en 2024, contre 15,1 % en 2019 — soit une croissance de 65 % en cinq ans (le360, 2025). Le marché e-commerce marocain est désormais estimé entre 12,5 et 25 milliards de dirhams selon les sources (2025) — les chiffres ANRT et les estimations sectorielles divergent, mais tous les indicateurs convergent vers une forte dynamique — et plusieurs analyses tablent sur une croissance d’environ 10,5 % par an jusqu’en 2029. À noter pour vos arbitrages techniques : 63 % des achats en ligne se font via mobile. Votre version arabe devra être impeccable sur smartphone.
Le paradoxe marocain
Le Maroc est un cas rare au monde sur le plan linguistique. Un même client peut écrire un message en arabe, vous appeler en darija, puis consulter votre site en français — et c’est souvent la même personne, au cours de la même journée. Vouloir choisir « une seule langue » revient à mal comprendre votre propre clientèle. Le véritable enjeu n’est pas de trancher, mais de bien servir chaque registre au bon endroit.
Une opportunité concurrentielle réelle
Voici le point que peu d’agences soulignent : la majorité des sites marocains restent monolingues en 2026. Concrètement, chaque site correctement configuré en FR / AR prend une avance réelle sur ses concurrents locaux, qui se contentent encore d’une seule langue. C’est particulièrement vrai dans cinq secteurs : l’e-commerce, les services B2B, le tourisme, l’immobilier et la banque, et le SaaS. Si vous êtes sur l’un d’eux, le bilingue n’est pas un confort, c’est un avantage de marché.
Arabe classique (Fusha), darija, arabizi : que mettre sur votre site ?
Avant la technique, une décision de fond : quelle forme d’arabe écrire ? La réponse conditionne votre SEO et votre crédibilité.
La hiérarchie linguistique du web marocain
Trois registres coexistent en ligne au Maroc, et ils ne jouent pas le même rôle :
- L’arabe classique (Fusha) : la langue formelle, institutionnelle. C’est celle des publicités, des sites officiels et des contextes professionnels. Surtout, les moteurs de recherche l’indexent correctement.
- La darija : l’arabe marocain parlé, revendiqué comme langue maternelle par 94 % des Marocains (enquête Sunergia, 2026). C’est la langue du quotidien — mais elle n’est pas normalisée à l’écrit.
- L’arabizi : la transcription phonétique de la darija en lettres latines et chiffres (le fameux « 3 » pour le ع, « 7 » pour le ح). Cette graphie domine WhatsApp et les réseaux sociaux informels.
La règle d’or pour un site d’entreprise
La logique est simple : chaque registre à sa place.
- Contenu formel (pages, fiches produits, FAQ, conditions générales) → arabe classique (Fusha).
- Engagement communautaire (posts réseaux sociaux, réponses en commentaires, avis clients) → darija en arabizi, pour l’authenticité et la proximité — un signal local qui nourrit aussi votre E-E-A-T et votre crédibilité auprès de Google et des IA.
- Ne jamais mélanger les deux registres sur une même page : c’est confus pour le lecteur et néfaste pour le SEO.
Pourquoi la darija n’est pas une bonne option SEO
On nous demande souvent : « pourquoi ne pas écrire le site directement en darija, la langue que tout le monde parle ? » Pour trois raisons concrètes :
- Aucune normalisation officielle de l’arabe marocain écrit n’existe — deux graphies (arabe et arabizi) se concurrencent, sans standard.
- Le volume de recherche en darija écrite n’est pas mesurable par les outils SEO standard : vous travaillez à l’aveugle.
- Sur un site corporate, une orthographe non stabilisée renvoie une image peu professionnelle.
Le verdict est clair : pour un site B2B ou e-commerce marocain, visez FR + arabe classique en priorité. La darija reste un excellent outil — mais sur vos réseaux sociaux, pas sur votre site institutionnel. Nous appliquons exactement ce raisonnement aux fiches produits dans notre guide du SEO produit et des fiches e-commerce au Maroc : darija pour convaincre, français ou arabe standard pour ranker.
Implémenter le RTL : ce n’est pas si compliqué
C’est le cœur de cet article, et le point où nous voulons casser une idée reçue. Le RTL n’est pas un problème de complexité, c’est un problème de connaissance. Une fois qu’on connaît les bonnes propriétés, c’est presque automatique.
La base : deux lignes HTML
Tout commence par une seule déclaration sur la balise racine :
<html lang="ar" dir="rtl">
Avec cet attribut dir="rtl", le navigateur bascule automatiquement le sens de lecture de droite à gauche : le texte, l’alignement, l’ordre des colonnes. Vous n’écrivez pas une ligne de JavaScript pour ça. La complexité que les gens redoutent ne vient pas de là — elle vient du fait d’ignorer les propriétés CSS logiques.
Propriétés CSS logiques vs. physiques
Voici le vrai secret du RTL. Le CSS « classique » utilise des propriétés physiques (gauche, droite) qui sont figées et qui cassent dès qu’on passe en RTL. Le CSS moderne utilise des propriétés logiques (début, fin) qui s’adaptent au sens de lecture.
| À abandonner (physique) | À adopter (logique) |
|---|---|
margin-left |
margin-inline-start |
padding-right |
padding-inline-end |
border-left |
border-inline-start |
left: 0 |
inset-inline-start: 0 |
Avec les propriétés logiques, un même fichier CSS fonctionne en français comme en arabe : margin-inline-start devient automatiquement « à droite » en RTL et « à gauche » en LTR. Bonus : Flexbox et CSS Grid s’ajustent automatiquement dès que dir="rtl" est présent. Vous n’avez quasiment rien à dupliquer.
Typographie arabe : les règles à ne pas oublier
L’arabe a ses spécificités d’écriture, et les ignorer dégrade le rendu :
- L’alphabet arabe est cursif : les lettres se connectent et prennent jusqu’à quatre formes (isolée, initiale, médiane, finale). Cela exige une police pensée pour l’arabe.
- Police recommandée : Google Noto Sans Arabic, gratuite et solide.
- N’appliquez ni italique ni gras au texte arabe : ces styles, conçus pour le latin, dégradent le rendu des caractères arabes.
- Les caractères arabes sont plus hauts que les latins : prévoyez une hauteur de ligne supérieure et un peu plus d’espace vertical dans votre design.
Cas particuliers : icônes et texte bidirectionnel
Deux finitions qui font la différence :
- Icônes directionnelles (flèches « suivant / précédent », chevrons) : retournez-les avec
transform: scaleX(-1)ciblé via le sélecteur:dir(rtl). Une flèche « suivant » doit pointer vers la gauche en arabe. - Texte bidirectionnel : quand vous insérez un élément en lettres latines ou un nombre (un numéro de téléphone, un prix en MAD, un code) au milieu d’un texte arabe, encadrez-le avec la balise
<bdi>. Elle isole le texte LTR et évite l’inversion désordonnée des chiffres.
Voilà. Avec ces règles, le RTL passe de « cauchemar technique » à « checklist maîtrisée ».
Choisir son CMS / framework : WPML, Polylang ou Astro ?
Le bon outil dépend de votre projet. Voici comment trancher sans vous tromper.
WordPress + Polylang : le choix des PME et blogs
Polylang propose un noyau gratuit, extensible par add-ons. Il gère les traductions sous forme de pages dupliquées par langue, et offre en 2026 une meilleure intégration native du Full Site Editing (block themes) que ses concurrents. C’est l’option idéale pour une vitrine, un blog, une PME ou une startup au trafic modéré. Sa limite : une intégration WooCommerce basique, peu adaptée à un e-commerce complexe.
WordPress + WPML : l’option e-commerce sérieux
WPML est plus complet, et plus cher. Son intégration WooCommerce est profonde : produits, catégories, attributs, variations, checkout, multi-devise. Il intègre la traduction automatique native (DeepL, Google, Microsoft Translator). Comptez des plans annuels payants et une surcharge mesurable au temps de chargement (0,5 à 2,5 secondes selon les optimisations), à mitiger via opcache et une bonne mise en cache. C’est le bon choix si vous avez une boutique avec de nombreuses variantes, une équipe distribuée et un volume de contenu élevé.
Si vous êtes sur WordPress, notre article WordPress vs React : que choisir pour votre site ? donne également des éléments de comparaison utiles sur les performances.
Astro (et Next.js) : la solution moderne pour les développeurs
Astro propose un i18n natif avec support complet du RTL : on configure chaque langue avec sa propriété dir: 'rtl' (le builder Starlight, par exemple, le gère nativement). Astro génère du HTML statique pré-rendu, ce qui est excellent pour le SEO multilingue et la performance. Pour aller plus loin, l’outil Intlayer offre un wrapper i18n spécialisé (routage multilingue, sitemaps, scaling). Le coût initial est plus élevé (il faut un développeur qui maîtrise), mais la maintenance et l’hébergement sont faibles sur le long terme.
Pour comprendre pourquoi Astro convient particulièrement aux sites vitrine, consultez notre article Pourquoi passer à Astro pour votre site vitrine ?.
Un dernier conseil : évitez Wix et Squarespace pour un projet arabe. Leur support RTL est partiel et peu fiable — vous le paierez en bugs d’affichage.
Tableau de décision rapide (PME marocaine)
| Profil | Solution recommandée |
|---|---|
| Blog / vitrine, petit budget | Polylang (gratuit) |
| E-commerce WooCommerce | WPML |
| Site statique moderne / SaaS | Astro + i18n natif |
SEO multilingue : hreflang, URLs et recherche de mots-clés
Avoir deux versions linguistiques ne suffit pas : encore faut-il que Google comprenne laquelle servir à qui. C’est tout l’enjeu du SEO multilingue. Si vous débutez sur le sujet, notre Guide complet du SEO local pour les entreprises marocaines pose les fondations avant d’aborder le multilingue.
Les balises hreflang : invisibles pour l’utilisateur, critiques pour Google
Une balise hreflang indique au moteur la langue et la région de chaque page, et évite le duplicate content. Voici la structure minimale correcte :
<link rel="alternate" hreflang="fr" href="https://exemple.ma/fr/" />
<link rel="alternate" hreflang="ar" href="https://exemple.ma/ar/" />
<link rel="alternate" hreflang="x-default" href="https://exemple.ma/" />
Trois erreurs mortelles à éviter :
- Oublier la balise
x-default, qui sert de page de repli pour les régions non ciblées. - Des hreflang asymétriques : si la page FR pointe vers la page AR, l’inverse doit être vrai aussi.
- Mal pointer les URLs — une seule erreur d’adresse, et Google se perd.
Une balise hreflang mal positionnée se traduit directement par des pertes de classement et l’affichage de la mauvaise version aux visiteurs.
Structure d’URL recommandée pour le Maroc
Privilégiez les sous-répertoires : https://exemple.ma/fr/ et https://exemple.ma/ar/. Cette approche concentre l’autorité du domaine sur un seul nom de domaine, tout en séparant clairement les contextes linguistiques. Par rapport à des sous-domaines séparés, elle centralise vos backlinks et simplifie la gestion. C’est le choix le plus robuste pour une PME marocaine. Le choix du nom de domaine .ma et de l’hébergement qui porte cette structure est traité dans notre guide où héberger son site au Maroc en 2026.
Recherche de mots-clés par langue : pas une option
Voici une erreur fréquente : traduire ses mots-clés du français à l’arabe. Un mot-clé performant en français ne performe pas forcément en arabe — les intentions de recherche, les formulations, les volumes diffèrent. Vous devez mener une recherche de mots-clés distincte pour chaque langue, avec des outils comme Ubersuggest, Semrush ou Google Keyword Planner. Et gardez en tête que les backlinks en arabe n’améliorent pas le SEO de votre version française, et inversement : ce sont deux chantiers à mener en parallèle.
Sitemap multilingue et Google Search Console
Générez un sitemap.xml listant toutes les variantes linguistiques et déclarez-le dans la Google Search Console (par langue ou unifié selon votre configuration). WPML le génère automatiquement ; Astro et Next.js permettent une génération à la construction du site. C’est l’étape qui aide Google à découvrir et à indexer chacune de vos versions.
Les 5 erreurs qui sabotent un site multilingue marocain
- Le Google Translate Widget. Beaucoup de PME le croient gratuit et magique. C’est un piège : Google a restreint son accès (réservé à certains gouvernements et ONG), il traduit côté client en JavaScript — donc le contenu n’est pas indexé, ne traduit pas les meta titles, et n’apporte aucun hreflang. Résultat : zéro SEO et un risque de traductions erronées.
- Les CSS physiques au lieu de logiques. Un simple
margin-leftoublié, et votre mise en page se déchire en RTL. La solution tient en un mot : propriétés logiques. - Le hreflang absent ou asymétrique. Google ne sait plus quelle version servir, mélange les deux, et votre classement chute.
- La traduction littérale, sans adaptation culturelle. Coller du français dans un traducteur automatique sans relecture humaine donne un arabe maladroit : conversion en berne et image de marque abîmée.
- Le mélange darija / arabe classique sur une même page. SEO dilué, rendu peu professionnel. Un registre par contexte, toujours.
Budget et effort : ce qu’il faut prévoir
La question du budget revient toujours, et la réponse honnête est : cela dépend de la complexité. Une vitrine bilingue se situe en bas de la fourchette ; un e-commerce avec produits et variantes au milieu ; un projet avec espace membre, CRM ou multi-devise en haut. Les facteurs qui pèsent vraiment sont le volume de contenu à traduire et la richesse fonctionnelle, bien plus que le RTL lui-même.
Deux principes pour dépenser intelligemment :
- La relecture humaine de l’arabe est indispensable. La traduction automatique (DeepL et consorts) a fait d’énormes progrès et constitue un bon point de départ — mais une relecture humaine reste essentielle pour éviter les fautes de ton ou les maladresses culturelles qui font fuir un client.
- Ne traduisez pas tout d’un coup. Commencez par les pages à fort impact : accueil, services, contact, FAQ. Puis traduisez le blog progressivement, en priorisant par potentiel SEO et conversion. Vous économisez du temps et du budget sans perdre l’essentiel.
Sur le long terme, gardez aussi en tête le coût total de possession : un site Astro statique coûte plus cher à développer mais moins à maintenir, là où WordPress démarre moins cher mais demande des mises à jour de plugins régulières.
FAQ
Faut-il vraiment mettre les deux langues sur le même site, ou vaut-il mieux deux sites séparés ?
Mettez les deux langues sur un seul site, organisé en sous-répertoires /fr/ et /ar/. Cette approche concentre l’autorité de votre domaine et simplifie la gestion des backlinks et des balises hreflang. Deux sites séparés divisent vos efforts SEO et compliquent inutilement la maintenance.
Quelle est la différence entre darija et arabe classique pour le SEO d’un site marocain ?
L’arabe classique (Fusha) est correctement indexé par les moteurs et inspire confiance sur un site professionnel : c’est le bon choix pour le contenu formel. La darija n’a pas de norme d’écriture officielle et son volume de recherche n’est pas mesurable par les outils SEO. Réservez-la aux réseaux sociaux, où elle crée de la proximité.
Comment implémenter correctement le RTL sans casser la mise en page ?
Ajoutez dir="rtl" sur la balise <html> : le navigateur retourne automatiquement le sens de lecture. Puis remplacez toutes vos propriétés CSS physiques (margin-left, padding-right) par leurs équivalents logiques (margin-inline-start, padding-inline-end). Utilisez une police arabe comme Noto Sans Arabic et testez sur un vrai navigateur.
WPML ou Polylang : lequel choisir pour un site bilingue FR / arabe ?
Pour une vitrine, un blog ou une PME au trafic modéré, Polylang suffit et son noyau est gratuit. Pour un e-commerce WooCommerce avec de nombreux produits, variantes et plusieurs devises, WPML est plus adapté grâce à son intégration commerce profonde, malgré son coût annuel.
Qu’est-ce que les balises hreflang et pourquoi sont-elles indispensables en multilingue ?
Une balise hreflang indique à Google la langue et la région de chaque page : « celle-ci est en français, celle-là en arabe ». Sans elle, Google confond vos versions et peut afficher la mauvaise au visiteur, ce qui fait chuter votre classement. N’oubliez jamais la balise x-default comme page de repli.
Est-ce que le Google Translate Widget est une solution valable pour traduire mon site ?
Non. Son accès est désormais restreint (sites gouvernementaux et ONG), il traduit côté client, donc son contenu n’est pas indexé par Google et ne génère aucun hreflang. Préférez une vraie solution — WPML, Polylang, Weglot ou une traduction manuelle relue — pour un site qui se classe vraiment.
Confiez votre site multilingue FR / Arabe à KamaWeb
Chez KamaWeb, nous concevons des sites bilingues FR / arabe qui respectent le RTL au pixel près et qui se classent dans les deux langues — parce qu’au Maroc, parler à la moitié de votre marché ne suffit pas. Notre équipe basée à Casablanca a déjà accompagné plus de 100 projets clients.
Découvrez nos métiers ou contactez-nous pour échanger sur votre projet.