How to Check OG Tags on Localhost — Test Before You Deploy

Social platform debuggers require a live, publicly accessible URL. If your page is running on localhost:3000 or a staging server behind a VPN, those tools are useless. You cannot tell Facebook's scraper to fetch http://localhost.

The HTML paste method solves this entirely. You test your meta tags directly from the HTML, with no network requests involved. The checker runs in your browser, reads the tags from whatever HTML you give it, and shows you exactly how the preview card will render — all before you deploy a single file.

Here is the complete workflow for testing OG tags during local development.

Why Localhost Testing Matters for OG Tags

Open Graph tags are easy to forget until something breaks in production. A missing og:image tag on a new page template means every page created from that template goes out with a broken preview. A wrong og:description in the layout file means every page on the site shows the same generic description when shared.

Catching these problems locally means they never reach production. And checking OG tags during development is faster than doing it after deploy — you are already looking at the HTML, you do not need to wait for deploy pipelines or CDN propagation.

What you cannot check on localhost

The HTML paste method tests what your meta tags say. It does not confirm that the image URL in your og:image tag is publicly accessible. If your development images are served from localhost:3000/images/ and your og:image tag correctly references the production CDN URL, the tag is correct — but you still need to verify the image loads on the CDN after deploy.

Separate concerns: use the HTML paste checker for tag structure and content. After deploy, do one URL-based check to confirm image accessibility.

Step-by-Step: Testing OG Tags on Localhost

This workflow works for any local development server: Next.js, React, Nuxt, SvelteKit, plain HTML, or any other setup.

1. Run your dev server and navigate to the page you want to check
2. View page source — press Ctrl+U (Windows/Linux) or Cmd+U (Mac)
3. Select all (Ctrl+A or Cmd+A) and copy (Ctrl+C or Cmd+C)
4. Open the OG checker in a new tab
5. Paste the HTML into the HTML tab
6. Click Check Tags

The results show all your meta tags, flag anything missing, and render preview cards for Facebook/LinkedIn and Twitter/X. The entire check happens in your browser — nothing is sent to any server.

For server-side rendered pages

SSR frameworks like Next.js with getServerSideProps or Nuxt with asyncData render the full HTML on the server. The view-source output includes all meta tags as they would appear to a scraper. This is exactly what you want to test.

For client-side rendered pages

If your meta tags are injected by JavaScript after the initial page load (common with some React setups using react-helmet), the view-source HTML may not include the tags because the browser has not run the JavaScript yet. In that case, use the browser's "Inspect Element" panel to see the rendered DOM, then check if your meta tags appear in the head after JS runs.

Sell Custom Apparel — We Handle Printing & Free Shipping

Checking OG Tags in Different Development Setups

The HTML paste method works universally, but the details of getting to the HTML differ slightly depending on your stack.

Next.js (App Router)

Next.js App Router generates meta tags server-side from the metadata export in page.tsx or layout.tsx. View source in the browser to confirm tags are being generated. If your og:image uses the Next.js image optimization component, verify the generated URL is absolute.

Next.js (Pages Router with next/head)

Tags added via next/head are injected on both server and client. View source should show them. If they are missing in view-source, check that next/head is rendering before hydration completes.

Nuxt 3 / useHead

Nuxt renders meta tags server-side by default. View source should show all tags. Check that useHead or useSeoMeta is called in the right composable scope.

Plain HTML / static sites

Direct view-source. Everything is in the HTML exactly as it appears to the checker.

WordPress (local with Local by Flywheel or MAMP)

WordPress locally still generates the full HTML. View source shows the Yoast or RankMath generated OG tags. The only issue is that og:image may point to a localhost URL, which platforms cannot fetch. That is expected during development — confirm the tag structure is correct, then verify image accessibility after deploying to staging or production.

Common OG Tag Problems Found During Local Testing

These are the problems most often caught by testing OG tags locally before deploy.

og:image pointing to localhost

During development your og:image might be generated as http://localhost:3000/og-image.jpg. This is fine for testing the tag structure, but you need to confirm the production URL will be correct. Look at how your og:image URL is being generated in your template and make sure it uses the production domain.

og:url not matching the canonical URL

If your og:url is generated from the current request URL, it might include localhost:3000 on local or staging.yourdomain.com on staging. Make sure the URL generation uses your configured production base URL, not the runtime server hostname.

Missing tags on dynamic pages

Static pages often have correct OG tags set manually. Dynamic pages (product pages, blog posts, user profiles) often have tags that are supposed to pull from a database or API. Check several different dynamic pages locally to confirm the tags are populating correctly — not just showing the fallback or template defaults.

Tags duplicated

If both a site-wide layout and a page-specific component add og:title, you may end up with two og:title tags. Platforms typically use the first one they find, but it is still a problem worth fixing. The checker will show both values if duplicates exist.

What to Check After Deploy

Local testing confirms your tag structure. A post-deploy check confirms your image URLs are publicly accessible.

Quick post-deploy checklist

1. Run the OG checker with the live URL (not HTML paste) on one representative page of each template type
2. Confirm og:image loads by pasting the og:image URL directly into an incognito browser tab
3. Check one page in Facebook's Sharing Debugger to see what their scraper found
4. If og:image dimensions differ from the declared og:image:width and og:image:height, update the dimension tags

This post-deploy check takes about five minutes per template type. Combined with local testing during development, you catch problems before they affect any live shares.

Frequently Asked Questions

Can I test OG tags from a staging server behind a VPN?

Yes — use the HTML paste method. Open your staging page in a browser, view the source, copy it, and paste it into the checker. The checker runs in your browser, not on any server, so VPN restrictions and access controls do not matter. You will see exactly what meta tags your staging server is generating.

My og:image points to localhost in development. Do I need to fix that?

For local testing purposes, you just need to verify the tag structure is correct — that og:image exists, has the right format, and the URL pattern looks right. The localhost URL obviously will not work for platform scrapers. Before deploying, confirm your og:image URL generation uses the production base URL so deployed pages point to an accessible image.

How do I check OG tags for a Next.js page that uses dynamic data?

Run your Next.js dev server, navigate to the dynamic page (for example, a specific product page with real data), and view the source. If you use generateMetadata in App Router or getServerSideProps in Pages Router, the tags will be in the rendered HTML. Copy the source and paste into the checker to validate.