{"id":13532515,"url":"https://github.com/solidjs/solid-meta","last_synced_at":"2025-04-04T22:09:11.950Z","repository":{"id":37289101,"uuid":"371885022","full_name":"solidjs/solid-meta","owner":"solidjs","description":"Write meta tags to the document head","archived":false,"fork":false,"pushed_at":"2024-09-02T15:29:43.000Z","size":683,"stargazers_count":128,"open_issues_count":26,"forks_count":17,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-29T18:41:47.215Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/solidjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-29T05:06:22.000Z","updated_at":"2024-10-19T06:20:03.000Z","dependencies_parsed_at":"2023-12-23T09:06:42.240Z","dependency_job_id":"e2418bd5-0bee-4935-b6b7-8c8542f8c503","html_url":"https://github.com/solidjs/solid-meta","commit_stats":{"total_commits":61,"total_committers":13,"mean_commits":"4.6923076923076925","dds":0.4098360655737705,"last_synced_commit":"b32fa71b9043fa8eefc3d23eca97c3da99e9ba36"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs%2Fsolid-meta","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs%2Fsolid-meta/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs%2Fsolid-meta/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidjs%2Fsolid-meta/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solidjs","download_url":"https://codeload.github.com/solidjs/solid-meta/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246971351,"owners_count":20862722,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T07:01:11.543Z","updated_at":"2025-04-04T22:09:11.917Z","avatar_url":"https://github.com/solidjs.png","language":"TypeScript","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["SEO"],"readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?project=Meta\u0026type=core\" alt=\"Solid Meta\"\u003e\n\u003c/p\u003e\n\n# Solid Meta [![npm Version](https://img.shields.io/npm/v/@solidjs/meta.svg?style=flat-square)](https://www.npmjs.org/package/@solidjs/meta)\n\nAsynchronous SSR-ready Document Head management for Solid based on [React Head](https://github.com/tizmagik/react-head)\n\n\u003e For Solid 1.0 use 0.27.x or greater.\n\u003e For versions of Solid 0.x use 0.26.x.\n\n## Motivation\n\nThis module allows you to define `document.head` tags anywhere in your component hierarchy. The motivations are similar to [react-helmet](https://github.com/nfl/react-helmet) in that you may only have the information for certain tags contextually deep in your component hiearchy. There are no dependencies and it should work fine with asynchronous rendering.\n\n## Installation\n\n```sh\nnpm i @solidjs/meta\n```\n\n## How it works\n\n1.  You wrap your App with `\u003cMetaProvider /\u003e`\n2.  To insert head tags within your app, just render one of `\u003cTitle /\u003e`, `\u003cMeta /\u003e`, `\u003cStyle /\u003e`, `\u003cLink /\u003e`, and `\u003cBase /\u003e` components as often as needed.\n3. On the server, if you render the `\u003chead\u003e` element using SolidJS in JSX, you are all good. Otherwise use `getAssets` from `solid-js/web` to insert the assets where you want.\n\nOn the server, the tags are collected, and then on the client the server-generated tags are removed in favor of the client-rendered tags so that SPAs still work as expected (e.g. in cases where subsequent page loads need to change the head tags).\n\n\n\u003e [!IMPORTANT]\n\u003e Be sure to avoid adding any normal `\u003ctitle /\u003e` tags in any server files (be it `entry-server.jsx|tsx` in SolidStart projects or inside your server file), as they would override the functionality of `@solid/meta`!\n\n\n### SolidStart setup\n\n1. Wrap your app with `\u003cMetaProvider /\u003e` inside of the `root` of the `\u003cRouter /\u003e` component.\n2. You can optionally provide a `\u003ctitle /\u003e` fallback by providing a `\u003cTitle /\u003e` component inside of `\u003cMetaProvider /\u003e`.\n\n#### `app.jsx` / `app.tsx`\n```jsx\n// @refresh reload\nimport { MetaProvider, Title } from \"@solidjs/meta\";\nimport { Router } from \"@solidjs/router\";\nimport { FileRoutes } from \"@solidjs/start\";\nimport { Suspense } from \"solid-js\";\nimport \"./app.css\";\n\nexport default function App() {\n  return (\n    \u003cRouter\n      root={props =\u003e (\n        \u003cMetaProvider\u003e\n          \u003cTitle\u003eSolidStart - Basic\u003c/Title\u003e\n          \u003ca href=\"/\"\u003eIndex\u003c/a\u003e\n          \u003ca href=\"/about\"\u003eAbout\u003c/a\u003e\n          \u003cSuspense\u003e{props.children}\u003c/Suspense\u003e\n        \u003c/MetaProvider\u003e\n      )}\n    \u003e\n      \u003cFileRoutes /\u003e\n    \u003c/Router\u003e\n  );\n}\n```\n\n---\n\n### Server setup\n\nWrap your app with `\u003cMetaProvider /\u003e` on the server, using a `tags[]` array to pass down as part of your server-rendered payload. When rendered, the component mutates this array to contain the tags.\n\n```jsx\nimport { renderToString, getAssets } from 'solid-js/web';\nimport { MetaProvider } from '@solidjs/meta';\nimport App from './App';\n\n// ... within the context of a request ...\nconst app = renderToString(() =\u003e\n  \u003cMetaProvider\u003e\n    \u003cApp /\u003e\n  \u003c/MetaProvider\u003e\n);\n\nres.send(`\n  \u003c!doctype html\u003e\n  \u003chtml\u003e\n    \u003chead\u003e\n      ${getAssets()}\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003cdiv id=\"root\"\u003e${app}\u003c/div\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n`);\n```\n\n### Client setup\n\nThere is nothing special required on the client, just render one of head tag components whenever you want to inject a tag in the `\u003chead /\u003e`.\n\n```jsx\nimport { MetaProvider, Title, Link, Meta } from '@solidjs/meta';\n\nconst App = () =\u003e (\n  \u003cMetaProvider\u003e\n    \u003cdiv class=\"Home\"\u003e\n      \u003cTitle\u003eTitle of page\u003c/Title\u003e\n      \u003cLink rel=\"canonical\" href=\"http://solidjs.com/\" /\u003e\n      \u003cMeta name=\"example\" content=\"whatever\" /\u003e\n      // ...\n    \u003c/div\u003e\n  \u003c/MetaProvider\u003e\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidjs%2Fsolid-meta","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolidjs%2Fsolid-meta","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidjs%2Fsolid-meta/lists"}