solidjs · LadyBluenotes · Apr 9, 2026 · Apr 9, 2026 · Apr 16, 2026 · Apr 16, 2026
diff --git a/src/routes/solid-meta/reference/meta/base.mdx b/src/routes/solid-meta/reference/meta/base.mdx
@@ -2,41 +2,58 @@
 title: Base
 order: 5
 use_cases: >-
-  setting base url, relative urls, external resources, multi-page apps, cdn
-  assets
+  base urls, relative urls, link targets, document head
 tags:
   - base
-  - url
-  - meta
   - head
-  - routing
+  - url
+  - component
 version: "1.0"
 description: >-
-  Set the base URL for all relative URLs in your Solid app with the Base
-  component. Essential for apps with complex routing or external resources.
+  Base renders a base element through Solid Meta.
 ---
 
-`Base` is a component that specifies the base URL for all relative URLs in the document.
-This provides a way to define the [`base`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) element of your document's `head`.
+`Base` adds a [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) element that sets the document base URL for resolving relative URLs.
+
+## Import
 
-```tsx twoslash
+```tsx
 import { Base } from "@solidjs/meta";
+```
+
+## Type
 
-<Base target="_blank" href="https://docs.solidjs.com/" />;
+```tsx
+const Base: Component<JSX.BaseHTMLAttributes<HTMLBaseElement>>;
 ```
 
-## Usage
+## Props
+
+Accepts attributes for [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base).
 
-### Adding `base` tag
+## Behavior
 
-```tsx twoslash
+- Registers a self-closing `base` tag.
+- Non-cascading tags can add one document-head element per active instance.
+- Requires [`MetaProvider`](/solid-meta/reference/meta/metaprovider) in the component tree.
+
+## Examples
+
+### Basic usage
+
+```tsx
 import { MetaProvider, Base } from "@solidjs/meta";
 
-export default function Root() {
+function App() {
 	return (
 		<MetaProvider>
-			<Base target="_blank" href="https://docs.solidjs.com/" />
+			<Base href="https://docs.solidjs.com/" />
 		</MetaProvider>
 	);
 }
 ```
+
+## Related
+
+- [`MetaProvider`](/solid-meta/reference/meta/metaprovider)
+- [`useHead`](/solid-meta/reference/meta/use-head)
diff --git a/src/routes/solid-meta/reference/meta/link.mdx b/src/routes/solid-meta/reference/meta/link.mdx
@@ -1,71 +1,59 @@
 ---
 title: Link
 order: 2
-use_cases: "adding favicon, stylesheets, external resources, preloading assets, web fonts"
+use_cases: >-
+  links, favicons, stylesheets, preloads, external resources
 tags:
   - link
-  - favicon
-  - stylesheet
-  - assets
   - head
   - resources
+  - component
 version: "1.0"
 description: >-
-  Add external resources like stylesheets and favicons to your Solid app. Learn
-  to use the Link component for optimal resource loading and icons.
+  Link renders a link element through Solid Meta.
 ---
 
