No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Metadata

Metadata is used to communicate additional information about your website to webbrowser, accessible devices or other applications.

The meta-tag has attributes for some general page settings but can also be used to define other metadata using specific names. On this page you will find links to other pages that explain some of those names and what they can be used for.

<meta charset="utf-8" />
<title>Metadata example</title>
<meta name="author" content="DesignSystem" />
<meta name="keywords" content="metadata, example" />
<meta name="description" content="An Examle of how metadata of a webpage could look like." />

This meta-tag can be used to manipulate the size and shape of the viewport. More information

<meta name="viewport" content="width=device-width, initial-scale=1" />

There are some meta-tags that change the way search engines or google in particular treat the website. More information

<meta name="robots" content="noarchive, nofollow" />

Open Graph Tags are used to provide a more detailed description as well as a preview image about the content of a page. This informations can be used to display links in a more appealing way, when they are shared on platforms like X (formerly Twitter), Facebook, Microsoft Teams and many more... X introduced custom meta-tags to specify special elements like card, etc., although there is also some support for open graph tags. To use open grah tags you should put prefix="og: http://ogp.me/ns#" as attribute to either the html or the head tag, neither option is better than the other.

  • Open Graph Tags explained by facebook
  • Open Graph Tags explained by open graph
  • Cards and Open Graph Tags explained by X
<head prefix="og: https://ogp.me/ns#">
    <meta property="og:title" content="Metadata Example" />
    <meta property="og:url" content="https://www.example.com" />
    <meta property="og:image" content="https://www.ex.com/images/rock.jpg" />
</head>

The favicon is the little icon that is displayed on tabs in webbowsers. You can see it as the program icon of a website. More information

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

There is the possibility to provide a specific page in different languages using metadata. The page specififed with hreflang="x-default" is the page that will match for any language that is not specified in any hreflang attribute on this page. Please note that the current page and its language alternatives must be listed on each of this pages. More information

<link rel="alternate" hreflang="en" href="https://en.example.com/page.html" />
<link rel="alternate" hreflang="de" href="https://de-ch.example.com/page.html" />
<link rel="alternate" hreflang="fr" href="https://fr.example.com/page.html" />
<link rel="alternate" hreflang="it" href="https://it.example.com/page.html" />
<link rel="alternate" hreflang="x-default" href="https://www.example.com/" />

Content Security Policy

Instead of using the HTTP header the Content Security Policy can also be definend in a meta-tag in HTML. In that case it must be the first meta-tag in the header.

<meta http-equiv="Content-Security-Poilicy" content="default-src self;" />

This is how metadata of a webpage called "Metadata Example" could look like.

<!DOCTYPE html>
<html lang="en">
    <head prefix="og: https://ogp.me/ns#">
        <meta charset="utf-8" />
        <title>Metadata example</title>
        <meta name="author" content="DesignSystem" />
        <meta name="keywords" content="metadata, example" />
        <meta name="description" content="An Examle of how metadata of a webpage could look like." />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="robots" content="noarchive, nofollow" />
        <meta property="og:title" content="Metadata Example" />
        <meta property="og:url" content="https://www.example.com" />
        <meta property="og:image" content="https://www.ex.com/images/rock.jpg" />
        <link rel="icon" href="/favicon.ico" sizes="any" />
        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
        <link rel="alternate" hreflang="en" href="https://en.example.com/page.html" />
        <link rel="alternate" hreflang="de" href="https://de-ch.example.com/page.html" />
        <link rel="alternate" hreflang="fr" href="https://fr.example.com/page.html" />
        <link rel="alternate" hreflang="it" href="https://it.example.com/page.html" />
        <link rel="alternate" hreflang="x-default" href="https://www.example.com/" />
        <meta http-equiv="Content-Security-Poilicy" content="default-src self;" />
    </head>
</html>