Content Strategy & SEO

MatthewShepherd
HubSpot Moderator
HubSpot Moderator

Creating a dynamic x-default Hreflang tag [A How To]

Hi community!

As you may know, if you create a multi-lingual site and multi-language content groups in HubSpot CMS, the CMS will insert hreflang tags for each locale and language in your page's multi-language content group and a self-referencing hreflang tag. Hreflang tags suggest to search engines like Google which version of your content to serve up in search results based on their language and region. So they are a great asset if you are working on your International SEO.

In addition to the default hreflang tags added by the CMS, sometimes I see HubSpot CMS users trying to implement x-default hreflang tags dynamically in their head code using custom HubL code.  This can be tricky and if not implemented correctly, can cause hreflang errors. X-default tags, which are optional (so only use if you know what these are and the implications of using them), suggest to search engines the default version of a  page to serve up if we don't have a page matching the user's language or locale. Below is some sample code you can use in your header templates (site header HTML or in you custom coded templates) to achieve a dynamic x-default hreflang tag in HubSpot.  I'm no HubL master, so if you know of a better way of doing this, feel free to comment below! 

 

 

 

{% if absolute_url is string_containing "/de/"  %}
  <link rel="alternate" href="{{ content.translated_content['en'].absolute_url }}" hreflang="x-default">
{% else %}
  <link rel="alternate" href="{{ absolute_url }}" hreflang="x-default">
{% endif %}

 

 

p.s. keep in mind if you are targeting locale and language e.g. your URLs look like de-de and you want to look up that version of your translated content using the translate content variable it would look like {{ content.translated_content['de-de'].absolute_url }}.


In this example, I have English and German pages, but I want my x-default tag to suggest search engines show the English version of my pages where we don't have a page specifically targeting the browser's language or locale. Our 'if' statement checks if the current page's URL contains /de/ (having set my pages to include a language slug); if it does, we look up the English version of the page and output the absolute URL of that page in our x-default tag. If it doesn't, we assume this is an English page and output the absolute URL of the current page.

If you have more than two languages, you would need to adapt the if statement to check for each language.

I hope this helps some of you looking for a way to implement an x-default hreflang tag. Again x-default isn't required by search engines and isn't a good fit in all cases, so only implement this if you know what you are doing!



Matthew Shepherd

Senior Customer Success Manager

HubSpot

He/Him

linkedin.com/in/matthewshepherd/
https://www.hubspot.com/services/professional
0 Replies 0

0 Replies

No replies on this post just yet

No one has replied to this post quite yet. Check back soon to see if someone has a solution, or submit your own reply if you know how to help! Karma is real.

Reply to post

Need help replying? Check out our Community Guidelines