Open Graph Checker: Social Meta Tag Inspector & Preview

Inspect Open Graph and Twitter Card tags to preview how links display across social networks, chat messengers, and search engines.

Technical Architecture: Reverse-Engineering Social Metadata Scrapers​

When content is shared across social networks (LinkedIn, X/Twitter, Facebook, Discord, Slack), web crawlers parse HTML head tags according to the Open Graph Protocol and Twitter Cards specification.

Because modern client-side browsers restrict direct cross-origin HTTP requests due to CORS (Cross-Origin Resource Sharing), the Open Graph Checker routes requests through a serverless proxy edge function (/api/fetchOg) powered by Node.js and Cheerio.

1. Serverless HTML Extraction & Protocol Validation​

The backend serverless function validates protocols, sets standard crawler headers, and executes an HTTP GET request with an aggressive 10-second timeout to prevent crawler deadlocks:

// api/fetchOg.js (extract)
const cheerio = require('cheerio');

module.exports = async (req, res) => {
  const { url } = req.query;
  if (!url) return res.status(400).json({ error: 'Missing url parameter' });

  let urlString = decodeURIComponent(url).trim();
  if (!urlString.startsWith('http://') && !urlString.startsWith('https://')) {
    urlString = 'https://' + urlString;
  }

  const targetUrl = new URL(urlString);
  const fetchResponse = await fetch(targetUrl.toString(), {
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) ' +
                    'AppleWebKit/537.36 (KHTML, like Gecko) ' +
                    'Chrome/114.0.0.0 Safari/537.36 (Vercel OG Checker)',
      'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8'
    },
    signal: AbortSignal.timeout(10000)
  });

  const html = await fetchResponse.text();
  const $ = cheerio.load(html);
  // ... DOM metadata parsing
};

2. Multi-Tier Fallback Hierarchy​

Search engines and social platforms do not evaluate metadata in a vacuum. If dedicated og: properties are missing, scrapers cascade down a standardized fallback hierarchy:

[ Title Resolution ]
1. meta[property="og:title"]
   └──> 2. meta[name="twitter:title"]
        └──> 3. <title> DOM Element
             └──> 4. h1 DOM Element (emergency fallback)

[ Description Resolution ]
1. meta[property="og:description"]
   └──> 2. meta[name="twitter:description"]
        └──> 3. meta[name="description"]

[ Image Resolution ]
1. meta[property="og:image"]
   └──> 2. meta[name="twitter:image"]
        └──> 3. link[rel="image_src"]

The scraper normalizes relative image paths (e.g., /assets/cover.png) into absolute URLs using the parsed origin:

const resolveAbsoluteUrl = (relativeOrAbsolute, baseOrigin) => {
  try {
    return new URL(relativeOrAbsolute, baseOrigin).href;
  } catch {
    return relativeOrAbsolute;
  }
};

3. Open Graph and Twitter Card Specifications​

4. Client-Side Security & Proxy Data Guarantee​

• Zero Content Caching: Remote HTML payloads are parsed in ephemeral serverless execution context and discarded immediately.
• No Authentication Forwarding: Scraper requests omit cookies, authorization tokens, and user-agent identifying headers of the user.
• SSRF Protection: Requests targeting loopback (127.0.0.1, localhost) or private network IP ranges are rejected before network socket initialization.

Related Tools​

Related Posts​

Markdown Reference Cheatsheet 2025

Markdown is a lightweight markup language that allows you to format plain text. It is widely used for documentation, writing articles, and creating web content.

Understanding Off-by-One Errors in JavaScript

A guide for senior developers on identifying and avoiding off-by-one errors in JavaScript with practical code examples.

Vercel vs GitHub pages comparison for project maker

Vercel vs GitHub pages comparison in terms of settings, customization and deploying future projects