Add a website link preview with Open Graph tags and Remix.

What it might look like (in Discord)

Code

// app/root.tsx (but you can define the meta function on any route)

export const meta: MetaFunction = ({ data }) => {
  // Loader data may not be available in the case of an error
  const rootUrl = data?.rootUrl ?? "https://incremental-it.com";

  return {
    title: "Incremental IT",
    description: "A software development company operated by Charles Hebert",
    "og:url": rootUrl,
    "og:type": "website",
    "og:description":
      "A software development company operated by Charles Hebert",
    "og:image": `${rootUrl}/images/IIT_logo_black_background_white_300x300.png`,
  };
};

Output

<meta property="og:url" content="https://incremental-it.com">
<meta property="og:type" content="website">
<meta property="og:description" content="A software development company operated by Charles Hebert">
<meta property="og:image" content="https://incremental-it.com/images/IIT_logo_black_background_white_300x300.png">