Free Link Preview API

Every time you paste a URL into Slack, iMessage, or Twitter, you see a rich preview card appear beneath it: a title, a thumbnail image, a short description, and sometimes a site favicon. These cards are called link previews, and they have become the standard way users consume shared links across the web. Behind every one of those cards is a metadata extraction process that fetches Open Graph tags, Twitter Card properties, and structured data from the target page.

Building this extraction yourself is harder than it looks. You need to handle redirects, parse malformed HTML, respect robots directives, deal with character encoding issues, manage timeouts for slow servers, and extract favicons from multiple potential sources. The LinkMeta API handles all of that for you in a single GET request, completely free and with no API key required.

This guide walks through the most common use cases for a link preview API, explains how the underlying protocol works, and shows you how to integrate LinkMeta into your application with working code examples in cURL, JavaScript, and Python.

Use Cases for Link Previews

Chat and Messaging Applications

Chat platforms like Slack, Discord, Microsoft Teams, and WhatsApp all display link previews when users share URLs. If you are building a messaging application, a team collaboration tool, or a customer support chat widget, link previews are a baseline feature users expect. Without them, shared links appear as raw text strings that users must click blindly, reducing both engagement and trust.

With the LinkMeta API, your chat backend can fetch metadata the moment a URL is detected in a message. The response includes the page title, description, Open Graph image, favicon, and site name, giving you everything needed to render a rich card inline. Because LinkMeta returns results in under 500 milliseconds for most URLs, the preview appears almost instantly after the message is sent.

Social Media Management Tools

Social media scheduling platforms like Buffer, Hootsuite, and Later let users compose posts that include links. Before the post goes live, the tool needs to show a preview of how the link will appear on Facebook, LinkedIn, or Twitter. Each platform renders link cards differently, but they all pull from the same underlying Open Graph and Twitter Card metadata.

By calling the LinkMeta API during post composition, your social tool can display an accurate preview of the link card before the user publishes. This prevents surprises like missing images, truncated titles, or incorrect descriptions from reaching the audience. You can also use the extracted metadata to pre-fill post captions, suggest hashtags, or flag pages that are missing critical OG tags.

Content Management Systems and Website Builders

Modern CMS platforms and website builders like WordPress, Notion, Ghost, and Webflow support embedded link cards within their content editors. When an author pastes a URL into a blog post draft, the editor fetches metadata and renders an attractive link card with the target page's title, image, and description. This pattern is sometimes called link unfurling or bookmark blocks.

Integrating LinkMeta into your CMS editor gives authors a visual representation of outbound links without leaving the writing environment. The API extracts not just Open Graph data but also JSON-LD structured data, which can be useful for displaying additional context like article publish dates, author names, and content types.

Email Marketing and Newsletter Tools

Email campaign builders need to generate preview cards for links included in newsletters. Since most email clients strip JavaScript and limit CSS, these previews must be rendered as static HTML at send time. The LinkMeta API provides the raw metadata needed to build these static cards: the title, description, image URL, and favicon that can be baked directly into the email's HTML template.

This is particularly valuable for automated newsletters that curate links from RSS feeds or social bookmarks. Instead of requiring a human editor to manually set preview images and descriptions for each link, the system can pull that data automatically from the LinkMeta API during the build step.

SEO Audit and Monitoring Tools

SEO professionals need to verify that web pages have correctly configured Open Graph tags, Twitter Cards, and structured data. A link preview API serves as the foundation for automated SEO auditing tools that can crawl a site and report on missing or misconfigured metadata. LinkMeta extracts all of these signals in a single request, making it straightforward to build dashboards that monitor metadata health across hundreds or thousands of pages.

Common checks include verifying that og:image dimensions meet platform minimums (1200x630 for Facebook), ensuring descriptions fall within recommended character limits, confirming canonical URLs match the actual page URL, and detecting pages that are missing structured data entirely.

How Link Previews Work

Link previews are powered by the Open Graph protocol, originally created by Facebook in 2010. When a platform needs to generate a preview for a shared URL, it sends an HTTP request to that URL, downloads the HTML response, and parses specific <meta> tags from the <head> section.

The core Open Graph tags that power link previews are:

