Skip to main content

Testing Open Graph while developing, the sane workflow

· 4 min read
Pere Pages
Pere Pages
Software Engineer

Testing Open Graph locally is a bit deceptive: your browser can see localhost, but Facebook, LinkedIn, Slack, Discord, X/Twitter, etc. cannot.

The best workflow is:

1. Check the HTML locally
2. Expose localhost with ngrok
3. Test the public URL in real social preview/debugger tools

Chrome plugins are useful for fast feedback, but the final validation should happen through a public HTTPS URL.

Open Graph Logo

https://ogp.me/

The problem​

I wanted to test the Open Graph metadata for a local blog page:

http://localhost:3000/blog/2026/06/03/the-right-terminal-stack-for-a-developer

First check:

curl "http://localhost:3000/blog/2026/06/03/the-right-terminal-stack-for-a-developer" | grep -i "og:"

The result showed no og: tags.

That usually means one of these things:

- Open Graph metadata is missing
- Metadata is rendered client-side only
- Dynamic metadata is not configured correctly
- The page HTML is not what you think it is

Better local check:

curl -s "http://localhost:3000/blog/2026/06/03/the-right-terminal-stack-for-a-developer" \
  | grep -Ei "og:|twitter:"

Or inspect all meta tags:

curl -s "http://localhost:3000/blog/2026/06/03/the-right-terminal-stack-for-a-developer" \
  | grep -i "<meta"

The local development workflow​

1. Validate the initial HTML​

Open Graph tags must exist in the server-rendered HTML.

This is good:

<meta property="og:title" content="The right terminal stack for a developer" />
<meta property="og:description" content="A practical terminal stack for developers." />
<meta property="og:image" content="https://example.com/og/terminal-stack.png" />
<meta property="og:url" content="https://example.com/blog/..." />

This is not enough:

useEffect(() => {
  document.title = 'My title';
});

Social crawlers usually do not wait for client-side React hydration.

2. Use ngrok for a real public URL​

ngrok exposes your local app to the internet through a temporary HTTPS URL.

Local:

http://localhost:3000

Public:

https://abc123.ngrok-free.app

Run:

ngrok http 3000

Then test:

https://YOUR-NGROK-DOMAIN.ngrok-free.app/blog/2026/06/03/the-right-terminal-stack-for-a-developer

If using Next.js, set a public site URL while testing:

NEXT_PUBLIC_SITE_URL=https://YOUR-NGROK-DOMAIN.ngrok-free.app

That way og:url and og:image can be generated as absolute URLs.

3. Test the real social previews​

Use platform-specific tools when possible:

These catch real-world problems like:

- image not reachable
- wrong content type
- image too small
- old cached metadata
- redirects
- robots.txt blocking crawlers
- relative image URLs

Chrome plugins​

For fast local checks, useful Chrome extensions include:

OG / Meta Tag Previewer
Social Media Link Preview
Open Graph Checker by Coywolf
Localhost Open Graph Checker
Localhost Open Graph Debugger

My practical combo:

Daily development:
curl + Localhost Open Graph Checker

Visual preview:
OG / Meta Tag Previewer

Final validation:
ngrok + real platform debuggers

Next.js note​

For App Router, prefer metadata or generateMetadata.

Example:

import type { Metadata } from 'next';

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: 'The right terminal stack for a developer',
    description: 'A practical terminal stack for developers.',
    openGraph: {
      title: 'The right terminal stack for a developer',
      description: 'A practical terminal stack for developers.',
      type: 'article',
      url: 'https://example.com/blog/2026/06/03/the-right-terminal-stack-for-a-developer',
      images: [
        {
          url: 'https://example.com/og/terminal-stack.png',
          width: 1200,
          height: 630,
          alt: 'The right terminal stack for a developer',
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: 'The right terminal stack for a developer',
      description: 'A practical terminal stack for developers.',
      images: ['https://example.com/og/terminal-stack.png'],
    },
  };
}

Caveats​

Chrome extensions are not a perfect replacement for real social crawlers.

localhost is not publicly reachable.

Some platforms cache previews aggressively, so changes may not appear immediately.

og:image should be an absolute public URL.

Use 1200x630 images to avoid weird cropping.

Test the final deployed URL before sharing publicly.

Final rule​

For Open Graph, do not trust what your browser sees.

Trust what a crawler can fetch from the initial HTML.