Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chaance/remix-seo
A package for easily managing SEO meta and link tags in Remix.
https://github.com/chaance/remix-seo
Last synced: 13 days ago
JSON representation
A package for easily managing SEO meta and link tags in Remix.
- Host: GitHub
- URL: https://github.com/chaance/remix-seo
- Owner: chaance
- License: mit
- Created: 2021-11-09T06:31:58.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-12T02:08:29.000Z (over 1 year ago)
- Last Synced: 2024-10-13T23:34:16.018Z (26 days ago)
- Language: TypeScript
- Size: 416 KB
- Stars: 118
- Watchers: 1
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-remix - remix-seo - A package for easily managing SEO meta and link tags in Remix. (Utility)
- awesome-remix - remix-seo - A package for easily managing SEO meta and link tags in Remix. (Utility)
README
# `remix-seo`
A package for easily managing SEO metadata tags in [Remix](https://remix.run).
WIP!
## Usage
```tsx
// app/seo.ts
import { initSeo } from "remix-seo";
export const { getSeo, getSeoMeta, getSeoLinks } = initSeo({
// Pass any SEO defaults for your site here.
// If individual routes do not provide their own meta and link tags,
// the tags generated by the defaults will be used.
title: "The Awesome Store",
titleTemplate: "%s | The Awesome Store",
description: "The most awesome store on planet Earth.",
});// app/root.tsx
import { getSeo } from "~/seo";
let [seoMeta, seoLinks] = getSeo();export let meta = () => ({ ...seoMeta, { whatever: "cool" } });
export let links = () => [ ...seoLinks, { rel: "stylesheet", href: "/sick-styles.css" } ];// app/routes/some-route.tsx
import { getSeo, getSeoMeta, getSeoLinks } from "~/seo";// No need for route data? Get meta and links in one call.
let [seoMeta, seoLinks] = getSeo({
title: "About us",
description: "We are great!",
});// SEO depends on route data?
// call getSeoMeta and getSeoLinks individually in the relevant function.
export let meta = ({ context }) => {
let seoMeta = getSeoMeta({
title: `Welcome ${context.name}`
});
return {
...seoMeta,
};
};
export let links = ({ context }) => {
let seoLinks = getSeoLinks({
title: `Welcome ${context.name}`
});
return [...seoLinks];
};
```