This commit is contained in:
Tomas Dvorak
2026-02-24 10:33:59 +01:00
parent 409acd2e08
commit 898a3c303f
1374 changed files with 290409 additions and 29187 deletions
@@ -0,0 +1,17 @@
{
"id": "0df8e0e30ae8ce874be4b3af",
"source": "solid:signals",
"type": "github-document",
"title": "installation-and-setup",
"content": "---\ntitle: Install and configure\norder: 1\nuse_cases: \u003e-\n initial setup, meta tags configuration, seo setup, head management setup, ssr\n meta tags\ntags:\n - setup\n - installation\n - meta\n - configuration\n - seo\nversion: '1.0'\ndescription: \u003e-\n Install and configure @solidjs/meta for head tag management. Set up dynamic\n titles, meta tags, and SEO optimization in Solid apps.\n---\n\n:::note[Prerequisites]\nIf using Solid `v1.0`, use version `0.27.x` or greater.\nFor earlier versions (eg. `v0.x`), you must use `v0.26.x`.\n:::\n\n## Installation\n\nTo get started, install using your preferred package manager.\n\n```package-install\n@solidjs/meta\n```\n\n## Setup\n\n1. Wrap your application with [`\u003cMetaProvider /\u003e`](/solid-meta/reference/meta/metaprovider)\n2. To include head tags within your application, render any of the following:\n\t1. [`\u003cTitle /\u003e`](/solid-meta/reference/meta/title): Adds the `title` of the page.\n\t2. [`\u003cMeta /\u003e`](/solid-meta/reference/meta/meta): Adds extra metadata to the page.\n\t3. [`\u003cStyle /\u003e`](/solid-meta/reference/meta/style): Adds a `style` element to the page.\n\t4. [`\u003cLink /\u003e`](/solid-meta/reference/meta/link): Specifies a relationship between the page and an external resource.\n\t5. [`\u003cBase /\u003e`](/solid-meta/reference/meta/base): Specifies the base URL for all relative URLs in the document.\n\t6. [`useHead`](/solid-meta/reference/meta/use-head): Inserts arbitrary head tags when a dedicated component does not exist.\n- These components can be used multiple times within the application.\n3. If using Solid on the server with JSX, no additional configuration is required.\n\nHere is an example of how your code might look after this setup.\n```js\nimport { MetaProvider, Title, Link, Meta } from \"@solidjs/meta\";\n\nconst App = () =\u003e (\n\t\u003cMetaProvider\u003e\n\t\t\u003cdiv class=\"Home\"\u003e\n\t\t\t\u003cTitle\u003eTitle of page\u003c/Title\u003e\n\t\t\t\u003cLink rel=\"canonical\" href=\"http://solidjs.com/\" /\u003e\n\t\t\t\u003cMeta name=\"example\" content=\"whatever\" /\u003e\n\t\t\u003c/div\u003e\n\t\u003c/MetaProvider\u003e\n);\n```\nOn the server, tags are collected, and then on the client, server-generated tags are replaced with those rendered on the client side.\nThis process is important for maintaining the expected behavior, such as Single Page Applications (SPAs) when pages load that require changes to the head tags.\n\nHowever, you can manage asset insertion using `getAssets` from `solid-js/web`.",
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/getting-started/installation-and-setup.mdx",
"metadata": {
"path": "src/routes/solid-meta/getting-started/installation-and-setup.mdx",
"repo": "solidjs/solid-docs",
"repo_url": "https://github.com/solidjs/solid-docs.git",
"size": 2330,
"source_type": "github"
},
"hash": "bb1f2f36d92ad93e8fb9b72cfb03f8710b039836eb9e9fc6b0656ca33e095b8c",
"timestamp": "2026-02-23T11:43:00.191070385+01:00"
}