@@ -19,25 +19,6 @@ description: >-
1919
2020` useHead ` is a low-level API for registering custom ` <head> ` tags with the nearest [ ` MetaProvider ` ] ( /solid-meta/reference/meta/metaprovider ) .
2121
22- ## When to use useHead
23-
24- - Insert tags without built-in components, such as ` script ` and ` noscript ` .
25- - Control SSR output with ` setting.close ` and ` setting.escape ` .
26- - Inject per-page structured data like JSON-LD.
27- - Reuse an existing element via ` ref ` .
28-
29- ## Prefer components when possible
30-
31- Use the dedicated components when they fit your use case:
32-
33- - [ ` <Title /> ` ] ( /solid-meta/reference/meta/title ) for page titles.
34- - [ ` <Meta /> ` ] ( /solid-meta/reference/meta/meta ) for metadata.
35- - [ ` <Link /> ` ] ( /solid-meta/reference/meta/link ) for external resources.
36- - [ ` <Style /> ` ] ( /solid-meta/reference/meta/style ) for inline styles.
37- - [ ` <Base /> ` ] ( /solid-meta/reference/meta/base ) for base URLs.
38-
39- They provide clearer intent and sensible defaults.
40-
4122## Import
4223
4324``` ts
@@ -192,42 +173,6 @@ useHead({
192173});
193174```
194175
195- ## Notes
196-
197- ### SSR and hydration
198-
199- On the server, tags are collected and rendered into ` <head> ` .
200- During hydration, tags with matching ` id ` values are reused.
201- On client-only renders, existing server tags are removed and replaced.
202-
203- ### Dedupe and idempotency
204-
205- For ` title ` and ` meta ` , only the most recent tag with the same key is kept.
206- The key is derived from the tag name and selected attributes.
207- For ` meta ` , the key uses ` name ` (or ` property ` ), ` http-equiv ` , ` content ` , ` charset ` , and ` media ` .
208- For ` title ` , the key does not include any attributes.
209- Other tag types are not deduped.
210- The ` id ` does not control deduping.
211- It ensures hydration can reuse the same element instead of inserting a duplicate.
212-
213- ### Reactive updates and cleanup
214-
215- ` useHead ` runs inside a render effect.
216- If your tag description reads reactive values, the tag updates when those values change.
217- When the component unmounts, the tag is removed and any previous cascading tag is restored.
218-
219- ### Security and escaping
220-
221- Use ` setting.escape: true ` when inserting untrusted content.
222- Setting ` escape: false ` renders raw HTML and can create XSS risks.
223- Only use ` escape: false ` with trusted, pre-serialized strings such as JSON-LD.
224-
225- ### Best practices
226-
227- Use stable, unique ` id ` values to avoid duplicates.
228- Prefer the dedicated head components when they meet your needs.
229- Avoid inserting multiple tags that represent the same metadata unless you intend to override.
230-
231176## Related
232177
233178- [ ` <MetaProvider /> ` ] ( /solid-meta/reference/meta/metaprovider )
0 commit comments