If you wish to use this, add this to your package.json
"remix-seo-v2": "github:EuSouVoce/remix-seo-v2",
A package for easily managing SEO metadata tags in Remix.
WIP!
This fork is being mainteined by EuSouVoce, it has some differences from the original one. Chaance takes too long to update his package... That's why i've made this fork.
// app/seo.ts
import { initSeo } from "remix-seo";
export const { getSeo, getSeoMeta, getSeoMetaV2, 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, seoMetaV2, seoLinks] = getSeo();
// ------------- v1 ------------
export let meta = () => ( ...seoMeta, { whatever: "cool" } );
// ------------- v2 ------------
export let meta = () => ( [...seoMetaV2, { whatever: "cool" }] );
// Links
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, seoMetaV2, seoLinks] = getSeo({
title: "About us",
description: "We are great!",
});
// ----------- v1 Meta ----------------
// 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,
};
};
// ----------- v2 Meta ----------------
// SEO depends on route data?
export let meta = ({ context }) => {
let seoMetaV2 = getSeoMetaV2({
title: `Welcome ${context.name}`
});
return seoMetaV2; // or [...seoMetaV2] both will work.
};
export let links = ({ context }) => {
let seoLinks = getSeoLinks({
title: `Welcome ${context.name}`
});
return [...seoLinks];
};