Chrome’s new <selectmenu> html element

SEO implications and best practices

Google Chrome developers recently introduced a new customizable HTML element: <selectmenu>. This addition brings much-needed styling flexibility to the classic <select> dropdown, a component that’s historically been difficult to customize without complex JavaScript workarounds.

Read the official Chrome announcement

But while this is a win for frontend developers and designers, what does it mean for SEO?

---

What is <selectmenu>?

The <selectmenu> is a new web component that works similarly to the traditional <select>, but with greater styling flexibility and built-in accessibility. It allows developers to build custom-looking dropdowns using native browser capabilities, without losing keyboard or screen reader support.

Example:

<label for="fruit">Choose a fruit:</label>
<selectmenu id="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</selectmenu>

This component is currently only available in Chrome (from version 124+) and is considered experimental.

Positive SEO impacts

1. Improved UX (User Experience)
   • A smoother, more intuitive interface can reduce bounce rate and improve user signals like dwell time.
2. Built-in Accessibility (a11y)
   • Since <selectmenu> is accessible by default, it reduces the risk of excluding users who rely on assistive technologies, which contributes to a better overall experience.
3. Cleaner Code and Performance
   • Unlike JS-heavy custom selects, <selectmenu> reduces the need for external libraries, improving load time and potentially boosting Core Web Vitals.
4. Improved Crawlability (Compared to JS Alternatives)
   • Native elements are generally easier for crawlers to understand and render, especially when compared to JavaScript-injected dropdowns.

Potential SEO pitfalls

1. Not Suitable for Critical Navigation
   • Important internal links should not be hidden inside a <selectmenu>. Links within dropdowns are less likely to be discovered or weighted heavily by crawlers.
2. Lack of Browser Support (For Now)
   • As this is still experimental, relying solely on <selectmenu> without a fallback may harm UX for users on unsupported browsers.
3. Hidden Content
   • Content hidden in dropdowns may not carry the same SEO weight as visible content, so avoid placing important copy or keywords solely within a <selectmenu>.

---

SEO best practices when using <selectmenu>

• Use <selectmenu> for filters, form inputs, or secondary UI components—not main navigation.
• Always include a fallback (e.g., a <select> element) for unsupported browsers.
• Don’t rely on dropdowns to expose key content or internal linking structures.
• Keep important SEO content outside of collapsible elements if possible.
• Monitor performance and accessibility to ensure good Core Web Vitals.

Fallback example:

<noscript>
  <label for="fruit-fallback">Choose a fruit:</label>
  <select id="fruit-fallback">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
  </select>
</noscript>

Want to try it out? Visit the Chrome Developer Blog announcement for technical details and live examples.