Build link previews in JavaScript without a backend

What a link preview reads

Messaging apps and social networks build their cards from the same tags, so most sites maintain them. Read Open Graph first, Twitter card tags second, and plain HTML last; relative URLs in og:image or the icon must be resolved against the page URL with new URL(href, pageUrl).

Fetch the page and parse the tags

The browser blocks a direct fetch() of another site because the response has no Access-Control-Allow-Origin header; a request through the proxy comes back with that header set to your origin, the upstream status, and the HTML unchanged. DOMParser with text/html parses it without running scripts or loading images, so reading tags from untrusted HTML is safe. Set credentials: 'omit': the proxy never forwards cookies anyway, and this keeps the request simple.

const PROXY = 'https://proxy.cors.dev/';

async function getLinkPreview(pageUrl) {
  const response = await fetch(PROXY + pageUrl, { credentials: 'omit' });
  if (!response.ok) {
    throw new Error(`Preview failed: ${response.headers.get('X-Cors-Error') ?? response.status}`);
  }

  const doc = new DOMParser().parseFromString(await response.text(), 'text/html');
  const meta = (selector) => doc.querySelector(selector)?.getAttribute('content')?.trim() || '';
  const absolute = (href) => (href ? new URL(href, pageUrl).href : '');

  return {
    url: absolute(doc.querySelector('link[rel="canonical"]')?.getAttribute('href') || pageUrl),
    title: meta('meta[property="og:title"]') || meta('meta[name="twitter:title"]') || doc.title.trim(),
    description:
      meta('meta[property="og:description"]') ||
      meta('meta[name="twitter:description"]') ||
      meta('meta[name="description"]'),
    image: absolute(meta('meta[property="og:image"]') || meta('meta[name="twitter:image"]')),
    siteName: meta('meta[property="og:site_name"]') || new URL(pageUrl).hostname,
    icon: absolute(doc.querySelector('link[rel~="icon"]')?.getAttribute('href') || '/favicon.ico'),
  };
}

const preview = await getLinkPreview('https://github.blog/');
console.log(preview.title, preview.image);

When verified for this page, https://github.blog/ came back as 285 KB of HTML and https://flutter.dev/ as 74 KB, both well under the 1 MiB limit. A page that is too large answers 502 with X-Cors-Error: response_too_large; a page that is slow answers 502 with upstream_timeout after 10 seconds, and the 404 or 403 a site itself returns arrives unchanged with X-Cors-Source: upstream.

Render the card

Everything you read came from someone else's page, so set text with textContent and build elements with DOM methods instead of innerHTML. The image needs no proxy at all: an img element loads cross-origin images without CORS, and referrerpolicy="no-referrer" avoids hotlink checks that key on the referrer.

// Markup: <a id="preview" class="preview" target="_blank" rel="noopener"></a>
function renderPreview(card, preview) {
  card.href = preview.url;
  card.replaceChildren();

  if (preview.image) {
    const image = document.createElement('img');
    image.src = preview.image; // images load cross-origin without CORS
    image.alt = '';
    image.loading = 'lazy';
    image.referrerPolicy = 'no-referrer';
    card.append(image);
  }

  const title = document.createElement('strong');
  title.textContent = preview.title || preview.url;

  const description = document.createElement('p');
  description.textContent = preview.description;

  const site = document.createElement('small');
  site.textContent = preview.siteName;

  card.append(title, description, site);
}

getLinkPreview('https://github.blog/')
  .then((preview) => renderPreview(document.querySelector('#preview'), preview))
  .catch((error) => {
    document.querySelector('#preview').textContent = error.message;
  });

Pages that will not preview well

• Client-rendered apps: when the HTML is an empty shell filled in by JavaScript, the tags are not in the response. The proxy relays what the server sent and runs nothing.
• Login walls and bot checks: the proxy sends no cookies, so you get the logged-out page, and a site that answers 403 to unknown clients answers 403 through the proxy as well.
• Sites over 1 MiB: large news home pages approach the free limit. Pro relays up to 6 MiB. Article pages are usually far smaller than home pages.
• Plain http:// URLs: the proxy accepts public HTTPS targets only. Try the https:// form of the same URL first.
• Domains that opted out: a site owner can block proxy access, and you receive 403 with X-Cors-Error: owner_opted_out.

Limits and pricing

When a preview API or your own server is better

The browser approach costs nothing and ships today, and it previews the page as an anonymous visitor sees it. Reach for a server when you need screenshots, previews of pages that render client-side, caching shared between all your users, or previews generated while nobody has the page open, for example inside a chat message stored on your backend. Hosted preview APIs do the same work for a fee and an API key that must not live in your frontend.

Good questions.