Head and metadata
Edit this pageSolidStart does not come with a metadata library.
In cases where you want to customize the content in the head
of your document
, you can use the solid-meta
library.
The common elements used in the head
are:
title
: Specifies the title of the page, used by the browser tab and headings of search results.meta
: Specifies a variety of metadata about the page specified byname
, ranging from favicon, character set to OG tags for SEO.link
: Adds assets like stylesheets or scripts for the browser to load for the page.style
: Adds inline styles to the page.
Inside a Route component
When applying metadata to a specific route, you can use the Title
:
These tags will be applied for that specific route only and will be removed from document.head
once a user navigates away from the page.
routeData
can also be used here to create titles and SEO metadata that is specific to the dynamic parts of the route.
Adding a site-suffix in Title
Custom components can be created to wrap the Title
component to add a site-specific prefix to all the titles:
Using async data in Title
Resources can be used to create titles specific to the dynamic parts of the route:
For this example, routeData
can be used to retrieve the user's name from the id
in /users/:id
and use it in the Title
component.
Similarly, other information can be used to build up other tags for SEO.
Adding SEO tags
SEO tags like og:title
, og:description
, og:image
, use the Meta
component.
Since these tags may want to be used across multiple routes, they can be added inside the Head
of the root.tsx
file.
If you need to add route specific information inside your route, much like the Title
component, you can use the Meta
component within the desired route.
This overrides the Meta
tags used within the Head
component.