Setting up hreflang tags
-
Hi everyone,
A quick question about setting up your Hreflang tags. Here you can see 2 examples:
As you can see, the order of the elements is different. Be aware, there is a tiny difference between the 2: the first Hreflang is written for a specific language in a specific country, the second one only contains a language code.
Is this the reason why the order is different or is this just a coincidence and doesn't the order of the elements matter at all?
Thanks,
Jens -
Always is pleasure to help : )
-
Ok good to know!
Thanks for your answer Roman!
-
The order of the of the tag is not relevant as long you follow the rules for region, language, or country The link will need to have the "rel", "href" "hreflang" tags. So if you put the href before or after "hreflang" is not relevant.
-
Hi Roman,
Thanks for your answer!
About the order of the hreflangs, I actually ment inside the Hreflang itself.
Is there a difference if the order of the elements is switched:
or
<link=rel="alternate" hreflang="en-us" href="http://example.com"></link=rel="alternate">The content is the same, but the positions "href"="http://example.com" and "hreflang"="en-us" are switched.
Do you know if it matters? Which one is correctly written then?
Thanks in advance,
Jens -
hreflang tags are a method to mark up pages that are similar in meaning but aimed at different languages and/or regions. You can use this for three types of variations:
- Content with regional variations like en-us and en-gb.
- Content in different languages like en, de and fr.
- A combination of different languages and regional variations.
You can use hreflang tags to target different markets that use the same language. This is a fairly common use case. Using hreflang tags you can differentiate between the US and the UK, or between Germany and Austria.
hreflang is code, which you can show to search engines in three different ways, more on that below. With this code you specify all the different URLs on your site(s) that have the same content. These URLs can have the same content in a different language, or the same language but targeted at a different region.
In a complete hreflang implementation, every URL specifies which other variations are available. When a user searches, Google goes through the following process:
- it determines that it wants to rank a URL;
- it checks whether that URL has hreflang annotations;
- it presents the searcher with the results with the most appropriate URL for that user.
The users current location and his language settings determine the most appropriate URL. A user can have multiple languages in his browser’s settings. I, for instance, have Dutch, English and German in there. The order in which these languages appear in my settings determines the most appropriate language.
One thing is very important when implementing hreflang: don’t be too specific! Let’s say you have three types of pages:
- German
- German, specifically aimed at Austria
- German, specifically aimed at Switzerland
You could choose to implement them using three hreflang attributes like this:
- de-de targeting German speakers in Germany
- de-at targeting German speakers in Austria
- de-ch targeting German speakers in Switzerland
However, which of these three results should Google show to someone searching in German in Belgium? The first page would probably be the best. To make sure that every German searching user who does not match either de-at or de-ch gets that one, change that hreflang attribute to just de. Specifying just the language is in many cases a smart thing to do.
It’s good to know that when you create sets of links like this, the most specific one wins. The order in which the search engines sees the links doesn’t matter, it’ll always try to match from most specific to least specific.
Technical implementation
1. Valid hreflang
The hreflang attribute needs to contain a value that consists of the language, optionally combined with a region.
- The language attribute needs to be in ISO 639-1 List of ISO 639-1 codes
- The region is optional and should be in ISO 3166-1 Alpha 2 formatISO 3166-1 alpha-2
2. Return links
The second basic rule is about return links. Regardless of your type of implementation, each URL needs return links to every other URL, note that it should point at the canonical versions, more on that below. The more languages you have the more you might be tempted to limit those return links: don’t. If you have 80 languages, you’ll have hreflang links for 80 URLs. There’s no getting around that.
**3. hreflang **link to self
The third and final basic rule is about self-links. Just like those return links might feel weird at some point, the hreflang link to the current page feels weird for some developers. It’s required though and not having it will mean your implementation will not work.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Deleting Tags without Penalty?
Hello - We have a site with over 1,000 tags. We added too many and would like a fresh start as they are creating a lot of duplicate pages on the site. What is the best way to go about deleting all of these tags without being penalized by Google? Is there a way to tell Google direclty to stop crawling them? We would prefer to not have that many pages just sit as 404 errors on the site. Thank you.
Technical SEO | | FamiliesLoveTravel0 -
Updated Title Tag preference
Hi, This was a topic a couple years ago https://moz.com/community/q/title-tag-use-comma-pipe-or-colon I was wondering if there was any update on this as the consensus on this thread seemed to say using a pipe as a separator is best, but in Moz's title tag recommendations it has hyphen and pipe Primary Keyword - Secondary Keyword | Brand Name Does anyone know if using a pipe | between the primary keyword and secondary has adverse effects? Also, does removing the brand name for the sake of length hurt you in any way? Thanks for the help!
Technical SEO | | AliMac260 -
Canonical Tags on Parameter Pages With Hreflang
Hey Everyone: We are currently implementing hreflang tags on our site, and we have many parameter pages with hreflang tags; however, I am afraid these may be counted as duplicate content without canonical tags. example.com/utm_source=tpi href='http://example.com/de" hreflang="de" rel="alternate" href='http://example.com/nl" hreflang="nl" rel="alternate" href='http://example.com/fr" hreflang="fr" rel="alternate" href='http://example.com/it" hreflang="it" rel="alternate" I have two questions 1. Do I need a canonical tag pointing to example.com ? 2. On the homepage without the parameter, should I add self referencing hreflang tags? (href="http://example.com/" hreflang="es" Thanks so much for your help! Kyle
Technical SEO | | TeespringMoz0 -
How similar do pages need to be to utilize the canonical tag
One of my pages is a help and questions page about completing a conversions and the other is the actual campaign landing page. They are both ranking for the same term. While the subject of both pages is similar the content is not. Is the rel canonical tag appropriate here?
Technical SEO | | cbarron0 -
For an image which is in the CSS and not the HTML, can you add an alt tag?
I would like to improve SEO on a page with three big images, which are currently hosted in the CSS. The sample I am working with is at http://xquisitevents.com/about-us/ and I put my cursor over the big picture of the wedding dress with bouquet, I inspected the element and saw this code in a div tag: #upperleft { background-image:url(images/AboutTopLeft.jpg); Can I add an alt tag to the CSS somehow, or can I have it added to the HTML? What is the best way to handle this, to include keywords like exquisite weddings and special event designs?
Technical SEO | | BridgetGibbons0 -
Duplicate Title Tags
Hi, Are these 2 title tags different enough? Notice only the 's' on Templates is switched <colgroup><col width="559"></colgroup>
Technical SEO | | Studio33
| Invoice Templates | Invoice Template | invoicing Software | Invoice Software Invoice Template | Invoice Templates | invoicing Software | Invoice Software | Thanks0 -
Schema Tags Configuration - Ecommerce Category Pages
I'm semi confident that some schema tags are implemented correctly on our ecommerce category pages.. but I would just like to double check. An example url http://www.freshcargo.co.uk/shoes I have just fixed some errors using the Google rich snippets tool... but the thing I'm not sure about is why the prices are being displayed as seperate items Eg: http://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fwww.freshcargo.co.uk%2Fshoes&view= Thanks in advance
Technical SEO | | edwardlewis0 -
Should I include A Description Tag for an article page
Hi, I am wondering if i should include a description tag for an article page where the news on that page will change around five times a day. I am not sure if to fill a description in for local news or to leave it blank so the search engines pick up the latest local news and then the next day they show the latest local news again in the search engines instead of having a static description of the news page. any help would be great
Technical SEO | | ClaireH-1848860