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: 3 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 (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-04-12T02:08:29.000Z (over 1 year ago)
• Last Synced: 2024-11-03T01:03:32.596Z (10 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];

};

```