Search Engine Optimization is a feature lacking in a lot of today's frameworks, because pages are handled by the client in a lot of cases, search engines ususally don't have the means to access a page's data beforehand. This is something Remix takes care of easily.
How:
Remix makes use of a special tag <Meta /> that is stored in the root of your project (if you want SEO available, that is) and it is used once.
import { Meta, Outlet } from "remix";
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<Meta />
</head>
<body>
<Outlet />
</body>
</html>
);
}
It accesses all meta information of your route by getting an exported "meta" function:
// A random route in your app
export function meta: MetaFunction () {
return {
title: "Something cool",
description:
"This becomes the nice preview on search results."
};
}
The meta export would set the meta information of your route in a search browser.
And how does Remix handle the meta tags of several nested routes? Well, it accomplishes it by merging the tag information together hence removing the need to duplicate info in both parent and child route.
There are also some special cases, as using a meta key of title returns a <title> tag (sweet).
That's the end of this very short article. I'm actually planning something worthwhile and I hope to release it to you guys soon. If you have any topic you would like a write-up on, tell me in the comments below. Like always, I wish you a happy learning and awesome reading 👋.
Top comments (1)
Works with arrays. e.g. a metafunction with full SEO support took less than five minutes to set up. I didnt find this from any documentation it just made sense, and just worked.
export const meta: MetaFunction = () => ({
charset: "utf-8",
title: "Remix Notes",
viewport: "width=device-width,initial-scale=1",
link: [
{"shortlink": "remix1.syntapse.co.uk/"},
{"canonical": "remix1.syntapse.co.uk/"}
],
property: [
{"og:title": "Syntapse Software"},
{"og:url": "remix1.syntapse.co.uk/"},
{"og:image": "remix1.syntapse.co.uk/files/images...},
{"og:description": "Syntapse Software Advanced software applications"},
]
});