githubEdit

πŸ—‚οΈHead Components

Add meta tags, scripts, and other head elements to your Webstudio pages.

Webstudio provides components for adding elements to the document <head>, allowing you to control meta tags, external resources, and the page title.

Overview

The Head Slot and its children let you add custom elements to your page's <head> section. This is essential for:

  • SEO meta tags

  • Social sharing metadata

  • External stylesheets

  • Preloading resources

  • Custom page titles

Components

Head Slot

The container component that accepts head-related children. See Head Slot for full documentation.

Head Title

Sets or overrides the document title.

Property
Type
Description

Content

text

The page title text

Usage:

The title appears in:

  • Browser tab

  • Search results

  • Bookmarks

  • Social shares (if og:title not set)

Head Meta

Adds custom <meta> tags to the document head.

Property
Type
Description

name

string

Meta name (e.g., description, viewport)

property

string

Meta property (e.g., og:title, og:image)

content

string

Meta content value

Common meta tags:

Adds <link> elements for external resources.

Property
Type
Description

href

string

URL of the resource

rel

string

Relationship type

type

string

MIME type

as

string

Resource type for preloading

crossorigin

string

CORS setting

Common uses:

External stylesheet:

Preload font:

Favicon:

Canonical URL:

SEO Meta Tags

Essential Tags

Open Graph (Social Sharing)

Twitter Cards

Dynamic Head Content

Head components support dynamic content from variables:

Best Practices

  1. Unique titles: Each page should have a unique, descriptive title

  2. Title length: Keep under 60 characters for search display

  3. Description length: 150-160 characters optimal

  4. Image dimensions: Open Graph images should be 1200x630px

  5. Use canonical URLs: Prevent duplicate content issues

  6. Preload critical resources: Fonts and above-fold images

Page Settings vs Head Components

Webstudio provides both Page Settings and Head components:

Page Settings
Head Components

Basic SEO fields

Custom meta tags

Quick setup

Full control

Standard tags

Any valid head element

Per-page UI

Visual component placement

Use Page Settings for standard SEO, Head components for advanced needs.

Last updated

Was this helpful?