Adding HREFLANG Code on Your Web Pages – Strikingly Help Center

HREFLANG tells search engines which language and regional version of your web page to display to users based on their location and language preferences. This is important if you want to show different language or regional versions of your site to different types of visitors. This guide will walk you through the process of adding HREFLANG code to your web pages effectively.

Step 1: Understand HREFLANG Tags

Before diving into the implementation, let's go over how HREFLANG tags work. These tags are placed in the <head> section of your HTML code and indicate the language and regional targeting of a specific web page. HREFLANG tags are typically added in the form of HTML link elements and contain information such as language codes and country codes.

Here's an example of an HREFLANG tag:

<link rel="alternate" hreflang="en" href="https://example.com/en/page">

In this example, en represents the English language, and https://example.com/en/page is the URL of the English version of the page.

See Google's official guide here for a list of supported language/region codes.

Step 2: Plan Your HREFLANG Strategy

Before you start implementing HREFLANG tags, plan your international SEO strategy. Determine which languages and regions you want to target and create a list of the URLs for each language and region. Each URL should show the appropriate content for that language or region. You can do this by building separate pages or sites for each language or region you want to target.

Step 3: Add HREFLANG Tags to Your HTML

Now, let's add HREFLANG tags to your web pages. Follow these steps:

Go to the "Custom Code" editor of your site: In the editor of the site you would like to add HREFLANG code to, click on "Settings" -> "Show Advanced" -> "Custom Code"
Make sure you are on the "Header Code" tab. This is where you'll insert your HREFLANG tags.
Define a default language/region first: Decide on a default language or region that you want to show to users when their preferences don't match any of the specified HREFLANG tags. This default version should be the most widely understood or the version of your content that is most relevant to a global audience. (A rule of thumb is to use the language that you started your website in as the default.) Here's an example that uses the English version of the page as default:
```
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page">
```
Insert HREFLANG tags for all languages: For each language/region version of the page, insert an HREFLANG tag. Here's the general format:
```
<link rel="alternate" hreflang="language-code" href="URL">
```
Replace language-code with the appropriate language code (e.g., "en" for English) or x-default for your default language version. Replace URL with the URL of the corresponding language/region version of the page.

The final result should look something like this:
```
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/pagina">
<link rel="alternate" hreflang="de" href="https://example.com/de/seite">
```
Save and publish your website: Click the green "Save" button to save the code, then publish your website.
Wait for search engines to re-index your site, which may take a few days or up to a week. Search results should soon reflect these language settings.