When you share a link on LinkedIn, Twitter/X, WhatsApp, Slack, Discord, or Facebook, the platform does not just show a plain URL.
It generates a link preview.
That preview usually includes:
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:url" content="https://example.com/page" />
These tags control how your page appears when someone shares it.
But there is one annoying problem developers keep running into:
Most Open Graph preview tools only work after your website is already public.
That means if you are building a page on localhost, you usually cannot properly test how the preview will look before deployment.
And by the time you notice the preview is broken, someone has already shared the link.
The problem with testing Open Graph tags locally
During development, your site usually runs on something like:
http://localhost:3000
http://localhost:5173
http://127.0.0.1:3000
This works perfectly in your browser.
But social media crawlers cannot access your local machine.
So tools like platform debuggers, card validators, and social preview inspectors often fail when you try to test a local page.
They need a public URL.
That creates a frustrating workflow:
Build page locally
Deploy page
Test link preview
Find broken OG image
Fix it locally
Deploy again
Test again
Find cached preview issue
Repeat
This is especially painful when you are working on:
- Landing pages
- Blog posts
- Product pages
- Launch pages
- Marketing campaigns
- Documentation pages
- Dynamic OG images
- Next.js metadata
- Astro or Vite sites
- CMS-driven pages
A small metadata mistake can make a polished page look broken when shared.
Why link previews break so often
A page can look perfect in the browser but still generate a bad social preview.
Common causes include:
- Missing
og:image - Wrong image dimensions
- Relative image URLs
- Blocked crawler access
- Dynamic metadata not rendering correctly
- Incorrect canonical URL
- Old cached preview
- Missing Twitter card tags
- Image too large
- Image served with the wrong content type
For example, this may look fine in your local HTML:
<meta property="og:image" content="/og-image.png" />
But many social crawlers expect an absolute URL:
<meta property="og:image" content="https://example.com/og-image.png" />
Another common issue is dynamic metadata.
In a Next.js app, your metadata might depend on route params, CMS content, or generated images. The browser route works, but the crawler may not receive the final metadata you expected.
The better workflow: preview before deployment
A better workflow looks like this:
Build page locally
Preview metadata and link cards locally
Fix title, description, image, and layout
Deploy only after the preview looks right
This saves time because you are not using production deployment as your testing environment.
It also prevents ugly previews from appearing during launch.
That is the exact problem LinkPeek is designed to solve.
Preview localhost link cards with LinkPeek
LinkPeek is a social media link preview tool that helps you check how your links will appear across platforms.
The important developer-focused use case is this:
You can test link previews while the website is still in development, including local or pre-deployment workflows.
Instead of waiting until the page is live, you can verify your preview earlier.
You can check things like:
- Open Graph title
- Open Graph description
- Open Graph image
- Twitter/X card preview
- LinkedIn-style preview
- WhatsApp-style preview
- Social image fit
- Metadata quality
- Crawler visibility issues
This is useful for developers, indie hackers, marketers, and startup teams who want their pages to look polished before launch.
Example: testing metadata in a Next.js app
Let’s say you are building a product page in Next.js.
Your metadata might look like this:
export const metadata = {
title: "LaunchPad — Build Product Launch Pages Faster",
description:
"Create high-converting launch pages with reusable sections, SEO defaults, and polished social previews.",
openGraph: {
title: "LaunchPad — Build Product Launch Pages Faster",
description:
"Create high-converting launch pages with reusable sections, SEO defaults, and polished social previews.",
images: [
{
url: "https://example.com/og/launchpad.png",
width: 1200,
height: 630,
alt: "LaunchPad product launch page preview",
},
],
},
twitter: {
card: "summary_large_image",
title: "LaunchPad — Build Product Launch Pages Faster",
description:
"Create high-converting launch pages with reusable sections, SEO defaults, and polished social previews.",
images: ["https://example.com/og/launchpad.png"],
},
};
This looks fine in code.
But before shipping, you should check:
- Does the title get cut off?
- Is the description too long?
- Does the image fit correctly?
- Is the OG image readable on mobile?
- Does the card look good on LinkedIn?
- Does the image work in WhatsApp?
- Are all URLs absolute?
- Is the preview consistent across platforms?
Testing this before deployment catches small mistakes early.
A simple Open Graph checklist for localhost development
Before pushing a page live, check these items.
1. Use a clear Open Graph title
Bad:
<meta property="og:title" content="Home" />
Better:
<meta
property="og:title"
content="LinkPeek — Preview Social Media Link Cards Before Publishing"
/>
Your title should explain the page even when seen outside your website.
2. Write a useful description
Bad:
<meta property="og:description" content="Welcome to our website." />
Better:
<meta
property="og:description"
content="Preview Open Graph tags, social media cards, titles, descriptions, and preview images before sharing your links."
/>
The description should give people a reason to click.
3. Use an absolute OG image URL
Avoid this:
<meta property="og:image" content="/og-image.png" />
Use this:
<meta property="og:image" content="https://example.com/og-image.png" />
Social platforms need to fetch the image from a public URL.
4. Use the right image size
A safe default for most Open Graph images is:
1200 × 630 px
Also make sure the important text is centered and readable when cropped.
5. Add Twitter card tags
Open Graph tags are important, but Twitter/X also supports its own card tags:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/og-image.png" />
6. Check platform differences
Different platforms may render previews differently.
A preview that looks good on LinkedIn may look slightly different on WhatsApp, Slack, Discord, or Twitter/X.
That is why cross-platform preview testing matters.
Where this helps most
Local link preview testing is especially useful before:
- Launching a SaaS landing page
- Publishing a blog post
- Sharing a Product Hunt launch
- Sending a press release
- Posting a LinkedIn campaign
- Shipping documentation
- Launching a waitlist page
- Publishing dynamic user-generated pages
Your link preview is often the first impression people see.
If the image is broken, the title is vague, or the description is missing, the page immediately looks less trustworthy.
Final thoughts
Open Graph metadata is easy to ignore because it does not affect how your page looks inside the browser.
But it strongly affects how your page looks when shared.
And for many websites, the shared preview is the first thing users see.
The old workflow was:
Deploy first, debug later.
The better workflow is:
Preview first, deploy with confidence.
If you are building landing pages, blog posts, launch pages, or marketing pages, test your link previews before publishing.
You can try it here:
Top comments (0)