Implementing hreflang correctly depends heavily on the platform you use. In WordPress, a plugin can handle it automatically. In Shopify, Markets has its own management system. In Next.js, you configure it at the framework level. This guide covers the three most common scenarios with concrete steps.

Hreflang in WordPress

Option 1: WPML (most complete solution)

WPML is the most powerful multilingual plugin for WordPress. It automatically manages hreflang tags for all translated pages, including bidirectionality and x-default. It is paid (starting at $39/year) but is the most robust option.

1.Install and activate WPML (Sitepress Multilingual CMS + WPML String Translation).
2.Go to WPML → Languages and configure the languages your site will use.
3.For each page, a translation panel will appear in the editor — create the translated version from there.
4.WPML automatically adds the correct hreflang tags to the <head> of each page.
5.Verify on a few pages with the Hreflang Validator that bidirectionality is correct.

Option 2: Polylang (free alternative)

Polylang has a functional free version for small sites. It manages translations of pages, posts, and taxonomies, and automatically adds hreflang. The Pro version adds WooCommerce support and performance improvements.

1.Install Polylang from the WordPress plugin repository.
2.Go to Languages → Languages and add the languages you need.
3.On each page or post, a "Languages" panel appears in the editor. Link the translations to each other.
4.Polylang automatically adds hreflang tags for content linked as translations.

Option 3: Yoast SEO with manual configuration

If you already have Yoast SEO and prefer not to install a full multilingual plugin, you can add hreflang manually using the custom code field in the <head>. This is not ideal for large sites, but works for sites with only a few pages.

Without a multilingual plugin, you will need to manually update hreflang tags every time you add a new translated page. For more than 20 pages, this approach becomes unmanageable.

Hreflang in Shopify

Shopify manages hreflang differently depending on whether you use separate stores per market or Shopify's Markets system.

With Shopify Markets (subdomain or subfolder per market)

If you use Shopify's Markets feature, the platform automatically manages hreflang tags for each configured market. Shopify adds the correct tags based on the languages and countries assigned to each market.

1.Go to Settings → Markets in your Shopify admin panel.
2.Configure each market with its language and target countries.
3.Shopify automatically generates URLs with the language prefix (/es/, /fr/, etc.) and adds hreflang.
4.Verify with the Hreflang Validator that the configuration is correct — Shopify can have bidirectionality issues in collections with many products.

With separate Shopify stores per country

If you have different Shopify stores for each country (example.com, example.co.uk, example.com.mx), you need to add hreflang manually in the theme. Edit the theme.liquid file and add hreflang tags in the <head> section.

Hreflang in Next.js

With next-intl and the App Router (Next.js 13+)

In Next.js with the App Router, you can generate hreflang tags dynamically using the generateMetadata function on each page. This approach is the cleanest and most scalable for Next.js applications.

typescript

// app/[locale]/blog/[slug]/page.tsx
import { Metadata } from 'next'

const locales = ['es', 'en', 'fr']

export async function generateMetadata({ params }: { params: { locale: string; slug: string } }): Promise<Metadata> {
  const { locale, slug } = params
  const baseUrl = 'https://example.com'

  const languages: Record<string, string> = {}
  for (const l of locales) {
    languages[l] = `${baseUrl}/${l}/blog/${slug}`
  }
  languages['x-default'] = `${baseUrl}/en/blog/${slug}`

  return {
    alternates: {
      canonical: `${baseUrl}/${locale}/blog/${slug}`,
      languages,
    },
  }
}

Next.js automatically renders these as <link rel="alternate" hreflang="..."> tags in the <head> of each page. Make sure the languages object includes all available language variants for that page.

With the Pages Router (Next.js 12 and earlier)

In the Pages Router, Next.js has native i18n support in next.config.js, but hreflang tags must be added manually using next/head on each page or in the _app.js component.

Final verification: validate your implementation

Regardless of the CMS or framework you use, the final step is always to verify that the generated tags are correct. Enter the URLs of a complete cluster (all language variants of the same page) in iRankly's Hreflang Validator to confirm that bidirectionality, codes, and URLs are correct.

Prueba la herramienta gratis

Hreflang ValidatorAnaliza tus URLs con {tool} de iRankly. Sin registro, sin tarjeta.

Usar herramienta gratis

How to Implement Hreflang in WordPress, Shopify, and Next.js