Devour/devour_data/docs/head-and-metadata.json

{
  "id": "9fefeb88b78a07a76a80c6e5",
  "source": "solid:signals",
  "type": "github-document",
  "title": "head-and-metadata",
  "content": "---\ntitle: Head and metadata\nuse_cases: \u003e-\n  seo optimization, page titles, meta tags, og tags, social sharing, search\n  engine visibility, dynamic metadata\ntags:\n  - seo\n  - metadata\n  - head\n  - title\n  - meta\n  - og-tags\nversion: '1.0'\ndescription: \u003e-\n  Manage SEO and metadata in SolidStart with dynamic titles, meta tags, and Open\n  Graph tags for better search visibility.\n---\n\nSolidStart does not come with a metadata library.\nIn cases where you want to customize the content in the `head` of your `document`, you can use the `@solidjs/meta` library.\n\n\u003cdiv id=\"npm\"\u003e\n```bash frame=\"none\"\nnpm i @solidjs/meta\n```\n\u003c/div\u003e\n\nThe common elements used in the [`head`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) are:\n\n- [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title): Specifies the title of the page, used by the browser tab and headings of search results.\n- [`meta`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta): Specifies a variety of metadata about the page specified by `name`, ranging from favicon, character set to OG tags for SEO.\n- [`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link): Adds assets like stylesheets or scripts for the browser to load for the page.\n- [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style): Adds inline styles to the page.\n\n## Inside a Route component\n\nWhen applying metadata to a specific route, you can use the `Title`:\n\n```tsx {6}\nimport { Title } from \"@solidjs/meta\";\n\nexport default function About() {\n  return (\n    \u003c\u003e\n      \u003cTitle\u003eAbout\u003c/Title\u003e\n      \u003ch1\u003eAbout\u003c/h1\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nThese tags will be applied for that specific route only and will be removed from `document.head` once a user navigates away from the page.\n`routeData` can also be used here to create titles and SEO metadata that is specific to the dynamic parts of the route.\n\n## Adding a site suffix in Title\n\nCustom components can be created to wrap the `Title` component to add a site-specific prefix to all the titles:\n\n```tsx {2}\nexport default function MySiteTitle(props) {\n  return \u003cTitle\u003e{props.children} | My Site\u003c/Title\u003e;\n}\n```\n\n```tsx { 6 }\nimport MySiteTitle from \"~/components/MySiteTitle\";\n\nexport default function About() {\n  return (\n    \u003c\u003e\n      \u003cMySiteTitle\u003eAbout\u003c/MySiteTitle\u003e\n      \u003ch1\u003eAbout\u003c/h1\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Using async data in `Title`\n\nResources can be used to create titles specific to the dynamic parts of the route:\n\n```tsx { 10 }\nimport { Title } from \"@solidjs/meta\";\nimport { RouteSectionProps } from \"@solidjs/router\";\nimport { createResource, Show } from \"solid-js\";\n\nexport default function User(props: RouteSectionProps) {\n  const [user] = createResource(() =\u003e fetchUser(props.params.id));\n\n  return (\n    \u003cShow when={user()}\u003e\n      \u003cTitle\u003e{user()?.name}\u003c/Title\u003e\n      \u003ch1\u003e{user()?.name}\u003c/h1\u003e\n    \u003c/Show\u003e\n  );\n}\n```\n\nFor 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.\nSimilarly, other information can be used to build up other tags for SEO.\n\n## Adding SEO tags\n\nSEO tags like `og:title`, `og:description`, `og:image`, use the `Meta` component.\nSince these tags may want to be used across multiple routes, they can be added inside the `Head` of the `root.tsx` file.\n\n```tsx { 5-15 }\nexport default function Root() {\n  return (\n    \u003cHtml lang=\"en\"\u003e\n      \u003cHead\u003e\n        \u003cMeta\n          property=\"og:image\"\n          content=\"https://example.com/image.jpg\"\n        /\u003e\n        \u003cMeta\n          property=\"og:image:alt\"\n          content=\"Welcome to my site\"\n        /\u003e\n        \u003cMeta property=\"og:image:width\" content=\"1200\" /\u003e\n        \u003cMeta property=\"og:image:height\" content=\"600\" /\u003e\n        \u003cMeta property=\"og:site_name\" content=\"GitHub\" /\u003e\n      \u003c/Head\u003e\n    \u003c/Html\u003e\n  );\n}\n```\n\nIf 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.\nThis overrides the `Meta` tags used within the `Head` component.\n\n```tsx\nimport MySiteTitle from \"~/components/MySiteTitle\";\n\nexport default function About() {\n  return (\n    \u003c\u003e\n      \u003cMySiteTitle\u003eAbout\u003c/MySiteTitle\u003e\n      \u003cMeta name=\"description\" content=\"This is my content tag.\" /\u003e\n      \u003cMeta\n        property=\"og:title\"\n        content=\"Welcome to my site!\"\n      /\u003e\n      \u003cMeta\n        property=\"og:description\"\n        content=\"A website\"\n      /\u003e\n      \u003ch1\u003eAbout\u003c/h1\u003e\n    \u003c/\u003e\n  );\n}\n```",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/head-and-metadata.mdx",
  "metadata": {
    "path": "src/routes/solid-start/building-your-application/head-and-metadata.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 4480,
    "source_type": "github"
  },
  "hash": "9216edf75978501932552e036d0980e43a8091475d5bfff3e7f37f96830ed3dc",
  "timestamp": "2026-02-23T11:43:00.193918848+01:00"
}