Optimization techniques · OTTO Design System

Overview

Source: ./src/documentation/development/seo/optimization-techniques.mdx

SEO optimization techniques

Important

This is the documentation of the new data-masked-ref. Not all components have been migrated to use this new attribute yet. If you are using the data-masked-ref attribute, please refer to the deprecated documentation and follow the migration guide to update your implementation.

This page provides an overview of SEO optimization techniques within OTTO Components.

Ensure SEO with light DOM href attributes

All components with linking capabilities must expose their href attributes in the light DOM rather than the shadow DOM when pointing to SEO-relevant pages.

Instead of using the href attribute in the shadow DOM:

<!-- href in the shadow DOM -->
<oc-foo href="#" variant="secondary">My Link</oc-foo>

Put the href attribute in the light DOM via a child element:

<oc-foo>
  <!-- Place the href via an <a> tag in the light DOM to improve SEO.-->
  <a href="#">My link</a>
</oc-foo>

If the component requires a primary action, use an empty <a> tag and place it in the default slot.

Internal Linking Best Practices

Link masking is a technique that prevents search engines from discovering certain pages on otto.de and enhances the overall crawling efficiency of a website. Use this technique to prevent search engines from crawling specific URLs. Common use cases include internal pages behind authentication or pages marked as noindex by the SEO team, which are not relevant for search engine indexing. For users of the website, the references to corresponding URLs are still visible and navigable.

Beyond improving crawl-ability and excluding irrelevant or noindex content from internal linking, link masking also provides significant value for internal link management. It enables a more efficient distribution of link equity by prioritizing highly relevant pages while reducing the internal linking weight of less important ones—even if those pages remain indexable. This helps search engines to find key content, strengthening their visibility and ensuring that link power is allocated in a more strategic and controlled way.

How it works

In OTTO Components, link masking is implemented by encoding the URL of a link element through Base64-encoding. When the user clicks on the link, the JavaScript decodes the string and redirects the user to the actual URL. This way, the actual URL is not visible in the source code of the website, but only the encoded string.

How to use link masking in OTTO Components

Link masking is available on all elements with the data attribute data-masked-ref. For example, to configure the Interactive Overlay to use link masking, set the data-masked-ref attribute to the Base64-encoded URL on the slot element.

In the following example, the URL /internal/page is encoded to L2ludGVybmFsL3BhZ2U= and set as the value of the data-masked-ref attribute:

<div data-masked-ref="L2ludGVybmFsL3BhZ2U=" role="link" tabindex="0">Click me</div>

Note

Set the role attribute to "link" and tabindex to "0" to ensure the element is accessible and can be navigated via keyboard.

Note If your feature is behind the login, you don't need link masking.

Link switching to manage variation URLs

Link switching helps manage how search engines index product variations (such as color options) by ensuring they recognize multiple variation URLs as a single product. Without this technique, search engines would index each product variation as a separate item, leading to potential SEO issues.

Note

If your feature is behind the login, you don't need link switching.

How it works

Link switching is implemented by encoding the URL of a link element through Base64-encoding. Search engines receive the URL from the href attribute, while users navigate to the URL from the data-masked-ref attribute. Links are demasked when a user hovers over the link, focuses on the link, or touch-starts the link, setting the href attribute to the decoded data-masked-ref value.

How to use link switching in OTTO Components

Link switching is available on all elements with the data attribute data-masked-ref. For example, to configure the Interactive Overlay to use link masking, set the data-masked-ref attribute to the Base64-encoded URL and the href attribute on the slot <a> element.

In the following example, the URL /jacke-x/?farbe=blau is encoded to L2phY2tlLXgvP2ZhcmJlPWJsYXU= and set as the value of the data-masked-ref attribute:

<!-- Link for crawler points to: /jacke-x -->
<!-- Link for user points to: /jacke-x/?farbe=blau -->
<a href="/jacke-x" data-masked-ref="L2phY2tlLXgvP2ZhcmJlPWJsYXU=">My link</a>

Note

When inspecting the element with browser developer tools, you might notice the href changes to the decoded value of data-masked-ref. This happens because hovering over the element (which is necessary to inspect it) triggers the link switching behavior. This is the expected behavior since link switching activates on hover, focus, or touch events.