International Search Summit - Mastering language selectors: Best SEO and UX practices for multilingual sites - #IntSS
Slides for Mastering language selectors: Best SEO and UX practices for multilingual sites - #IntSS (International Search Summit), celebrated on the 14th November 2024.
Admin at SEO Barcelona • Polyglot • Background in Translation and Localization • Master’s in UX/UI Design @sarafdez /in/internationalseo sara-fernandez.com
All our users should be able to understand English! Implementing hreflang is the only thing that matters And if not, they can just translate with Google!!!
selector improves user navigation and sends positive signals to search engines. This helps your site get crawled and indexed more efficiently, boosting your search rankings—a win-win for SEO and UX.
navigation by allowing visitors to choose their preferred language, creating a more personalized experience. This approach encourages visitors to stay, explore, and potentially become loyal customers.
configuration options such as search, country grouping, and currency selection, thanks to their larger size. However, they can disrupt UX by temporarily blocking access to the main content until closed.
dialog prompts users to select their region and language upon entry. While briefly interruptive, this approach helps tailor the experience from the start.
independently. Additionally, users have the option to translate descriptions and reviews into English automatically if they wish. by @sarafdez at #IntSS
allows users to select their location and language preferences, which can be saved as cookies. by @sarafdez at #IntSS Non-modal dialogs Useful: https://www.nngroup.com/articles/modal-nonmodal-dialog/
balanced approach between buttons and menus, providing multiple language options in the footer without cluttering the interface, and are generally accessible for screen readers.
pop-up can be frustrating. Many global brands simplify this by showing all options on separate pages, organized by region and often with country flags, making it easier for users to find their location. by @sarafdez at #IntSS Dedicated page
it easier for users to recognize their preferred language quickly. ✅ Especially helpful for users unfamiliar with the default language. Pros of using flags
languages are restricted to specific nations, which can mislead users. ❌ Associating languages with countries can unintentionally stereotype or exclude certain user groups. ❌ Flags can unintentionally convey political messages, leading to unintended bias or preference for one region over another. Cons of using flags
languages: Cons of using flags • Using the Spanish flag might seem exclusive to users in Spain, potentially excluding Latin American audiences. • Using a German flag for the German language might feel exclusionary to Austrian or Swiss users. • Arabic language is used in many countries and can’t be identified with one particular flag.
Display language names (e.g., “English”, “Italiano”) to create a more inclusive experience. • Icons or abbreviations: ◦ Use neutral language icons or ISO language codes (EN, ES, FR) to avoid national associations. • Hybrid approach: ◦ Combine text with icons or abbreviations to maintain visual appeal while promoting inclusivity.
globe or translate symbol makes it easy for visitors to find language options, even if they don’t understand the page language. These icons are widely understood and avoid issues with using flags.
of your language selector, consider conducting a usability test by replacing your webpage text with placeholder content. This method helps determine if users can easily find the selector, even when they cannot rely on the content.
both visible (headlines, paragraphs) and non-visible text (alternative text, ARIA labels) for visually impaired users. Use non-visible ARIA labels for language selectors, e.g., “Selected language: English” instead of just “English”, to help screen readers communicate context.
benefits: • Screen reader users. Visually impaired individuals often rely on keyboard navigation in conjunction with screen readers to interact with web content. • Individuals with motor impairments. They may find keyboard navigation more manageable than using a mouse. • General users: Many people, regardless of ability, prefer keyboard shortcuts for efficiency and speed.
language’s native spelling and format (e.g., "Polski" for Polish) for quick recognition by native speakers. • If you offer multiple variants of the same language, specify them clearly, such as "Español (España)" or "Español (Colombia)".
may access the internet through VPNs, proxies, or while traveling, leading to incorrect location-based language settings. • This method presumes a direct correlation between geographic location and language preference, which isn't always the case.
Only use IP detection as a gentle suggestion, not an automatic redirect. • Allow users to easily choose their preferred language without forcing assumptions.
than an automatic redirect. When a user from Spain visits amazon.com, a banner appears suggesting items that ship to Spain with options to Change Address or Dismiss, or go to amazon.es if they wish. This approach respects user choice, allowing them to remain on the site version they prefer.
computers, browser language settings might not align with individual user preferences. • Set the website's default language based on the user's browser language preferences to enhance the user experience. • Always provide a visible language selector, allowing users to manually choose their preferred language for better accessibility and accuracy.
and currency Allow users to separately adjust language, country, and currency preferences. This supports international shoppers who may want to view detailed information in a different language or explore better exchange rates.
language selector in thumb-friendly areas, like the bottom navigation or within the main menu, to make it accessible without extra scrolling. • Use simple, universally understood icons like a globe, sized appropriately for small screens to save space.
with larger tap areas to prevent accidental selections and improve touch accuracy. • Add autocomplete to allow users to type and quickly find their language, reducing the need for scrolling. • Ensure the selector adjusts seamlessly to various screen sizes and orientations, maintaining usability across mobile devices.
links over <select> options for language selectors. Search engines can’t directly follow <select> options, limiting content indexing. • HTML links allow search engine bots to track and associate localized page versions. • If a dropdown is needed, use JavaScript to redirect users to the correct link upon language selection.
Redirect users to the same page they’re viewing in the new language, not the homepage, to preserve navigation flow and avoid frustration. • Fallback to homepage. Redirect to the homepage only if no equivalent or alternative page is available in the selected language.
with only a few language options, a simple dropdown might be sufficient. • If there are around 10–15 languages, a non-modal overlay with autocomplete could provide a smoother experience. • For even larger selections, consider a standalone page where countries can be organized into tabs or accordions.
Avoid assuming that a user’s location automatically dictates their language preference. • Allow users to select both location and language independently for a more flexible, personalized experience. • If possible, apply this to currency selection as well.
pages • Place a clear, accessible language selector (with icons and text) on each page, allowing users to switch languages easily, no matter where they are on the site.
implementing location-based redirects, it's essential to inform users about the change and provide them with control over their language preferences. A notification banner is an effective way to achieve this.
sarafernandezseo
aleyda
myriamjessier
fikadigital
clarasoteras
aymenloukil
dkundel
nikkihalliwell
xxxayaozaxxx
pavelungr
pkondylis
tamaranovitovic
andrewprince
destraynor
lara
csswizardry
marktimemedia
hatefulcrawdad
irinanazarova
cassininazir
morganepeng
jponch
quramy
chriscoyier
caitiem20
