Hreflang tags: everything you need to know to start implementing them
1 like1,958 views
This document explains the importance of hreflang tags for optimizing web pages for different languages and regions, helping search engines serve the correct language version to users. It provides guidelines for implementing hreflang, including rules for self-referencing, using absolute URLs, and establishing bidirectional links. The content also highlights common mistakes and clarifies that while hreflang does not directly impact rankings, it can lead to more targeted traffic.
Hreflang tags: everything you need to know to start implementing them
- 1. Hreflang tags: everything you need to know to start implementing them Sara Moccad-Sayegh | Liip SLIDESHARE.NET/SaraMoccandSayegh @moccandsayegh
- 2. Let me introduce myself – I work at Liip, a web & mobile development agency – #SEOnerdSwitzerland Meetup co-founder @moccandsayegh #brightonseo
- 6. What you want to achieve by using hreflang @moccandsayegh #brightonseo You want users to be served with the correct language version of the page.
- 7. E.g. of hreflang results for a FR & GE speaker in CH @moccandsayegh #brightonseo
- 8. E.g. of hreflang results for a FR & EN speaker in CH & USA @moccandsayegh #brightonseo
- 10. @moccandsayegh #brightonseo Hreflang is a technical solution used to tell search engines which language/country your webpage is targeting.
- 11. How to implement hreflang @moccandsayegh #brightonseo HTML attribute HTTP Header XML attribute inside Sitemap
- 12. How it looks in code @moccandsayegh #brightonseo
- 13. Hints VS directives @moccandsayegh #brightonseo hreflang is a hint not a directive. As a result, search engines do not always respect hreflang.
- 14. What you need to know before starting implementation
- 15. 15 Do all search engines use hreflang signals?
- 16. @moccandsayegh #brightonseo Google & Yandex YES Bing YES/NO Baidu ? 16
- 18. 1. Each language version must Self-referencing @moccandsayegh #brightonseo US page hreflang="en-US"
- 19. 2. Use absolute URLs @moccandsayegh #brightonseo Absolute https://www.eg.com/xy Relative /xy
- 20. 3. Bidirectional links @moccandsayegh #brightonseo Swiss DE page hreflang="en-US" US page hreflang="de-CH"
- 21. hreflang setup
- 23. @moccandsayegh #brightonseo Country Code Switzerland CH Germany DE France FR United States of America US
- 25. 1. A country with multiple languages @moccandsayegh #brightonseo Country CH Lang. German French Italian Reto.
- 26. 2. Several countries with the same language @moccandsayegh #brightonseo Lang. German Countries CH DE AT
- 27. 3. Content translated for several countries @moccandsayegh #brightonseo Lang. German French English Countries DE FR US
- 29. Hreflang e.g. 5 versions of the same page @moccandsayegh #brightonseo Languages DE DE FR FR EN Countries DE CH CH FR All
- 30. The code for German speakers in Germany @moccandsayegh #brightonseo <head> <title>Example</title> <link rel="alternate" hreflang="de-DE" href="https://de.example.com/page.html" /> <link rel="alternate" hreflang="de-CH"href="https://ch-de.example.com/page.html"/> <link rel="alternate" hreflang="fr-CH" href="https://ch-fr.example.com/page.html" /> <link rel="alternate" hreflang="fr-FR" href="https://fr.example.com/page.html" /> <link rel="alternate" hreflang="en" href="https://en.example.com/page.html" /> <link rel="alternate" hreflang="x-default" href="https://en.www.example.com/" /> </head>
- 31. What is the x-default @moccandsayegh #brightonseo The x-default tag is the fallback page for unmatched language/country. If we take the previous e.g. there is no page in Spanish, so the fallback would be the English page.
- 32. X-default in the code @moccandsayegh #brightonseo
- 34. 34 Problems
- 35. 1. Different assortment between stores E.g. UKand DE @moccandsayegh #brightonseo
- 36. 2. Difficulty in maintaining a "consistent" URL key @moccandsayegh #brightonseo
- 37. 37 Solution
- 38. @moccandsayegh #brightonseo Applied hreflang on domains that share the same language
- 39. Example of Ralph Lauren sneakers for the CH page @moccandsayegh #brightonseo Belgium hreflang="fr-BE" Switzerland hreflang="fr-CH" France hreflang="fr-FR"
- 41. The difference between canonical & hreflang - The canonical tag is used to define the master copy of a page - Hreflang tags are used to inform search engines of the correct language version. @moccandsayegh #brightonseo | April 2022
- 42. How the DE page code looks like Canonical <link rel="canonical" href="de.URL” /> Hreflang <link rel="alternate" hreflang="de-DE" href="de.URL" />
- 44. 1. Self-referencing hreflang @moccandsayegh #brightonseo | April 2022 Not adding the self-referencing hreflang. If we take the above example, the self-reference for the German page is the German hreflang.
- 45. 2. Missing reciprocal hreflang @moccandsayegh #brightonseo Missing reciprocal hreflang. For instance, the de-DE page should also be on the de-CH, fr-CH, fr-FR, EN versions.
- 47. Google’s answer @moccandsayegh #brightonseo “You will NOT receive a ranking benefit per se, at least not in the internal sense of the term. What you will receive is more targeted traffic.”
- 48. Why hreflang is important @moccandsayegh #brightonseo You will serve the right content to the right user