hreflang for Moroccan websites: the technical setup most agencies skip
If your Moroccan website has French and English versions, you need hreflang tags. Most agencies skip them. Here's how to implement them correctly.
Your Moroccan website has a French version and an English version. Google sees two pages with similar content in different languages. Without hreflang tags, Google doesn't know which version to show to which audience. It might show your French page to English-speaking tourists or your English page to Francophone Moroccan visitors. hreflang solves this problem, and almost no Moroccan web agency implements it correctly.
What hreflang tags do
hreflang is an HTML attribute that tells search engines: "This page exists in multiple languages. Here are the URLs for each version." When Google encounters a page with hreflang tags, it uses them to serve the correct language version to each user based on their language preferences and location.
Without hreflang, Google treats your French and English pages as potential duplicates. It picks one to index and may suppress the other. With hreflang, both versions are indexed and each reaches the right audience.
The correct hreflang implementation for Morocco
For a Moroccan website with French and English versions, each page needs these tags in the HTML head:
On the English page:
<link rel="alternate" hreflang="en" href="https://www.example.ma/page-en" />
<link rel="alternate" hreflang="fr" href="https://www.example.ma/page-fr" />
<link rel="alternate" hreflang="x-default" href="https://www.example.ma/page-en" />
On the French page: The exact same tags. Both pages must reference each other bidirectionally. This is the most common mistake — agencies add hreflang on one page but not the other.
x-default: the fallback most people forget
The x-default hreflang value tells Google which page to show when the user's language does not match any of your available versions. For a Moroccan business, x-default should typically point to your English page (for international visitors) or your French page (if your primary audience is Francophone).
URL structure for multilingual Moroccan sites
Option 1 — Subdirectories (recommended): example.ma/fr/page and example.ma/en/page. This keeps everything under one domain, shares link equity, and is the simplest to implement and maintain.
Option 2 — Separate URLs: example.ma/page-fr and example.ma/page-en. This is what we use at Sentinel Studio. Each language version has its own slug, optimized for SEO in that language.
Option 3 — Subdomains: fr.example.ma and en.example.ma. This works but splits your domain authority between subdomains, which can dilute your SEO strength.
Common mistakes on Moroccan multilingual sites
One-directional hreflang. Page A links to Page B as an alternate, but Page B does not link back to Page A. Google ignores one-directional hreflang tags.
Missing self-reference. Each page must include an hreflang tag pointing to itself. The English page must have an hreflang="en" tag pointing to its own URL.
Non-canonical URLs in hreflang. If your canonical URL is https://www.example.ma/page but your hreflang points to https://example.ma/page (without www), Google sees a conflict and may ignore both.
Not implementing hreflang at all. This is the most common "mistake" — it is just not done. The result: Google shows the wrong language to your visitors, or suppresses one version entirely.
How to implement hreflang in Next.js
In Next.js App Router, hreflang is implemented via the metadata export in each page.tsx file. The alternates.languages field generates the correct hreflang link tags automatically. This is the approach we use for every bilingual site we build — including this one.
For WordPress, WPML and Polylang plugins handle hreflang generation. But verify the output — plugin-generated hreflang is often malformed or missing the x-default tag.
How to verify your hreflang implementation
Use Google Search Console's International Targeting report to check for hreflang errors. Common issues it flags: missing return tags, conflicting hreflang and canonical tags, and unsupported language codes. Fix these errors. They directly affect which version of your page Google serves to each audience.
For the strategic decisions behind choosing languages for your Moroccan site, see multilingual websites in Morocco: French, Arabic, or both?. If you need hreflang implemented correctly on your site, let's make it happen.
Ready to build something that works?
We implement hreflang correctly on every multilingual site we build.
Need hreflang done right? →