Option 1: Using a Plugin (Automatic Site-Wide Implementation)

The easiest method is to use a dedicated plugin that handles hreflang implementation across your entire site automatically.

1. 1

   Install and activate a plugin like "WPML" (premium), "Polylang" (free/premium), or "Hreflang Tags Lite" (free).

2. 2

   Configure your language settings in the plugin's dashboard:

   • For WPML: Go to WPML → Languages and set up your language options
   • For Polylang: Go to Languages → Settings to configure your languages
   • For Hreflang Tags Lite: Go to Settings → Hreflang Tags
3. 3

   Create content in different languages and associate them together. Most plugins provide an interface to connect translated pages.

4. 4

   The plugin will automatically add appropriate hreflang tags to all pages site-wide.

Option 2: Using Theme Functions (Automatic Site-Wide Implementation)

For more control, you can add code to your theme that automatically generates hreflang tags for all pages.

1. 1

   Open your theme's functions.php file or create a custom plugin.

2. 2

   Add the following code for smart, dynamic hreflang implementation:

   function add_dynamic_hreflang_tags() {
     // Get current URL and URL parts
     $current_url = home_url( $_SERVER['REQUEST_URI'] );
     $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http";
     $host = $_SERVER['HTTP_HOST'];
     $uri = $_SERVER['REQUEST_URI'];
     
     // Define your languages and their URL patterns
     $languages = array(
       'x-default' => array(
         'url_pattern' => $protocol . '://' . $host . preg_replace('/^\/(en|fr|es|de)\//i', '/', $uri),
         'is_default' => true
       ),
       'en' => array(
         'url_pattern' => $protocol . '://' . $host . '/en' . preg_replace('/^\/(en|fr|es|de)\//i', '/', $uri)
       ),
       'fr' => array(
         'url_pattern' => $protocol . '://' . $host . '/fr' . preg_replace('/^\/(en|fr|es|de)\//i', '/', $uri)
       ),
       'es' => array(
         'url_pattern' => $protocol . '://' . $host . '/es' . preg_replace('/^\/(en|fr|es|de)\//i', '/', $uri)
       ),
       'de' => array(
         'url_pattern' => $protocol . '://' . $host . '/de' . preg_replace('/^\/(en|fr|es|de)\//i', '/', $uri)
       )
     );
     
     // Output hreflang tags
     foreach ($languages as $lang_code => $lang_data) {
       echo '<link rel="alternate" hreflang="'.$lang_code.'" href="'.$lang_data['url_pattern'].'" />'."\n";
     }
   }
   
   // Hook into wp_head to add hreflang tags to all pages
   add_action( 'wp_head', 'add_dynamic_hreflang_tags' );

3. 3

   This will automatically add hreflang tags to all pages on your site, preserving the current page path across languages.

Option 3: Manual Page-by-Page Implementation

For specific pages where you need custom control over hreflang tags:

1. 1

   Use a plugin like "Yoast SEO" or "Rank Math" that allows page-specific hreflang settings.

2. 2

   Edit each page and find the "Advanced" or "International SEO" section in the SEO plugin settings.

3. 3

   Manually specify the hreflang codes and corresponding URLs for each language version.

Option 1: Using Shopify Markets (Automatic Site-Wide Implementation)

If you're using Shopify's built-in markets feature, you can enable automatic hreflang tags across your entire store.

1. 1

   Go to Settings > Markets in your Shopify admin.

2. 2

   Click "Add market" to set up different regions and languages.

3. 3

   Configure the settings for each market:

   • Select countries to include in each market
   • Choose the language for each market
   • Configure currency and pricing settings
   • Set up domain or subdirectory URL structure
4. 4

   Shopify will automatically add hreflang tags to all store pages based on your market settings.

Option 2: Automatic Implementation with Liquid (Site-Wide)

For more control, add dynamic hreflang tags to your theme that will work for all pages.

1. 1

   Go to Online Store > Themes > Edit code in your Shopify admin.

2. 2

   Open the theme.liquid file, which is located in the Layout folder.

3. 3

   Add this dynamic Liquid code before the closing </head> tag:

   <!-- Dynamic Hreflang tags -->
   <link rel="alternate" hreflang="x-default" href="{{ shop.url }}{{ request.path }}" />
   <link rel="alternate" hreflang="en" href="{{ shop.url }}{{ request.path }}" />
   <link rel="alternate" hreflang="fr" href="{{ shop.url }}/fr{{ request.path }}" />
   <link rel="alternate" hreflang="es" href="{{ shop.url }}/es{{ request.path }}" />
   <link rel="alternate" hreflang="de" href="{{ shop.url }}/de{{ request.path }}" />
   <!-- End hreflang tags -->

