Manages document head tags in SolidJS applications with @solidjs/meta v0.29, providing SSR-ready Document Head management including Title, Meta, Link, Style, Base, and Stylesheet components with MetaProvider. Use when building SolidJS applications requiring dynamic head tag control, SEO meta tags, or managing document title/stylesheets across routes.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
Datei-Explorer
3 Dateien
SKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau
name
solid-meta-0-29-0
description
Manages document head tags in SolidJS applications with @solidjs/meta v0.29, providing SSR-ready Document Head management including Title, Meta, Link, Style, Base, and Stylesheet components with MetaProvider. Use when building SolidJS applications requiring dynamic head tag control, SEO meta tags, or managing document title/stylesheets across routes.
Asynchronous SSR-ready Document Head management for SolidJS. Based on react-head, it allows defining document.head tags anywhere in the component hierarchy — similar to react-helmet but built for SolidJS's fine-grained reactivity model.
Provides six head tag components (Title, Meta, Link, Style, Base, Stylesheet) and a single context provider (MetaProvider). On the server, tags are collected via Solid's useAssets API and injected into <head>. On the client, server-generated tags (marked with data-sm) are removed in favor of client-rendered tags.
When to Use
Setting dynamic page titles in a SolidJS SPA or SSR application
Managing SEO meta tags (og:, twitter:, description, canonical URLs)
Injecting stylesheets or inline <style> blocks conditionally
Building SolidStart applications with per-route head management
Replacing react-helmet patterns when migrating to SolidJS
Any scenario where head tag information is only available deep in the component tree
Installation / Setup
npm i @solidjs/meta
Requires solid-js >= 1.8.4 as a peer dependency. Zero additional dependencies.
Core Concepts
MetaProvider Context
All head tag components require <MetaProvider> somewhere above them in the component tree. It creates a MetaContext with addTag and removeTag operations. Without it, any head component throws: <MetaProvider /> should be in the tree.
import { MetaProvider, Title } from"@solidjs/meta";
functionApp() {
return (
<MetaProvider>
My App
{/* rest of app */}
);
}
<Title>
</Title>
</MetaProvider>
Cascading Tags
<title> and <meta> are "cascading" — only the last instance with a matching key is rendered. The key for <title> is just the tag name. For <meta>, the key is derived from name or property attributes. Deeper components override shallower ones, enabling per-route overrides.
// Title 3 wins — only <title>Title 3</title> appears in <head>
<MetaProvider>
<Title>Title 1</Title><Title>Title 2</Title><Title>Title 3</Title>
</MetaProvider>
For <meta>, tags with the same name or property cascade (last wins), but tags with different attributes coexist:
// Both render — different `media` values create distinct keys
<Meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
<Metaname="theme-color"media="(prefers-color-scheme: dark)"content="#000" />
Non-Cascading Tags
<link>, <style>, <base> are non-cascading — all instances render. Multiple <Link> tags for different stylesheets or favicons all appear in <head>.
SSR Hydration
On the server, tags are collected and serialized via useAssets with data-sm markers. On the client, during hydration, MetaProvider removes all [data-sm] elements from <head> before rendering client-side tags, preventing duplicates.
