Building the Infrastructure Behind TikTok Shop — Link Previews, Metadata, and Monetization

Introduction

TikTok Shop integrates commerce directly into a high-velocity content platform. Behind the scenes, it relies on link previews, metadata scraping, smart routing, and affiliate tracking to convert views into transactions.

In this article, we'll reverse-engineer the core technical components needed to build a TikTok Shop-style experience for any content-to-commerce platform.

What You’ll Learn

  • How TikTok generates link previews for products

  • How metadata drives in-app routing and previews

  • How affiliate tracking and monetization layers are structured

  • How to build this infrastructure using Node.js, Postgres, and n8n

Part 1: System Overview

Key components:

Content Post → Smart Product Link → Metadata Scraper → Preview Generator → Routing Layer → Checkout Engine → Analytics Tracker

Each click or view needs to:

  • Resolve preview metadata

  • Track user journey

  • Maintain session integrity from content → cart

Step-by-Step: Build the Core Infrastructure

Step 1: Create Product URLs With Metadata

Each product should have a canonical URL that embeds open graph tags:

<meta property="og:title" content="Glow Serum by Skinkraft" />
<meta property="og:image" content="https://cdn.example.com/product-123.jpg" />
<meta property="og:description" content="Hydrating glow serum for dry skin. 15% Vitamin C." />
<meta property="product:price" content="19.99" />

This ensures the preview renders when pasted into TikTok, WhatsApp, or iMessage.

Step 2: Build a Link Preview Scraper

  • Use Node.js with cheerio or playwright

  • Extract Open Graph and Twitter card metadata

const axios = require('axios');
const cheerio = require('cheerio');

async function getMetadata(url) {
  const { data } = await axios.get(url);
  const $ = cheerio.load(data);
  return {
    title: $('meta[property="og:title"]').attr('content'),
    description: $('meta[property="og:description"]').attr('content'),
    image: $('meta[property="og:image"]').attr('content')
  };
}

Step 3: Store Link Metadata in a Database

Use Postgres or Supabase:

CREATE TABLE link_previews (
  id SERIAL PRIMARY KEY,
  url TEXT,
  title TEXT,
  image TEXT,
  description TEXT,
  price NUMERIC,
  affiliate_id TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

Store affiliate codes and campaign metadata for attribution.

Step 4: Generate Short Links With Embedded Metadata

Use a shortlink generator (e.g., yourdomain.com/p/abc123) that:

  • Looks up the metadata record

  • Redirects to final product page with affiliate parameters

Optional logic:

  • Redirect based on region or language

  • Redirect to TikTok in-app browser vs. external checkout

Step 5: Embed Smart Routing and Attribution

Use UTM parameters and cookies for session persistence:

utm_source=tiktok&utm_medium=video&utm_campaign=glow-serum

Set a session cookie or local storage object with affiliate_id, product_id, and source.

Step 6: Add Checkout and Revenue Tracking

Connect checkout engine (Shopify, Stripe Checkout, or custom) to include:

  • Product ID

  • Affiliate code

  • Channel (TikTok, Instagram)

Log transactions to a separate table:

CREATE TABLE sales (
  id SERIAL PRIMARY KEY,
  product_id TEXT,
  affiliate_id TEXT,
  channel TEXT,
  amount NUMERIC,
  created_at TIMESTAMP DEFAULT NOW()
);

Step 7: Real-Time Analytics Dashboard

Use Supabase, Metabase, or Retool to monitor:

  • Most viewed product previews

  • Highest converting influencers

  • Click-to-purchase conversion rates

  • Revenue by channel

Bonus: In-App Preview Cards

  • Render inline product cards based on metadata response

  • Format using React or Web Components

  • Cache common metadata calls using Redis

Conclusion

TikTok Shop runs on metadata. With the right scraping, routing, and attribution infrastructure, you can replicate its seamless product preview and purchase experience.

Smart links, open graph tags, affiliate attribution, and checkout session stitching form the foundation of any content-commerce loop.

Tiktok, MetadataFrancesca Tabor