4. 4

   This code automatically includes the current page path in all hreflang URLs, ensuring proper page-to-page mapping across languages.

Option 3: Using a Third-Party App (Automatic Implementation)

Dedicated multilingual apps provide comprehensive automatic hreflang implementation.

1. 1

   Visit the Shopify App Store and search for "hreflang" or "multilingual".

2. 2

   Install and configure one of these recommended apps:

   • "Langify" - Full multilingual solution with automatic hreflang
   • "Weglot" - Translation and hreflang management
   • "LangShop" - Advanced multilingual features with hreflang support
3. 3

   Most apps provide automatic site-wide hreflang tag implementation once you configure your languages, with no manual coding required.

Option 1: Using the Language Module (Automatic Site-Wide Implementation)

Drupal's core Language module with proper configuration automatically adds hreflang tags to all pages.

1. 1

   Enable the required modules:

   • Language (core module)
   • Content Translation (core module)
   • Interface Translation (core module)
   • Configuration Translation (core module)

   drush en language content_translation locale config_translation -y

2. 2

   Configure languages at Administration > Configuration > Regional and language > Languages:

   • Click "Add language" to add all the languages you need
   • Set the default language
   • Configure the language detection and selection settings
3. 3

   Configure language detection at Administration > Configuration > Regional and language > Detection and selection:

   • Enable and configure URL detection method (recommended for SEO)
   • Set language URL patterns (e.g., prefix or domain)
   • Adjust detection method weights and order
4. 4

   Make content translatable at Administration > Configuration > Regional and language > Content language and translation:

   • Select which content types should be translatable
   • Choose which fields should be translatable
   • Configure any custom entities for translation
5. 5

   Translate your content:

   • Go to a content page and click the "Translate" tab
   • Add translations for each language
   • Link translations together in the translation interface
6. 6

   Drupal will automatically add the appropriate hreflang tags to all pages across your site.

Option 2: Using a Module (Alternative Automatic Implementation)

For more control or specific requirements, you can use dedicated modules.

1. 1

   Install and enable the Metatag module and its extensions:

   composer require drupal/metatag
   drush en metatag metatag_hreflang -y

2. 2

   Configure Metatag settings at Administration > Configuration > Search and metadata > Metatag:

   • Configure global settings for hreflang tags
   • Set up content-type specific configurations
   • Define default hreflang values for each language
3. 3

   Verify hreflang tags are being added to all pages correctly.

Other useful modules for international SEO include:

• Language Switcher Extended - Enhanced language switching
• Entity Translation Optimizer - Improves multilingual performance
• Pathauto - For consistent URL patterns across languages

Option 3: Custom Theme Implementation (Manual Implementation)

For complete control, you can add hreflang tags directly in your theme.

1. 1

   Create or edit your theme's [THEME_NAME].theme file:

2. 2

   Add a hook_preprocess_html function to add hreflang tags dynamically:

   /**
    * Implements hook_preprocess_html().
    */
   function THEME_NAME_preprocess_html(&$variables) {
     // Get current URL
     $current_url = \Drupal::request()->getUri();
     $path = \Drupal::service('path.current')->getPath();
     
     // Get language list
     $language_manager = \Drupal::languageManager();
     $languages = $language_manager->getLanguages();
     $default_language = $language_manager->getDefaultLanguage();
     
     // Get URL generator
     $url_generator = \Drupal::service('url_generator');
     
     // Add hreflang tags
     foreach ($languages as $language) {
       $langcode = $language->getId();
       
       // Generate URL for this language
       $language_url = $url_generator->generateFromRoute(
         '',
         [],
         ['language' => $language, 'absolute' => TRUE]
       );
       
       // Add hreflang link to head
       $variables['#attached']['html_head'][] = [
         [
           '#tag' => 'link',
           '#attributes' => [
             'rel' => 'alternate',
             'hreflang' => $langcode,
             'href' => $language_url,
           ],
         ],
         'hreflang_' . $langcode,
       ];
     }
     
     // Add x-default (usually points to default language)
     $variables['#attached']['html_head'][] = [
       [
         '#tag' => 'link',
         '#attributes' => [
           'rel' => 'alternate',
           'hreflang' => 'x-default',
           'href' => $url_generator->generateFromRoute(
             '',
             [],
             ['language' => $default_language, 'absolute' => TRUE]
           ),
         ],
       ],
       'hreflang_x_default',
     ];
   }

3. 3

   Clear the cache to apply changes:

   drush cr

Option 1: Using Joomla's Multilingual Associations (Automatic Site-Wide Implementation)

Joomla's built-in multilingual capabilities automatically add hreflang tags to all pages when properly configured.