• og:title — The title displayed in the preview card
• og:description — A short summary shown below the title
• og:image — The URL of the preview thumbnail or banner image
• og:url — The canonical URL of the page
• og:site_name — The name of the website (e.g., "GitHub", "Medium")
• og:type — The content type (website, article, video, etc.)

Twitter uses a parallel set of tags prefixed with twitter:, which override Open Graph values when rendering cards on the Twitter/X platform. Most well-optimized websites include both sets of tags.

Beyond OG and Twitter tags, a complete metadata extraction also pulls the page's <title> element, meta description, favicons (from <link rel="icon"> tags and the /favicon.ico fallback), and JSON-LD structured data embedded in <script type="application/ld+json"> blocks. The LinkMeta API extracts all of these in a single call and returns them in a clean, normalized JSON response.

Building Link Previews with the LinkMeta API

The LinkMeta API exposes a single endpoint that accepts any public URL and returns its metadata as JSON. No authentication, no API key, no signup. Here are working examples in three languages.

curl "https://linkmeta.dev/api/v1/metadata?url=https://github.com"

const url = encodeURIComponent('https://github.com');

const response = await fetch(
  `https://linkmeta.dev/api/v1/metadata?url=${url}`
);
const meta = await response.json();

console.log(meta.title);       // "GitHub"
console.log(meta.description);  // "Where the world builds software"
console.log(meta.image);        // "https://github.githubassets.com/..."
console.log(meta.favicon);      // "https://github.com/favicon.ico"

import requests
from urllib.parse import quote

target = quote("https://github.com", safe="")
resp = requests.get(
    f"https://linkmeta.dev/api/v1/metadata?url={target}"
)
meta = resp.json()

print(meta["title"])        # "GitHub"
print(meta["description"])  # "Where the world builds software"
print(meta["image"])        # OG image URL
print(meta["favicon"])      # Favicon URL

The JSON response includes fields for title, description, image, favicon, siteName, url, and the full openGraph and twitterCard objects. See the API documentation for the complete response schema.

Building a Link Preview Component

Here is a complete, self-contained HTML/CSS/JavaScript component that takes a URL input and renders a preview card by calling the LinkMeta API. You can drop this into any web page.

<!-- Link Preview Component -->
<div id="preview-widget">
  <input type="url" id="preview-url"
         placeholder="Paste a URL to preview..."
         style="width:100%; padding:10px; font-size:14px;">
  <button onclick="fetchPreview()"
          style="margin-top:8px; padding:8px 20px;">
    Generate Preview
  </button>
  <div id="preview-result" style="margin-top:16px;"></div>
</div>

<script>
async function fetchPreview() {
  const url = document.getElementById('preview-url').value;
  if (!url) return;

  const container = document.getElementById('preview-result');
  container.innerHTML = 'Loading...';

  try {
    const encoded = encodeURIComponent(url);
    const resp = await fetch(
      `https://linkmeta.dev/api/v1/metadata?url=${encoded}`
    );
    const meta = await resp.json();

    const hostname = new URL(url).hostname;
    const imgHtml = meta.image
      ? `<img src="${meta.image}"
             alt="${meta.title || ''}"
             style="width:100%; height:180px;
                    object-fit:cover;">`
      : '';

    container.innerHTML = `
      <div style="border:1px solid #333;
                  border-radius:8px; overflow:hidden;
                  max-width:480px;">
        ${imgHtml}
        <div style="padding:12px 16px;">
          <div style="font-size:12px;
                      color:#888;">${hostname}</div>
          <div style="font-weight:700;
                      margin:4px 0;">${meta.title || url}</div>
          <div style="font-size:14px;
                      color:#aaa;">${meta.description || ''}</div>
        </div>
      </div>
    `;
  } catch (err) {
    container.innerHTML = 'Failed to load preview.';
  }
}
</script>

This component works in any modern browser. It sends the user-provided URL to the LinkMeta API, receives the metadata JSON, and constructs a preview card with the OG image, page title, description, and domain name. The card layout mirrors the format used by Slack, Discord, and Facebook for their link unfurls.

Frequently Asked Questions

Related Resources

Explore more ways to extract and work with URL metadata using the LinkMeta API.