Social Previews and Structured Data

Open Graph

When someone shares your link in a chat app or social network, the preview card (title, image, description) comes from Open Graph meta tags:

<meta property="og:type" content="article">
<meta property="og:title" content="How to Store Sourdough Bread">
<meta property="og:description" content="Keep sourdough fresh for days — and revive a stale loaf.">
<meta property="og:image" content="https://cornerbakery.example/img/sourdough-share.jpg">
<meta property="og:image:alt" content="A sliced sourdough loaf on a wooden board">
<meta property="og:url" content="https://cornerbakery.example/guides/storing-sourdough">
<meta property="og:site_name" content="Corner Bakery">
<meta name="twitter:card" content="summary_large_image">

• Open Graph uses property, not name.
• og:image must be an absolute URL. 1200×630 pixels is a widely used size for large preview images.
• twitter:card chooses the card layout on X (Twitter), which falls back to the Open Graph tags for title, description, and image.
• Previews are cached — after changing tags, use the platform's debugging tool to refresh them.

Our Open Graph Generator and Twitter Card Generator write these tags for you.

Structured data with JSON-LD

Structured data describes a page's content in a vocabulary search engines understand — schema.org. It can earn rich results: star ratings, recipe cards, prices, event dates, FAQ answers. The recommended format is JSON-LD in a script tag:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Simple Sourdough",
  "image": "https://cornerbakery.example/img/sourdough.jpg",
  "author": { "@type": "Person", "name": "Sam Lee" },
  "datePublished": "2026-02-01",
  "prepTime": "PT30M",
  "cookTime": "PT45M",
  "recipeYield": "1 loaf",
  "recipeIngredient": ["500 g flour", "350 g water", "100 g starter", "10 g salt"]
}
</script>

• Durations use the ISO 8601 format: PT30M is 30 minutes.
• The data must match what's visible on the page — search engines penalize misleading markup.
• Validate it with Google's Rich Results Test or the Schema.org validator. Our Schema Markup Generator creates common types, and JSON Formatter catches syntax errors.

A browser doesn't run or display a type="application/ld+json" script, but JavaScript can read it:

<script type="application/ld+json" id="org">
{ "@context": "https://schema.org", "@type": "Organization", "name": "Corner Bakery", "url": "https://cornerbakery.example" }
</script>
<script>
  const data = JSON.parse(document.getElementById("org").textContent);
  console.log(data["@type"], "-", data.name);
</script>

Organization - Corner Bakery

Common types

Article, BlogPosting, Product (with Offer and AggregateRating), Recipe, Event, LocalBusiness, Organization, BreadcrumbList, FAQPage, VideoObject, and JobPosting. Which types produce rich results changes over time — check the search engine's documentation.

Practice

Write JSON-LD for a BreadcrumbList: Home → Guides → Storing Sourdough.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://cornerbakery.example/" },
    { "@type": "ListItem", "position": 2, "name": "Guides", "item": "https://cornerbakery.example/guides" },
    { "@type": "ListItem", "position": 3, "name": "Storing Sourdough" }
  ]
}
</script>