Open Graph tags in Remix

Add the tags

• The meta export. Remix v2's meta docs say the function returns an array of descriptors, one object per tag. A title property becomes the title element. property becomes a meta property attribute, which is what og: tags use. name becomes a meta name attribute, which is what twitter:card uses. content is the attribute value. tagName set to link, with rel canonical, is how the same export prints the canonical URL. Put an absolute https URL in og:image. A path with no host is still a path in the HTML. summary_large_image is the large card on X. The v1 meta export was an object that merged by key. v2 does not do that merge for you. The How to Add Open Graph Tags page is the properties these descriptors emit. The Next.js Open Graph page is the same fields as a metadata export.

  import type { MetaFunction } from "@remix-run/node";
  
  export const meta: MetaFunction = () => {
    return [
      { title: "Post title" },
      { name: "description", content: "One or two sentences." },
      { property: "og:title", content: "Post title" },
      { property: "og:description", content: "One or two sentences." },
      { property: "og:url", content: "https://example.com/post" },
      { property: "og:type", content: "article" },
      { property: "og:image", content: "https://example.com/og.png" },
      { property: "og:image:width", content: "1200" },
      { property: "og:image:height", content: "630" },
      { name: "twitter:card", content: "summary_large_image" },
      { name: "twitter:image", content: "https://example.com/og.png" },
      { tagName: "link", rel: "canonical", href: "https://example.com/post" },
    ];
  };

• Meta in the root head. The descriptors are rendered by the Meta component. Remix's docs put it in app/root.tsx, inside head, next to Links. Charset and the viewport tag are written as ordinary meta elements in that file, outside the meta export, so a child route cannot drop them by returning its own array. When Meta is missing from that document, the response has no og: tags, including on a route whose meta function is correct. A meta tag created in a component after hydration is not in the document request. That request is rendered on the server, and that HTML is what a crawler fetches. View source on the document response, not the head after the browser has navigated.

  import { Links, Meta, Outlet, Scripts } from "@remix-run/react";
  
  export default function App() {
    return (
      <html lang="en">
        <head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <Meta />
          <Links />
        </head>
        <body>
          <Outlet />
          <Scripts />
        </body>
      </html>
    );
  }

• A child route replaces the parent array. Remix uses the meta export from the last matching route that has one. A parent that sets og:image and a child that returns only a title leaves that child URL with no og:image. The merge the docs show is matches.flatMap of each match.meta. Spreading that array keeps the parent tags. It does not replace a title or an og:title already in the list, so the HTML can contain two of them. Filter the parent descriptors you are about to set again, then append the child's. The Open Graph protocol gives the first tag preference, and this checker reads the first og:title, og:description, and og:image. Two og:image tags means the card can show the parent's image. data on the meta arguments is the value the route's loader returned. When the loader throws, data is missing, so return the parent tags rather than reading fields off undefined. Build the image URL from the request origin. A root path in the loader is still a root path in the tag.

  import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
  import { json } from "@remix-run/node";
  
  const replaced = new Set([
    "og:title",
    "og:description",
    "og:url",
    "og:image",
    "twitter:card",
    "twitter:image",
  ]);
  
  export async function loader({ request }: LoaderFunctionArgs) {
    const origin = new URL(request.url).origin;
    return json({
      title: "Post title",
      description: "One or two sentences.",
      image: new URL("/og.png", origin).href,
    });
  }
  
  export const meta: MetaFunction<typeof loader> = ({ data, matches }) => {
    const parentMeta = matches
      .flatMap((match) => match.meta ?? [])
      .filter((meta) => !("title" in meta))
      .filter((meta) => {
        const property = "property" in meta ? meta.property : undefined;
        const name = "name" in meta ? meta.name : undefined;
        if (property && replaced.has(property)) return false;
        if (name && replaced.has(name)) return false;
        return true;
      });
    if (!data) return [...parentMeta, { title: "Not found" }];
    return [
      ...parentMeta,
      { title: data.title },
      { property: "og:title", content: data.title },
      { property: "og:description", content: data.description },
      { property: "og:image", content: data.image },
      { name: "twitter:card", content: "summary_large_image" },
      { name: "twitter:image", content: data.image },
    ];
  };

• Check the document response. Paste the public URL. Peekly fetches the HTML and grades og:title, og:description, og:image, and twitter:card. It does not run the Remix router in a browser. When the result is missing tags that the meta export returns, Meta is absent from the head that was served, or a parent export is the last one and the child never merged. The Open Graph Checker is that grade. The Twitter Card Validator is the card. The Astro Open Graph, Nuxt Open Graph, and SvelteKit Open Graph pages are the same tags in those frameworks. The Open Graph Image Size page is the file the width and height descriptors should describe.

Tags covered: og:title · og:description · og:image · og:url · og:type · twitter:card · twitter:image

More checkers

Twitter Card ValidatorOpen Graph CheckerLinkedIn Link Preview CheckerDiscord Embed PreviewWhatsApp Link Preview CheckerSlack Link Preview CheckeriMessage Link Preview CheckerFacebook Link Preview CheckerOpen Graph Image SizeTelegram Link Preview CheckerReddit Link Preview CheckerNext.js Open GraphRefresh a Link Preview CacheBluesky Link Preview CheckerMastodon Link Preview CheckerMicrosoft Teams Link Preview CheckerFix a Broken Open Graph PreviewInstagram Link Preview CheckerPinterest Link Preview CheckerTikTok Link Preview CheckerYouTube Link Preview CheckerThreads Link Preview CheckerSnapchat Link Preview CheckerHow to Add Open Graph TagsOpen Graph Image Not UpdatingDiscord Link PreviewX (Twitter) Link PreviewWordPress Open GraphShopify Open GraphAstro Open GraphNuxt Open GraphSvelteKit Open GraphAll platforms