Recommended Free Tools
Add Open Graph tags as metadata in the page’s HTML <head>. For a single-page site, one fixed set may be enough. If different React routes need different previews, make sure each route’s initial HTML response contains its own metadata; tags added only after client-side rendering may not be available to every preview consumer.
Which Open Graph tags should a React page include?
The Open Graph Protocol specifies four required properties: og:title, og:type, og:image, and og:url. Set their values for the particular page. The protocol treats og:url as the object’s permanent, canonical URL. Open Graph Protocol
As an Amazon Associate I earn from qualifying purchases.
A concise og:description is optional but useful. For an image, the protocol says to provide og:image:alt describing what it depicts. It also defines optional structured properties such as image MIME type, width, and height. It does not establish current image dimensions or file-size recommendations for every social platform, so check the platform you target before relying on a particular format or size. Open Graph Protocol
Add tags with React’s built-in meta component
React documents that its built-in <meta> component can be rendered from any component and React places the corresponding element in the document head. This example uses page-specific values; replace them with the correct data for your page. React meta reference
function SocialMetadata() {
return (
<>
<meta property="og:title" content="Example page title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/images/page-preview.jpg" />
<meta property="og:description" content="A concise description of this page." />
<meta property="og:image:alt" content="Description of the preview image" />
</>
);
}Render the component as part of the page whose metadata it describes. Use absolute URLs for og:url and og:image, and ensure the image URL is publicly reachable. Avoid putting a second, conflicting set of tags in the static HTML shell.
Make metadata route-specific
A common issue with client-rendered React sites is that the web server returns the same generic HTML shell for every route, while React updates the DOM only after the browser starts the app. A social preview consumer may inspect the route’s initial HTML response rather than wait for those updates. The reliable goal is therefore to return route-specific Open Graph values in the HTML for that exact URL.
| Approach | Best fit | Trade-off |
|---|---|---|
| Static tags in the HTML template | A one-page site or a site where one site-wide preview is acceptable | Simple, but it does not create unique metadata for each route. |
| React meta components in the response | A React version and rendering setup that emit the component’s metadata in the route response | Composable; verify the production response rather than assuming client-side DOM changes are enough. |
| Server rendering or framework metadata facilities | Routes need distinct metadata and the stack supports server rendering | Can emit route values in the initial response; exact setup depends on the framework. |
| Build-time HTML for each route | The route set can be generated before deployment | Produces route-specific HTML without runtime rendering, but requires build and deployment support. |
| Server-side placeholder replacement | An existing app serves an HTML shell through a custom server that can look up route metadata | Adapts a client-rendered app, but substitution and HTML escaping must be handled correctly. |
React’s renderToStaticMarkup can turn a React tree into an HTML string for a server response, but its output cannot be hydrated. React documents renderToString with hydrateRoot for interactive apps. Treat static markup as a lower-level rendering option, not an automatic replacement for the server-rendering approach supplied by your framework. React renderToStaticMarkup reference
Create React App’s documentation describes two concrete ways to provide per-page metadata: server-side substitution of placeholders and pre-building each page as static HTML. It also warns that inserted values must be sanitized and escaped. Create React App is deprecated, so use that documentation as an implementation pattern for an existing app, not as a recommendation for a new project. Create React App: Title and Meta Tags
Example template for server-side replacement
<meta property="og:title" content="__OG_TITLE__" />
<meta property="og:description" content="__OG_DESCRIPTION__" />
<meta property="og:url" content="__OG_URL__" />
<meta property="og:image" content="__OG_IMAGE__" />Replace each placeholder using metadata looked up for the requested route. Escape values for their HTML-attribute context; do not concatenate untrusted titles or descriptions directly into markup. Validate that each route resolves to the intended canonical URL and image.
Verify the HTML that a preview consumer receives
- Request the exact public route and inspect its returned HTML source or HTTP response, not only the DOM after the app has run.
- Confirm that the response contains
og:title,og:type,og:image, andog:url, with values for that route. - Check that
og:urlis the intended canonical URL andog:imageresolves to a publicly reachable image. Reviewog:descriptionandog:image:altas well. - Inspect at least two routes that should have different previews; make sure neither receives the other route’s metadata or duplicate tags.
- Use the target platform’s current preview or debugging tool to see how it interprets the page. The Open Graph Protocol lists Facebook’s Object Debugger; platform behavior and tool availability can change. Open Graph Protocol
Troubleshoot common preview problems
- The preview shows generic or wrong details: Inspect the raw HTML response for the exact route. If the route gets only shared shell metadata, render, generate, or substitute its values into the response.
- The browser shows tags but the preview does not: The tags may be added after client-side rendering. Confirm that the initial HTML response already includes them.
- The preview uses the wrong page URL: Set
og:urlto that page’s canonical URL, not a relative path or a URL for a different route. - The image is missing: Check that
og:imageis an absolute URL and publicly reachable. The protocol does not specify universal current platform dimensions, so verify the target platform’s guidance. - Title or description markup breaks: Escape dynamically inserted values for HTML attributes before substituting them into a template.
- One tag seems to override another: Search the response for repeated properties. The protocol permits repeated values and gives the first value preference in conflicts; remove accidental duplicates or put values in a predictable order. Open Graph Protocol
- A platform still shows an old preview: Check the platform’s current preview/debugging tool and refresh its cached interpretation if that option is available.
Or skip the browser setup
If you need a screenshot of the finished page for a preview check or another workflow, ScreenshotNeo can return an image or PDF from one GET request. Its cookie/consent handling removes known consent banners, newsletter popups, and chat widgets before capture, and each of those steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed; responses report the page verdict and billing status. ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for AI agents.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webpSee the ScreenshotNeo API documentation for request options. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. ScreenshotNeo also supports PNG, JPEG, WebP, and PDF output. Sign up for 1,000 free screenshots a month with no card.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Quick Recap
Best Value
Rank #4
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.
