Essential for building a multilingual site! Language Switcher Introduction Guide (WordPress compatible)
Do you have a multilingual website and want to increase access from overseas and reach more users?
This article provides a thorough explanation of the "language switcher," which is essential for multilingual sites, from its role, to how to implement it, design, and SEO measures. By implementing a language switcher, visitors to your site will be able to smoothly switch between languages, providing a pleasant user experience. As a result, you can expect a decrease in direct return rates, an increase in time spent on the site, and an increase in conversion rates.
In addition, the implementation of a proper language switcher will greatly contribute to multilingual SEO and help you succeed in the global marketplace. It also provides easy-to-follow instructions on how to configure them.
This article will help you understand the importance of a language switcher in a multilingual site and help you choose the best implementation method. You will then be able to enhance your multilingual SEO strategy and deliver your site's appeal to users around the world.
1. what is a language switcher? Why is it necessary for a multilingual website?
If you want to make your website multilingual,A system that allows users to easily switch languagesis essential. The "language switcher" provides this mechanism. A language switcher can appear in a variety of forms, such as buttons, drop-down menus, and flag icons on a website, and can be clicked or tapped to switch between languages. For a multilingual website, the language switcher is not just a feature, but a critical component of the user experience, SEO, and successful global expansion.
1.1 Role of the Language Switcher
The main role of the language switcher is,Immediate change of the display language of the website to the language selected by the userIt is. This allows users who speak different languages to view website content in their own native language. For example, if a website is available in Japanese, English, and Chinese, a language switcher allows users to smoothly switch between these languages. The language switcher facilitates navigation of a multilingual website and provides a comfortable environment for users to access information in their preferred language.
1.2 Importance of Language Switchers in Multilingual Sites
Language switchers play a major role in three important aspects of a multilingual website: improving the user experience, improving SEO effectiveness, and facilitating global expansion.
1.2.1 Improving the User Experience
In multilingual websites,Provides a pleasant user experienceIt is very important to make sure that your website is in a language that the user understands. If users cannot browse a website in a language they understand, they are more likely to leave quickly. By making it easy for users to select their preferred language, language switchers provide a pleasant browsing experience and help reduce abandonment rates. Ease of use of a website can also increase user engagement and conversion rates. For example, on an e-commerce site, if users can understand product information and purchase procedures in their native language, they are more likely to make a purchase.
1.2.2 Effect on SEO
The language switcher is,Multilingual SEOIt is also effective for Search engines recognize the presence of a language switcher and understand that a website is multilingual. This increases the likelihood of being properly displayed in search results for each language. Language switchers also facilitate the implementation of hreflang tags, which help search engines properly recognize and index each language page. The hreflang tag is an important element in communicating the URL of each language version to search engines, and when properly configured, ensures that the appropriate page is displayed to users in the target language. This will lead to increased website traffic and improved search rankings.
Reference:About hreflang - Google Search Central
1.2.3 Facilitating Global Expansion
Expansion into global marketsMultilingual websites are essential for companies that want to Language switchers play a central role in building a multilingual website, making it easy for users around the world to access your website. Language switchers enable users who speak different languages to seamlessly browse a website, helping companies increase brand awareness, expand their customer base, and ultimately succeed in the global marketplace. Language switchers are a powerful tool to support your company's international growth.
2. how to implement a language switcher in WordPress
There are two main ways to implement a language switcher in WordPress: one is to use a plugin, and the other is to customize the theme. Each has its own advantages and disadvantages, so choose the method best suited to your site's situation.
2.1 How to implement using plug-ins
The use of plug-ins is recommended for beginners, as they can easily build multilingual sites. There are many multilingual plug-ins available, but here are some of the most common ones.
2.1.1 Setting up a language switcher with Polylang
Polylang is a popular free multilingualization plugin. It has the advantage that translated content can be managed on a per-post basis, making it easy to share the translation workload. Customization of the language switcher is also relatively easy.However, the free version does not provide translation functions and requires the use of a separate translation plug-in or service.
For more information on specific settings,How to set up the language switcher in Polylang official documentationfor more information.
2.1.2 Setting up a language switcher with TranslatePress
TranslatePress is a plugin that features front-end translation work. It has the advantage that you can work while visually checking the translation content, which makes it easier to improve the accuracy of the translation.The free version offers only basic functionality; advanced features require the purchase of a paid version.
For information on how to set up the TranslatePress language switcher,How to add a language switcher in the official TranslatePress documentationfor more information.
2.1.3 Setting up a language switcher with Weglot
Weglot is a multilingualization plug-in with an automatic translation function. It is attractive in that it is easy to set up initially and eliminates the need for translation. However,The free version has a limited number of characters to be translated, so the paid version is recommended for large sites.
For more information on customizing Weglot's language switcher,Customize Language Buttons in Weglot Official Documentationfor more information.
2.1.4 Setting up a language switcher using WPML
WPML is a well-established multilingualization plugin with versatile features and flexible customization. While it offers a wide variety of features, it has many configuration items and may seem a bit complicated for beginners.WPML is a paid plugin and no free version is provided.
For information on how to set up a language switcher for WPML,Language switcher option in the official WPML documentationfor more information.
2.1.5 Plug-in recommendations [Comparison table].
| Plug-in name | Price | feature | Advantages | demerit |
|---|---|---|---|---|
| Polylang | Free/charged | Manage translated content by post | Easy to share translation work | No translation function in the free version |
| TranslatePress | Free/charged | Translation work can be done on the front end | Work while visually checking the content of the translation | Free version has limited functionality. |
| Weglot | Free/charged | Automatic translation function | Easy initial setup, less translation effort | The free version has a limited number of characters to be translated. |
| WPML | fee | Versatile and flexible customization | Diverse needs can be met. | Settings are complex and can be difficult for beginners |
2.2 How to implement by theme customization
The method of customizing a theme requires knowledge of PHP, HTML, and CSS, and is therefore suitable for advanced users.Although highly customizable, it is recommended that child themes be created, as they may be overwritten when the theme is updated.
The specific implementation depends on the theme you are using, but in general, you can create a language switcher by using WordPress functions to retrieve the current language and generate links to each language You can create a language switcher by using WordPress functions to get the current language and generate links to each language.When customizing a theme, be sure to make a backup before proceeding.
For more information,Official WordPress Multilingual Function ReferenceSee for example.
3. design and placement of language switcher
In a multilingual website, the language switcher is not just a feature, but an important element that has a significant impact on user experience and SEO. Choosing the right design and placement can improve the usability of your website and lead to higher conversion rates. In this chapter, we will discuss the design and placement of language switchers in detail.
3.1 Selecting the optimal design
The design of the language switcher should be carefully chosen to match the website design and target user demographic. It is important to consider visibility, ease of use, and harmony with the overall website design. The main types of designs are as follows
- drop-down systemLanguages: A method that displays a list of multiple languages and switches to the language selected by the user. Suitable for many languages.WPMLIt is often used in multilingual plug-ins such as
- button-typeThe method is to display a button corresponding to each language and switch between them with a click. This is a simple design, suitable for a limited number of languages. For example, it is often seen on dual-language sites (Japanese and English).
- Flag icon typeThe method is to display an icon of the flag corresponding to each language and click to switch between the flags. While visually easy to understand, be aware that the country and language do not always match. For example, there are several English-speaking countries, such as the United States, the United Kingdom, and Australia.
- text expressionLanguage: The language name is displayed in text, and the method is toggled by clicking. Suitable for simple and minimalist designs.
3.2 Consideration of effective placement locations
It is important that the location of the language switcher be easily found and accessible to users. The following is a summary of commonly used placement locations and their advantages and disadvantages.
| Location | Advantages | demerit |
|---|---|---|
| header | It is the most common placement location and is easy for users to find quickly. | Header may be cluttered. |
| footer (e.g. of a file) | It has more space than the header and does not interfere with the design. | Users may miss it. |
| sidebar (as on a web page) | Effective for blogs, news sites, etc. Easily accessible because it is always visible even when scrolling. | Not suitable for sites designed without sidebars. |
| within content | Effective for encouraging switching to a language related to specific content. | Users may miss it. |
In addition to the above, there are various other placement methods, such as placing it within the navigation menu, or displaying it floating and always on the screen. Choose the most appropriate location according to your website's structure, design, and target user base. For example,WeglotMultilingual plug-ins, such as the one in the following table, offer a variety of placement options.
usabilityIt is also important to verify which design and layout is most effective by conducting A/B testing. By using access analysis tools and other tools to analyze user behavior, further improvements can be made.
4. points to note when introducing a language switcher
There are a few things to keep in mind when implementing a language switcher on a multilingual site. If not configured correctly, it can impair the user experience and reduce SEO effectiveness. Before implementing a language switcher, check the following points and take appropriate measures.
4.1 Checking Translation Accuracy
The implementation of a language switcher does not mean that all content will be automatically and perfectly translated. Especially when machine translation is used, there is a possibility that mistranslations or unnatural expressions may be included.Be sure to check the translation before publishing and make corrections as necessary.Proofreading by professional translators can also be considered to achieve a higher quality multilingual site. It is also effective to use machine translation for some parts of the site and translate important parts by hand to achieve both budget and accuracy.
4.2 Impact on display speed
The implementation of a language switcher may affect the display speed of the site.In particular, complex language switchers that make heavy use of JavaScript can slow down page loading speeds.Since display speed has a significant impact on SEO as well as user experience, measure the speed changes resulting from the introduction of a language switcher and optimize as necessary. For example, it is important to consider using cache plug-ins and optimizing images in conjunction with measures to improve overall site display speed.
The size of the language file also affects display speed.If language files are too large, compressing or deleting unnecessary language files may improve display speed.
4.3 Mobile support
With the proliferation of smartphones, mobile support has become a necessity. Language switchers are no exception,It should be designed and arranged to operate comfortably on a smartphone.Make sure the UI is easy to view and tap on small screens. It is important to make sure that the site can be viewed on a variety of devices, such as responsive design support and a dedicated language switcher for mobile devices.
4.4 Working with Multilingual SEO
Language switchers are closely related to multilingual SEO.By working with the hreflang tag, you can tell search engines the correct language for each page.Carefully configure the hreflang tag, as a misconfiguration of the tag can significantly damage SEO effectiveness. It is recommended that you use a tool to check whether the hreflang tag is correctly linked to the language switcher. For more information on how to set this up, please refer toOfficial Google Documentationand others.
4.5 Plug-in selection and configuration
When implementing a language switcher in WordPress, it is common to use a plugin.Since different plug-ins have different functions and configuration methods, it is important to select the plug-in that best suits your site's requirements.In addition, because a misconfiguration of a plugin may lead to unexpected problems, please configure the plugin carefully by referring to the official documentation and other information. It is also important to choose a plugin with a good support system to ensure smooth response to any problems that may occur.
4.6 Checking the behavior of the language switcher
After installing the language switcher, actually browse the site in various languages to confirm that it works correctly.It is important to check for broken links and display corruption, and that the translated content is properly displayed.Careful testing is especially necessary for sites where content is generated dynamically, since the language switcher may not work properly due to JavaScript errors. It is also important to check with different browsers and devices.
| important point | Confirmation |
|---|---|
| Translation accuracy | Is the machine translation accurate enough or does it need to be manually corrected? |
| Display speed | Is there any speed reduction due to the introduction of the language switcher? |
| Mobile Support | Can it be comfortably operated with a smartphone? |
| Multilingual SEO | Does it work correctly with hreflang tags? |
| Plug-in Selection | Are you selecting the right plug-ins for your site requirements? |
| Plug-in Settings | Have you checked the official documentation for configuration errors? |
| behavior check | Does it work correctly in a variety of languages, browsers, and devices? |
5. various language switcher design examples
The design of a language switcher has a significant impact on site usability and brand image. Here are some typical design examples.
5.1 Drop-down type
The drop-down language switcher is compact and easy to use for many languages. A click or hover brings up the language list and the user can select the desired language.Drop-down menus are often used on multilingual sites because they can display many languages in a limited space.However,If the list is too long, selection becomes difficult.Therefore, if the number of languages is very large, other formats may need to be considered. For example,WordPressIt is also used on the official website of
5.2 Button type
Button language switchers have the advantage of being visually clear and easy to click on. A button is placed for each language, and the user clicks on the desired language button to switch.Simple design, intuitive for usersIt is This is especially effective when the number of languages is small. However,Too many languages take up too much spaceThere are possibilities. For example,Applewebsite uses a button language switcher with a flag icon in the footer section.
5.3 Flag icon expression
The flag icon language switcher represents each language with a flag icon. It is visually recognizable and has the advantage that users can quickly locate their language.Flags are internationally understandable symbolsand is therefore suitable for multilingual sites. However,Multiple languages in one country or different languages in different regionsto be careful, as it can be misleading. Also,Not all flags exist for all languages.It is also important to keep in mind the following points. For example,Google (WWW search engine)uses a flag icon-type language switcher in the footer portion of the search results page.
| type | Advantages | demerit | Suitable sites |
|---|---|---|---|
| drop-down system | Compact, multilingual | Long list makes selection difficult. | Sites with many languages |
| button-type | Visually clear and clickable | Too many languages take up space | Sites with a small number of languages |
| Flag icon type | Easy to recognize visually | Can be misleading if country and language do not match, not all flags exist for all languages | International Sites |
Other language switchers exist in a variety of designs, such as list-type and text link-type. It is important to select the most appropriate design for your site's characteristics and target users.Comparative study of various design examples with reference to websites of companies offering multilingual website construction services, etc.The following is a brief overview of the design process. It is also useful to conduct A/B testing to verify which design is most effective.
6. language switcher and multilingual SEO
Implementing a language switcher alone is not sufficient for multilingual SEO. It is essential to set hreflang tags and optimize translated content so that search engines correctly recognize pages in each language and display them to the appropriate users.
6.1 hreflang tag settings
The hreflang tag is an HTML tag that explicitly tells search engines the language and target region of a page. hreflang tags, when set correctly, allow search engines to properly index pages in each language and display the most appropriate page based on the user's language preference. Care should be taken to avoid setting hreflang tags incorrectly, as this can lead to content being recognized as duplicate content or pages not being displayed appropriately to users of the target language.
6.1.1 How to implement the hreflang tag
The hreflang tag is implemented using the link tag in the head section of HTML. Specifically, the following three attributes are used
- rel="alternate": Indicates that this is a link to another language version.
- hreflang="language code": Specify the language of the page. For example, use "ja" for Japanese and "en" for English.
- href="URL": Specify the URL of the target page.
For example, to set the hreflang tag for the English version of a page in the head section of the Japanese version of the page, the following would be used
If there are multiple language versions, hreflang tags must be set for each language version. For example, if there are Japanese, English, and Korean versions, the following three hreflang tags should be set in the head section of the Japanese version page.
For more information on how to set the hreflang tag,Official Google Documentationfor more information.
6.1.2 Notes on hreflang tags
- self-reference: Each page must have an hreflang tag set to itself.
- cross-reference: If you set up a link from a language A page to a language B page, you must also set up a link from the language B page to the language A page.
- Language and Region Codes: If necessary, you can specify not only the language code but also the region code. For example, use "en-US" for American English and "en-GB" for British English.
- x-defaultx-default" can be used to specify the default page to display if a specific language does not match.
6.2 Optimization of Translated Content
Multilingual SEO requires not only translating the original text, but also optimizing it for the culture and expressions of the target language. Poor quality translations can hinder user understanding and undermine the credibility of the site. Keyword selection and content should also be optimized for search trends in the target language.
6.2.1 Selection of keywords
Research keywords that are searched for in the target language and select appropriate keywords. It is important to research keywords that are actually used in the target language, rather than translating keywords used in the original text. By using keyword research tools, we can analyze search volume and competitiveness to select effective keywords.
6.2.2 Localization of content
In addition to translation, content should be localized taking into account the cultural context and the way it is expressed. For example, dates, currency, humor, and idioms should be changed appropriately for the target language. Localization allows us to provide content that is natural and easy to understand for users in the target language.
6.2.3 Improving the quality of content
Providing accurate, easy-to-understand, and valuable content for users will increase the site's credibility and improve search engine ratings. Professional translation, proofreading, and review by native speakers can improve the quality of your content.
Proper implementation of these measures will increase the SEO effectiveness of a multilingual site and help it succeed in the global marketplace. Language switchers and hreflang tag settings, as well as optimizing translated content, are key components of multilingual SEO.
7. summary
In this article, we have provided a comprehensive explanation of the implementation of a language switcher, which is essential for multilingual sites, from its role and importance to how to implement it in WordPress, design, and SEO. The language switcher contributes greatly to improving the user experience, SEO, and promoting global expansion on a multilingual site. There are two ways to implement language switchers: by using plug-ins or by customizing themes, each of which has its own merits and demerits. Among plugins, Polylang, TranslatePress, Weglot, and WPML are highly popular, multifunctional, and easy to use, and are recommended. Refer to the comparison chart to select the best plugin for your site.
Design and placement are also important. Choose a design that is easy for users to understand and operate, and place it in the header, footer, sidebar, or within the contents of the site to best suit the site's structure. After implementation, you should also pay attention to several important points, such as checking translation accuracy, impact on display speed, and mobile compatibility. With these points in mind, implementing an effective language switcher will bring you much closer to a successful multilingual site, and when combined with multilingual SEO measures such as setting hreflang tags and optimizing translated content, you can more effectively promote your global expansion.
