hreflang pour les sites web marocains : le setup technique que la plupart des agences ignorent

Votre site marocain a une version française et une version anglaise. Google voit deux pages avec un contenu similaire dans des langues différentes. Sans balises hreflang, Google ne sait pas quelle version montrer à quelle audience. Il pourrait montrer votre page française à des touristes anglophones ou votre page anglaise à des visiteurs marocains francophones.

Ce que font les balises hreflang

hreflang est un attribut HTML qui dit aux moteurs de recherche : « Cette page existe en plusieurs langues. Voici les URLs pour chaque version. » Google les utilise pour servir la bonne version linguistique à chaque utilisateur.

Sans hreflang, Google traite vos pages française et anglaise comme des doublons potentiels. Avec hreflang, les deux versions sont indexées et servies à la bonne audience.

L'implémentation correcte pour le Maroc

Pour un site marocain avec des versions française et anglaise, chaque page a besoin de ces balises dans le head HTML. Les deux pages doivent se référencer mutuellement. C'est l'erreur la plus courante. Les agences ajoutent hreflang sur une page mais pas l'autre.

x-default : le fallback que tout le monde oublie

La valeur hreflang x-default dit à Google quelle page montrer quand la langue de l'utilisateur ne correspond à aucune version disponible. Pour une entreprise marocaine, x-default devrait typiquement pointer vers votre page anglaise (pour les visiteurs internationaux) ou française.

Structure d'URL pour les sites multilingues marocains

Option 1 : sous-répertoires (recommandé) : example.ma/fr/page et example.ma/en/page. Tout reste sous un seul domaine.

Option 2 (URLs séparées) : example.ma/page-fr et example.ma/page-en. C'est ce que nous utilisons chez Sentinel Studio. Chaque version linguistique a son propre slug, optimisé pour le SEO.

Erreurs courantes sur les sites multilingues marocains

hreflang unidirectionnel. La page A référence la page B comme alternative, mais la page B ne référence pas la page A. Google ignore les tags hreflang unidirectionnels.

Auto-référence manquante. Chaque page doit inclure un tag hreflang pointant vers elle-même.

URLs non canoniques dans hreflang. Si votre URL canonique est https://www.example.ma/page mais votre hreflang pointe vers https://example.ma/page (sans www), Google voit un conflit.

Comment implémenter hreflang dans Next.js

Dans Next.js App Router, hreflang est implémenté via l'export metadata dans chaque page.tsx. Le champ alternates.languages génère automatiquement les bonnes balises. C'est l'approche que nous utilisons pour chaque site bilingue, y compris celui-ci.

Comment vérifier votre implémentation

Utilisez le rapport Ciblage international de Google Search Console pour vérifier les erreurs hreflang. Pour les décisions stratégiques sur les langues, voir sites multilingues au Maroc. Si vous avez besoin d'hreflang correctement implémenté, parlons-en.