-The Link component establishes a connection between the page and an external resource.
-Commonly, this is used for linking stylesheets and other associations.
+`Link` adds a [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element that defines a relationship between the document and an external resource.
 
-This component renders a [`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element within the document's `<head>`.
+## Import
 
-```tsx twoslash
+```tsx
 import { Link } from "@solidjs/meta";
-<Link rel="icon" href="/favicon.ico" />;
 ```
 
-## Usage
+## Type
 
-### Adding a favicon
-
-To add a favicon in an app, `<Link>` can be used to point to the asset:
+```tsx
+const Link: Component<JSX.LinkHTMLAttributes<HTMLLinkElement>>;
+```
 
-```tsx twoslash
-import { MetaProvider, Link } from "@solidjs/meta";
+## Props
 
-export default function Root() {
-	return (
-		<MetaProvider>
-			<Link rel="icon" href="/favicon.ico" />
-		</MetaProvider>
-	);
-}
-```
+Accepts attributes for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link).
 
-### Using an emoji as a favicon
+## Behavior
 
-To use an emoji as a favicon, first create a function that returns a data URI containing an SVG image:
+- Registers a self-closing `link` tag.
+- Non-cascading tags can add one document-head element per active instance.
+- Requires [`MetaProvider`](/solid-meta/reference/meta/metaprovider) in the component tree.
 
-```jsx
-const emojiSvg = (emoji) => {
-	return (
-		`data:image/svg+xml;utf8,` +
-		`<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${emoji}</text></svg>`
-	);
-};
-```
+## Examples
 
-Following this, include the emoji as an argument within that function in the `href` property of the Link component:
+### Basic usage
 
-```jsx
+```tsx
 import { MetaProvider, Link } from "@solidjs/meta";
 
-export default function Root() {
+function App() {
 	return (
 		<MetaProvider>
-			<Link rel="icon" href={emojiSvg("😎")} />
+			<Link rel="icon" href="/favicon.ico" />
 		</MetaProvider>
 	);
 }
 ```
+
+## Related
+
+- [`MetaProvider`](/solid-meta/reference/meta/metaprovider)
+- [`useHead`](/solid-meta/reference/meta/use-head)
diff --git a/src/routes/solid-meta/reference/meta/meta.mdx b/src/routes/solid-meta/reference/meta/meta.mdx
@@ -2,38 +2,47 @@
 title: Meta
 order: 3
 use_cases: >-
-  seo optimization, social media tags, viewport settings, charset configuration,
-  open graph
+  metadata, descriptions, viewport tags, charset tags, social metadata
 tags:
   - meta
-  - seo
-  - viewport
-  - metadata
   - head
-  - tags
+  - metadata
+  - component
 version: "1.0"
 description: >-
-  Add SEO and viewport metadata to your Solid app with the Meta component.
-  Configure description, keywords, and social media tags for better reach.
+  Meta renders a meta element through Solid Meta.
 ---
 
-The `<Meta>` component represents metadata that cannot be represented by other HTML elements.
-It is a wrapper for the native [`meta`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) element and has the same properties.
+`Meta` adds a [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) element for metadata that is not represented by another HTML metadata element.
+
+## Import
 
-```tsx twoslash
+```tsx
 import { Meta } from "@solidjs/meta";
+```
+
+## Type
 
-<Meta name="description" content="My site description" />;
+```tsx
+const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>;
 ```
 
-`Meta` components can be placed in the [`MetaProvider`](/solid-meta/reference/meta/metaprovider) or added throughout the application for additional metadata or override parents.
-`Meta` tags are considered the same and will be overridden if `name` attributes match.
+## Props
 
-## Usage
+Accepts attributes for [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta).
 
-### Adding `meta` tag
+## Behavior
 
-```tsx twoslash {6-8}
+- Registers a `meta` tag with self-closing server rendering.
+- Cascading identity uses `name`, `http-equiv`, `content`, `charset`, `media`, and `property` from the tag props.
+- `property` is treated as `name` when Solid Meta builds the tag key.
+- Requires [`MetaProvider`](/solid-meta/reference/meta/metaprovider) in the component tree.
+
+## Examples
+
+### Basic usage
+
+```tsx
 import { MetaProvider, Meta } from "@solidjs/meta";
 
 export default function Root() {
@@ -46,3 +55,8 @@ export default function Root() {
 	);
 }
 ```
+
+## Related
+
+- [`MetaProvider`](/solid-meta/reference/meta/metaprovider)
+- [`useHead`](/solid-meta/reference/meta/use-head)
diff --git a/src/routes/solid-meta/reference/meta/metaprovider.mdx b/src/routes/solid-meta/reference/meta/metaprovider.mdx
@@ -2,26 +2,70 @@
 title: MetaProvider
 order: 6
 use_cases: >-
-  initializing meta tags, wrapping app, head management setup, meta context,
-  always in meta apps
+  head context, metadata context, document head management
 tags:
   - provider
   - meta
-  - setup
-  - context
-  - wrapper
   - head
+  - context
+  - component
 version: "1.0"
 description: >-
-  MetaProvider wraps your Solid app to enable head tag management. Essential
-  parent component for all metadata components to function properly.
+  MetaProvider provides the context used by Solid Meta head tags.
 ---
 
-`MetaProvider` is a parent component responsible for wrapping all the metadata components.
-All components that are contained within this will be added to the application `<head/>`
+`MetaProvider` supplies the context that Solid Meta components and [`useHead`](/solid-meta/reference/meta/use-head) use to add head tags.
+
+## Import
 
-```tsx twoslash
+```tsx
 import { MetaProvider } from "@solidjs/meta";
+```
+
+## Type
+
+```tsx
+const MetaProvider: ParentComponent;
+```
+
+## Props
+
+### `children`
 
-<MetaProvider>// add meta components</MetaProvider>;
+- **Type:** `JSX.Element`
+- **Optional:** Yes
+
+Content rendered inside the provider.
+
+## Behavior
+
+- Creates a `MetaContext.Provider` for its children.
+- On the client, active head tags are appended to `document.head` and removed during cleanup.
+- During server rendering, rendered head tags are registered through `useAssets`.
+- Solid Meta components and [`useHead`](/solid-meta/reference/meta/use-head) throw if they run without a `MetaProvider` in the component tree.
+
+## Examples
+
+### Basic usage
+
+```tsx
+import { MetaProvider, Title, Meta } from "@solidjs/meta";
+
+export default function Root() {
+	return (
+		<MetaProvider>
+			<Title>Solid Docs</Title>
+			<Meta name="description" content="Solid documentation" />
+		</MetaProvider>
+	);
+}
 ```
+
+## Related
+
+- [`Title`](/solid-meta/reference/meta/title)
+- [`Meta`](/solid-meta/reference/meta/meta)
+- [`Link`](/solid-meta/reference/meta/link)
+- [`Style`](/solid-meta/reference/meta/style)
+- [`Base`](/solid-meta/reference/meta/base)
+- [`useHead`](/solid-meta/reference/meta/use-head)