search
Webstudio Home
githubEdit

🗂️Head Slot

Head Slot is a component that enables visually customizing the <head> on a per-page basis. It’s useful for setting canonical URLs, alternate links, and more.

Head Slot

The Head Slot provides a visual interface for controlling your website's <head> section. Instead of writing code, you can manage meta tags, canonical URLs, and other head elements directly in the builder.

hashtag
Key information

  • Even though the Head Slot is visually in the Body instance, the contents of Head Slot are added to the <head>. This hierarchy enables Data Variables defined on the Body to be used in the head.

  • If Head Slot and Page Settings define the same data, such as meta title, Head Slot will take priority. Similarly, a default canonical is output on every page and references the current path. By specifying a canonical in Head Slot, the default canonical will not be displayed on the page.

  • Head Slot comes with an instance for Title, Link, and Meta. These can be duplicated. If you remove them and later need to add them back, you can copy them from a new Head Slot instance.

hashtag
Common Use Cases

hashtag
Canonical URLs

Prevent duplicate content issues by specifying the preferred URL:

  1. Add a Link element inside Head Slot

  2. Set rel to canonical

  3. Set href to the canonical URL (can be bound to a variable for dynamic pages)

hashtag
Alternate Language Links

For multilingual sites, specify language alternatives:

  1. Add a Link element

  2. Set rel to alternate

  3. Set hreflang to the language code (e.g., es, fr)

  4. Set href to the URL of the translated page

hashtag
Custom Meta Tags

Add any meta tag not available in Page Settings:

  1. Add a Meta element

  2. Set the name or property attribute

  3. Set the content attribute

hashtag
Preconnect and Preload

Improve performance by hinting resource loading:

  1. Add a Link element

  2. For preconnect: rel="preconnect" with href pointing to the domain

  3. For preload: rel="preload" with appropriate as and href attributes

hashtag
Third Party Documentation

Many elements in the head are quite technical and require reading documentation for proper usage.

Here is a list of relevant docs:

hashtag
Related

PreviousStagger AnimationNextHead Components

Last updated

Was this helpful?