This guide describes how to use hreflang tags in your theme to allow search engines to surface regionalized and translated content.
## How it works
When search engines crawl websites, they look for hreflang tags to determine the language and region that the website is intended for, and then use that to serve the correct URL based on a user's language and location.
For example, if a store has a default URL of `your-store.myshopify.com`, and a Spanish language version of `es.your-store.myshopify.com`, then including hreflang tags in your theme will ensure that a customer located in Spain, or with a Spanish language setting, will be served the Spanish URL.
## hreflang tags in theme.liquid
An hreflang tag is a `link` element that identifies a localized URL of a website. You should add a unique hreflang tag for each language or region URL that exists, and they should be included in the `<head>`, which is commonly found in `theme.liquid`:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="layout/theme.liquid"></script>
<script type="text/plain" data-language="html">
RAW_MD_CONTENT<head>
<!-- head element content -->
<link rel="alternate" hreflang="en" href="your-store.myshopify.com" />
<link rel="alternate" hreflang="es" href="es.your-store.myshopify.com" />
</head>
END_RAW_MD_CONTENT</script>
</div>
</p>
The following examples show how to add hreflang tags to collection and product pages:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="layout/theme.liquid"></script>
<script type="text/plain" data-language="html">
RAW_MD_CONTENT<head>
<!-- head element content -->
<link rel="alternate" hreflang="en" href="your-store.myshopify.com/collections/{collection-name}" />
<link rel="alternate" hreflang="es" href="es.your-store.myshopify.com/collections/{collection-name}" />
</head>
END_RAW_MD_CONTENT</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="layout/theme.liquid"></script>
<script type="text/plain" data-language="html">
RAW_MD_CONTENT<head>
<!-- head element content -->
<link rel="alternate" hreflang="en" href="your-store.myshopify.com/products/{product-name}" />
<link rel="alternate" hreflang="es" href="es.your-store.myshopify.com/products/{product-name}" />
</head>
END_RAW_MD_CONTENT</script>
</div>
</p>
## Next steps
- Learn more about using [hreflang tags in multilingual stores](https://www.shopify.com/partners/blog/hreflang-tags-for-multilingual-stores).
- Refer to [Google's documentation](https://developers.google.com/search/docs/advanced/crawling/localized-versions) to learn more about hreflang tags and how to use them.