mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
3.2 KiB
JSON
17 lines
3.2 KiB
JSON
{
|
|
"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"
|
|
} |