How to Test Open Graph Tags on Localhost
You can inspect local HTML yourself, but an external preview service cannot reach the server on your laptop through localhost. Test the markup locally, then test public access through a preview URL.
Inspect your local response first
Start your development server and fetch the page directly. Replace the port and route below with yours:
curl -sS 'http://localhost:5173/products/blue-mug'Search the response for the expected sharing title, description, and image. Compare it with the page's browser document after rendering. This first test checks what the local server returns. It does not prove that a social platform can fetch the page.
If you only see a generic shell, read the React and Vite metadata guide. Fixing the rendering strategy locally is easier than deploying and purging platform caches repeatedly.
Use a public preview deployment for external checks
Deploy the test page to a temporary public preview URL. Open that exact nested route in a private window, without your normal account or access token. A deployment protected by a login prompt is not publicly fetchable just because you can view it.
Public checkers such as Proovd need a reachable HTTP or HTTPS URL. localhost, 127.0.0.1, private network addresses, and a local disk path are not suitable inputs for an external service. Proovd does not provide an upload-your-HTML testing mode.
A preview deployment also lets you test the built output rather than only the development server. The two can differ in routing, asset URLs, and the HTML actually published.
A temporary tunnel is another option
For a short development test, a tunnel can expose your local service through a public address. After installing Cloudflare's connector, its documented Quick Tunnel command follows this form:
cloudflared tunnel --url http://localhost:5173Cloudflare prints a temporary public URL. Use that URL for the page and keep the connector running during the test. See the Quick Tunnel documentation for current setup and limitations. A temporary address is not a stable production share link.
Your development server may require an explicit allowlist entry for the tunnel hostname. Follow your server's host-check configuration rather than disabling host checks broadly. Only expose a test service intended for public access.
Make the image reachable too
A public page can still declare an image at http://localhost:5173/share.jpg. An external crawler cannot retrieve that image from your machine through its own localhost.
Use a public absolute image URL for the test. If you generate metadata from a site-origin setting, check the deployed value instead of assuming the tunnel or host rewrites it. Inspect redirects and og:url too: a page that sends the crawler back to a private or production URL may not be testing what you intended.
For a dynamically generated image, request the image endpoint directly. See the image accessibility guide if it returns HTML, authentication, or an error.
Run the external test and restore production values
- Fetch the public page URL without your local session.
- Confirm its metadata and image both use reachable addresses.
- Inspect that public URL with Proovd.
- Test a fresh share in the platform you care about.
- Before release, replace temporary page and image URLs with stable production values and verify the build again.
Public previews and tunnels can be cached under their own URLs. A successful test is evidence about that tested URL at that time; it does not automatically validate a different production route. Keep both URLs in your release checklist so you know which result you are looking at.