Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

International Search Summit - Mastering languag...

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.

Sara Fernández Carmona

November 14, 2024
Tweet

More Decks by Sara Fernández Carmona

Other Decks in Marketing & SEO

Transcript

  1. Bon dia, Barcelona! • International SEO Consultant • hreflang="es-ES" •

    Admin at SEO Barcelona • Polyglot • Background in Translation and Localization • Master’s in UX/UI Design @sarafdez /in/internationalseo sara-fernandez.com
  2. by @sarafdez at #IntSS Auto-detecting language by IP is enough

    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!!!
  3. Imagine arriving in Cairo after a long flight… …and getting

    a notification from your mobile provider to check your data plan. by @sarafdez at #IntSS
  4. by @sarafdez at #IntSS You visit their website, but as

    the page loads… …you’re automatically redirected to the Arabic version.
  5. The problem? You don’t speak Arabic, and there’s no option

    to switch languages. Frustrated, you rely on translation tools… But as you struggle, your battery runs out. by @sarafdez at #IntSS
  6. Language selectors are the forgotten key to International SEO—and UX.

    Let’s find out why! by @sarafdez at #IntSS
  7. by @sarafdez at #IntSS Expand your audience reach Cater to

    diverse language speakers, even within the same country, and open access to millions of non-English speakers globally.
  8. by @sarafdez at #IntSS Expand your audience reach Example: The

    U.S. has a large Spanish-speaking population—support their language needs!
  9. by @sarafdez at #IntSS Boost your SEO Adding a language

    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.
  10. by @sarafdez at #IntSS Create a better UX Enhance user

    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.
  11. by @sarafdez at #IntSS Improve accessibility Language selectors improve accessibility,

    making it easy for diverse audiences to engage with your brand—boosting user satisfaction and loyalty.
  12. by @sarafdez at #IntSS Language selector design should align with

    the rest of the website and be easily discoverable and usable.
  13. by @sarafdez at #IntSS Drop-down menus Ideal for offering multiple

    language options and are easy to design and implement. They are commonly placed at the top right or bottom of a page.
  14. by @sarafdez at #IntSS Modal dialogs They can provide extra

    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.
  15. by @sarafdez at #IntSS On IKEA’s Spanish website, a modal

    dialog prompts users to select their region and language upon entry. While briefly interruptive, this approach helps tailor the experience from the start.
  16. Airbnb provides flexibility to set the preferred language and region

    independently. Additionally, users have the option to translate descriptions and reviews into English automatically if they wish. by @sarafdez at #IntSS
  17. On Patagonia’s website, a non-modal window in the bottom-left corner

    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/
  18. by @sarafdez at #IntSS Dedicated language option They work well

    for markets with a limited language selection, allowing quick language changes directly from the navigation menu.
  19. by @sarafdez at #IntSS Footer text links They offer a

    balanced approach between buttons and menus, providing multiple language options in the footer without cluttering the interface, and are generally accessible for screen readers.
  20. Scrolling through a long list of countries in a small

    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
  21. by @sarafdez at #IntSS ✅ Visually engaging and intuitive, making

    it easier for users to recognize their preferred language quickly. ✅ Especially helpful for users unfamiliar with the default language. Pros of using flags
  22. by @sarafdez at #IntSS ❌ Using flags may imply that

    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
  23. by @sarafdez at #IntSS ❌ They’re not suitable for multi-national

    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.
  24. by @sarafdez at #IntSS Alternative approaches • Text-based selectors: ◦

    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.
  25. by @sarafdez at #IntSS Alternative approaches Using icons like a

    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.
  26. by @sarafdez at #IntSS Placement Positioning the language selector in

    the top navigation bar or footer aligns with user expectations, enhances accessibility, and is widely regarded as a best practice in web design.
  27. by @sarafdez at #IntSS Usability test To assess the visibility

    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.
  28. by @sarafdez at #IntSS Support screen readers Assistive technology reads

    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.
  29. by @sarafdez at #IntSS Ensure it’s keyboard-friendly This design consideration

    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.
  30. by @sarafdez at #IntSS Display language names • Use each

    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)".
  31. by @sarafdez at #IntSS IP address-based detection • Inaccurate. Users

    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.
  32. by @sarafdez at #IntSS If IP detection is used… •

    Only use IP detection as a gentle suggestion, not an automatic redirect. • Allow users to easily choose their preferred language without forcing assumptions.
  33. by @sarafdez at #IntSS Amazon uses a location-based suggestion rather

    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.
  34. by @sarafdez at #IntSS Browser language detection • On shared

    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.
  35. by @sarafdez at #IntSS Empower the user While auto-detecting language

    through IP or browser settings can be helpful, always allow users to manually select their preferred language for a personalized experience.
  36. by @sarafdez at #IntSS While auto-detecting language through IP or

    browser settings can be helpful, always allow users to manually select their preferred language for a personalized experience.
  37. by @sarafdez at #IntSS Enable independent changes for language, country

    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.
  38. by @sarafdez at #IntSS Make it mobile-friendly • Place the

    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.
  39. by @sarafdez at #IntSS Make it mobile-friendly • Design dropdowns

    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.
  40. by @sarafdez at #IntSS Organize languages effectively For extensive language

    options, group or sort logically, or add a search bar with autocomplete to help users find their language or country easily.
  41. by @sarafdez at #IntSS Technical implementation • Choose HTML <a>

    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.
  42. by @sarafdez at #IntSS Technical implementation ❌ Incorrect implementation: <option

    selected="" value="/es/">Español (ES)</option> ✅ Correct implementation: <a href="https://miweb.com/es">Español (ES)</a>
  43. by @sarafdez at #IntSS Optimizing language switching • Maintain context.

    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.
  44. by @sarafdez at #IntSS Some key highlights • For websites

    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.
  45. by @sarafdez at #IntSS Decouple location and language settings •

    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.
  46. by @sarafdez at #IntSS Include the language selector on all

    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.
  47. by @sarafdez at #IntSS Implementing user-friendly location-based redirects • When

    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.
  48. by @sarafdez at #IntSS Always bring a power bank It

    might not have the answer… But at least it will help you keep searching!