OTTODesign System

Code

Optimization techniques (Deprecated)

Storybook group: Development · Sidebar path: Development/SEO/Optimization techniques (Deprecated) · Extracted 28.09.2026

Overview

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

SEO optimization techniques (Deprecated)

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-link-v2 href="#" variant="secondary">My Link</oc-link-v2>

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

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

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

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.

Link masking is available on all components with the attribute base64-href. For example, to configure the Button component to use link masking, set the base64-href attribute to the Base64-encoded URL.

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

<oc-button-v1 base64-href="L2ludGVybmFsL3BhZ2U=">Click me</oc-button-v1>

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 in the light DOM, while users navigate to the URL from the base64-href attribute in the shadow DOM. 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 base64-href value.

Link switching is available on all components with the attribute base64-href. For example, to configure the Link component to use link masking, set the base64-href attribute to the Base64-encoded variation URL for the user and the href attribute to the actual URL for the search engine.

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

<!-- Link for user points to: /jacke-x/?farbe=blau -->
<oc-link-v2 base64-href="L2phY2tlLXgvP2ZhcmJlPWJsYXU=">
  <!-- By default, the href value receives the decoded base64-href value, if not defined otherwise. -->
  <!-- Link for crawler points to: /jacke-x -->
  <a href="/jacke-x">My link</a>
</oc-link-v2>

Note

When inspecting the element with browser developer tools, you might notice the href changes to the decoded value of base64-href. 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.