When managing a multilingual website, you may encounter issues such as:
- "I created both Japanese and English pages, but somehow the Japanese page appears in English search results."
- "Conversely, I'm searching in Japanese, but the English page shows up."
In many cases, these problems stem from hreflang tag misconfigurations or omissions. This article outlines the fundamental concepts of hreflang and common mistakes, specifically for ryokans and small accommodations. Understanding these principles will enable you to provide clear instructions and confirmations when working with a web development company.
What is an hreflang Tag?
An hreflang tag serves as a marker to inform search engines about the language and regional targeting of a page, as well as where to find other language versions of the same content. This allows Google to prioritize displaying the Japanese page to users searching in Japanese and the English page to those searching in English.
Without hreflang tags or with incorrect configurations, search engines cannot accurately determine which pages to show to users in different languages. This can lead to unintended language pages being displayed or diluted rankings that make it difficult for both pages to achieve good search positions.
Basic Syntax
Within the <head> section of each page, you should include links to all language versions, including the page itself.
<link rel="alternate" hreflang="ja" href="https://www.example-ryokan.com/" />
<link rel="alternate" hreflang="en" href="https://www.example-ryokan.com/en/" />
<link rel="alternate" hreflang="x-default" href="https://www.example-ryokan.com/" />
The key point is to ensure that both the Japanese and English pages include hreflang tags for each language. A common oversight is to set the hreflang tag only on the English page while omitting it from the Japanese page.
The x-default tag specifies the default page for users who do not match any specific language (e.g., when the language setting is unknown), and it is often set to the Japanese page.
Choosing a URL Structure
There are primarily three patterns for the URL structure of multilingual websites:
| Structure | Example | Features |
|---|---|---|
| Subdirectory | example.com/en/ | Easy to set up and manage, suitable for many accommodation websites |
| Subdomain | en.example.com | Flexible depending on server settings, but slightly more complex to manage |
| Parameter | example.com/?lang=en | Not recommended as it is less favored by search engines |
Unless there are special circumstances, a subdirectory structure (/en/) is simple and easy to manage, and it is commonly adopted by many web development companies.
Common Mistakes
Mistake 1: Missing Self-Referencing Tags
A common error is having hreflang tags from the English page to the Japanese page, but omitting the hreflang="en" tag that points back to the English page itself. Each language page must enumerate all language versions, including itself.
Mistake 2: Lack of Mutual Linking
If the Japanese page has an hreflang tag pointing to the English page, but the English page does not have a corresponding tag pointing back to the Japanese page, the setup is one-sided. Hreflang must be mutually consistent to be recognized correctly.
Mistake 3: Inconsistent URL Formatting
Cases where the actual URL and the URL in the hreflang tag do not match exactly, such as https://example.com/en/ versus https://example.com/en, can lead to recognition errors, even with minor discrepancies.
Mistake 4: Hreflang Set but Content Not Translated
Even if the hreflang tags are correctly configured, if the English page content is not translated or is extremely sparse, it can lead to issues. Hreflang tags only convey the "language relationship" and do not guarantee content quality.
Mistake 5: Leaving CMS Multilingual Plugin on Default Settings
When implementing a multilingual plugin in a CMS like WordPress, it may auto-generate hreflang tags based on default settings that do not align with the actual page structure. It’s advisable to verify the tags being output to ensure they are correct.
How to Verify Your Configuration
You can check for unintended language pages by navigating to Google Search Console under "Index" > "Pages". Additionally, you can view the page source in your browser and search for hreflang to visually confirm that the relevant language tags are correctly set in both directions.
Conclusion: A Subtle Yet Fundamental Aspect
Setting hreflang tags is an aspect that may not yield visible effects like design or content but is crucial nonetheless. If these tags are not configured correctly, even the best English content will not reach the right users. This is a critical point to check before launching or renewing a multilingual site.
Studio HAKO's HAKO Scan offers a free diagnosis of your site's international SEO status, including hreflang configuration. Start by assessing your current situation.