1. 1

   Enable and install required languages:

   • Go to System > Install Languages
   • Select and install all languages you need
   • Set the default language in Global Configuration
2. 2

   Enable the language filter plugin:

   • Go to Extensions > Plugins
   • Find the "System - Language Filter" plugin and ensure it's enabled
   • Configure the plugin settings (recommended settings: detect browser, add alternate meta tags)
3. 3

   Configure language settings:

   • Go to System > Language(s) > Content Languages
   • Make sure all needed languages are published
   • Configure language codes correctly (these will be used in hreflang tags)
4. 4

   Create language associations for your content:

   • Go to Components > Multilingual Associations
   • Select the content type (articles, menu items, etc.)
   • Create associations between content in different languages
5. 5

   Create language-specific home pages and menus:

   • Create a menu for each language
   • Create home pages for each language
   • Associate menus and home pages via Multilingual Associations
6. 6

   Add a language switcher module:

   • Go to Extensions > Modules
   • Create a new "Language Switcher" module
   • Configure and publish it in a visible position
7. 7

   Verify hreflang tags are being added automatically:

   • Visit your site and view the page source
   • Check the <head> section for hreflang link tags
   • Ensure all language versions are properly linked

Option 2: Using SEO Extensions (Automatic Implementation)

For more control, install a dedicated SEO extension that handles hreflang tags.

1. 1

   Install an SEO extension that supports hreflang:

   • SH404SEF - Comprehensive SEO extension with hreflang support
   • EFSEO - Lightweight SEO extension with multilingual capabilities
   • JoomSEF - SEF URL and SEO features including hreflang
2. 2

   Configure the extension settings:

   • Enable hreflang tag generation in the extension settings
   • Configure language associations if required by the extension
   • Set default language and x-default behavior
3. 3

   Verify the tags are being added correctly to all pages.

Option 3: Template Override (Manual Implementation)

For complete control, you can add hreflang tags directly to your template.

1. 1

   Create a template override for the head section:

   • Navigate to /templates/[YOUR_TEMPLATE]/html/layouts/joomla/system
   • If the directory doesn't exist, create it
   • Copy the file from /layouts/joomla/system/html.php to this directory
2. 2

   Edit the html.php file to add custom PHP code that generates hreflang tags:

   <?php
   /**
    * Template override for generating hreflang tags
    */
   defined('_JEXEC') or die;
   
   use Joomla\CMS\Factory;
   use Joomla\CMS\Language\Multilanguage;
   use Joomla\CMS\Router\Route;
   
   // Add original file content here...
   
   // Get the application
   $app = Factory::getApplication();
   $doc = Factory::getDocument();
   
   // Only proceed if site is multilingual
   if (Multilanguage::isEnabled())
   {
     // Get the current URI
     $uri = JUri::getInstance();
     $current = $uri->toString(['scheme', 'host', 'port', 'path', 'query']);
     
     // Get current menu item
     $menu = $app->getMenu();
     $active = $menu->getActive();
     
     if ($active)
     {
       // Get the Language associations
       $assoc = JLanguageAssociations::getAssociations('com_menus', '#__menu', 'com_menus.item', $active->id);
       
       // Get all site languages
       $languages = JLanguageHelper::getLanguages();
       
       // Add hreflang tags for each language
       foreach ($languages as $language)
       {
         $langCode = $language->lang_code;
         
         // Skip languages without associations
         if (!isset($assoc[$langCode]))
         {
           continue;
         }
         
         // Create the URL for this language
         $itemid = $assoc[$langCode]->id;
         $router = $app->getRouter();
         
         // Build the language URL
         $uri = clone JUri::getInstance();
         $uri->setVar('Itemid', $itemid);
         $uri->setVar('lang', $langCode);
         
         // Add the tag
         $doc->addHeadLink($uri->toString(['scheme', 'host', 'port', 'path', 'query']), 'alternate', 'rel', ['hreflang' => $langCode]);
       }
       
       // Add x-default (using default language)
       $defaultLang = JComponentHelper::getParams('com_languages')->get('site');
       if (isset($assoc[$defaultLang]))
       {
         $itemid = $assoc[$defaultLang]->id;
         $uri = clone JUri::getInstance();
         $uri->setVar('Itemid', $itemid);
         $uri->setVar('lang', $defaultLang);
         $doc->addHeadLink($uri->toString(['scheme', 'host', 'port', 'path', 'query']), 'alternate', 'rel', ['hreflang' => 'x-default']);
       }
     }
   }
   
   // Continue with the rest of the original file...
   ?>

3. 3

   Clear the Joomla cache and check if the hreflang tags are appearing correctly.