DEV Community

Cover image for Remix and SEO: A Brief Guide
Abdur-Rahman
Abdur-Rahman

Posted on

Remix and SEO: A Brief Guide

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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."
  };
}
Enter fullscreen mode Exit fullscreen mode

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 👋.

Discussion (2)

Collapse
laurencefass profile image
laurence fass

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"},
]
});

Collapse
raymondritter profile image
RaymondRitter

Nice article, very good information has been given by you. But if I want to do forum posting then I am busy in the same work but I will definitely come to read your article and I will definitely share it with my friends. Thanks for sharing this best article.