Tweet
Tweet

Slide 1

Slide 1 text

Barcelona International Search Summit Sara Fernández Carmona sara-fernandez.com “Mastering language selectors: Best SEO and UX practices for multilingual sites”

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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!!!

Slide 4

Slide 4 text

by @sarafdez at #IntSS Every project has that stakeholder, right?

Slide 5

Slide 5 text

by @sarafdez at #IntSS Time to fight misconceptions.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

by @sarafdez at #IntSS You visit their website, but as the page loads… …you’re automatically redirected to the Arabic version.

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Language selectors are the forgotten key to International SEO—and UX. Let’s find out why! by @sarafdez at #IntSS

Slide 10

Slide 10 text

Benefits of language selectors by @sarafdez at #IntSS

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

by @sarafdez at #IntSS Expand your audience reach Example: The U.S. has a large Spanish-speaking population—support their language needs!

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

Language selector design by @sarafdez at #IntSS

Slide 17

Slide 17 text

by @sarafdez at #IntSS Language selector design should align with the rest of the website and be easily discoverable and usable.

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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/

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

by @sarafdez at #IntSS

Slide 27

Slide 27 text

Should we use flags? by @sarafdez at #IntSS

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

by @sarafdez at #IntSS However…

Slide 30

Slide 30 text

by @sarafdez at #IntSS Flags represent countries, not languages!

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

by @sarafdez at #IntSS Key best practices

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

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.

Slide 40

Slide 40 text

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)".

Slide 41

Slide 41 text

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.

Slide 42

Slide 42 text

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.

Slide 43

Slide 43 text

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.

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

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.

Slide 48

Slide 48 text

by @sarafdez at #IntSS

Slide 49

Slide 49 text

by @sarafdez at #IntSS

Slide 50

Slide 50 text

by @sarafdez at #IntSS

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

by @sarafdez at #IntSS Technical implementation ● Choose HTML links over options for language selectors. Search engines can’t directly follow 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.

Slide 55

Slide 55 text

by @sarafdez at #IntSS Technical implementation ❌ Incorrect implementation: Español (ES) ✅ Correct implementation: Español (ES)

Slide 56

Slide 56 text

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.

Slide 57

Slide 57 text

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.

Slide 58

Slide 58 text

But wait a moment… Remember our trip to Egypt earlier?! by @sarafdez at #IntSS

Slide 59

Slide 59 text

by @sarafdez at #IntSS How could we have avoided that outcome?

Slide 60

Slide 60 text

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.

Slide 61

Slide 61 text

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.

Slide 62

Slide 62 text

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.

Slide 63

Slide 63 text

by @sarafdez at #IntSS Always bring a power bank It might not have the answer… But at least it will help you keep searching!

Slide 64

Slide 64 text

Thank you! Any questions? Slides available at: https://speakerdeck.com/sarafernandezseo @sarafdez /in/internationalseo sara-fernandez.com by @sarafdez at #IntSS