Export a route-level meta function and return an og:image descriptor whose content is the absolute URL of your social preview image. For a different image on each page, use the route’s loader data. In nested routes, return the full set of metadata descriptors the page needs: Remix uses the last matching route with a meta export rather than automatically combining every parent and child route’s descriptors.
Set Open Graph metadata in a Remix route
Remix’s route meta export is the route-level place to provide page metadata. The Open Graph Protocol identifies og:title, og:type, og:image, and og:url as its four basic properties. For an article page, provide those values and, where available, an image description in og:image:alt.
As an Amazon Associate I earn from qualifying purchases.
This example shows the API shape described in the Remix route metadata documentation. It assumes a loader that returns an article with the indicated fields; adapt the types and data structure to your app. The documentation example is not tested application code.
import type { MetaFunction } from "@remix-run/node";
export const meta: MetaFunction<typeof loader> = ({ data }) => [
{ title: data.article.title },
{ property: "og:title", content: data.article.title },
{ property: "og:type", content: "article" },
{ property: "og:url", content: data.article.canonicalUrl },
{ property: "og:image", content: data.article.socialImageUrl },
{ property: "og:image:alt", content: data.article.socialImageAlt },
];The loader data must include the fields used by the function. In particular, socialImageUrl should resolve to the image itself, not to the page displaying it, and canonicalUrl should identify the page. Open Graph defines og:url as the object’s canonical, permanent identifier and og:image as the URL of its representative image. See the Open Graph Protocol for the property definitions.
#1 Best Overall
Choose a fixed image or a route-specific image
One site-wide default
If every page should use the same preview, provide that image URL in the root route’s metadata. This is a straightforward fit for a single default card; it does not make the image specific to an individual article.
A different image for each page
For content-specific previews, return each record’s social image URL from its route loader and read it in the route’s meta function. Remix documents passing loader data to meta, as in the example above. Ensure the loader returns the values the metadata function expects for every relevant state, including any state in which the record is unavailable.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Account for nested-route metadata
Nested route metadata is the main Remix-specific gotcha. When several nested routes match, Remix says it takes the last matching route with a meta export and uses that export. Do not assume a child route’s og:image is automatically merged with descriptors from its parent. A child route should return the descriptors that need to remain on that page, including any shared title or Open Graph fields that should still be present.
For global tags such as viewport and charset, Remix’s documentation recommends ordinary <meta> tags in the root rather than relying on nested route metadata to merge them.
Rank #3
Understand the image properties
The Open Graph Protocol defines additional structured properties for images. Include the description when using an image, and use the optional technical fields when they are relevant to your published asset.
og:image:alt: a description of the image, not a caption.og:image:secure_url: a secure image URL.og:image:type: the image’s MIME type.og:image:widthandog:image:height: the image dimensions.
If a page declares multiple images, the protocol says the first value takes preference when there is a conflict. Put an image’s structured properties after that image’s og:image declaration so the values are associated in the intended order.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Verify the metadata and troubleshoot common problems
Inspect the rendered page’s metadata and confirm that the route actually supplies the intended values. A page can look correct in a browser while its metadata still points to a default, missing, or incorrect image.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
- The preview uses the wrong image: check the route’s loader data and the
og:imagevalue returned by the last matching route with ametaexport. - Some expected tags disappear on a nested page: return the full set of route descriptors required for that page; nested metadata is not an automatic parent-child merge.
- The image URL points to the page rather than the asset: set
og:imageto the image URL and useog:urlfor the canonical page URL. - The image has no descriptive text: add
og:image:altwith an image description, not a caption.
The cited Remix and Open Graph documentation do not establish current social-platform-specific image dimensions, file-size limits, crawler access rules, or preview-cache refresh steps. Check the relevant platform’s current documentation before relying on a particular limit or refresh procedure.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a screenshot of a public page as an image asset, ScreenshotNeo can capture a URL with one GET request. It captures the rendered page; it does not generate a designed social card. This is separate from adding the resulting asset’s URL to your route metadata.
For example, this request captures the specified page as WebP. Replace the access key with your own; see the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp- Cookie and consent banners, newsletter popups, and chat widgets are removed before capture; each step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers identify the page verdict and billing status.
- An MCP server provides screenshot tools for AI agents, including
take_screenshot,get_page_info, andcapture_pdf. - The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Frequently Asked Questions
Does adding og:image guarantee that every social platform will display the image?
No guarantee is established by the cited protocol or Remix documentation. They define the metadata mechanism and properties, not each platform’s crawler behavior or display rules.
Can I use several Open Graph images on one page?
Yes. The protocol supports multiple image values and says the first takes preference when values conflict; order each image’s structured properties after its declaration.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
