Social Previews & Structured Data

Open Graph tags control how your pages appear when shared on social media. JSON-LD structured data gives search engines machine-readable facts that can unlock rich results in SERPs.

HTML7 min readConcept 38 of 42

What Open Graph and structured data are

When someone pastes a URL into a social platform, the platform's scraper fetches the page and reads <meta property="og:*"> tags to build the preview card. Without them, the scraper picks random text and images, often producing a card that looks broken or misleading. The Open Graph protocol -- originally created by Facebook -- defines four required tags: og:title, og:description, og:image, and og:url. Twitter (X) has its own twitter:card system but falls back to Open Graph tags if the Twitter-specific ones are absent, so setting OG tags benefits both platforms.

Structured data is a way of embedding machine-readable facts directly in the page so that search engines can understand them without guessing from prose. The recommended format is JSON-LD inside a <script type="application/ld+json"> element in <head>. The vocabulary comes from Schema.org: Article, Product, FAQPage, BreadcrumbList, Event, Recipe, and dozens of others. When Google can parse structured data, it may display rich results in the SERP: star ratings, event dates, FAQ dropdowns, recipe cards, and more.

Why it matters for reach and click-through

A share without Open Graph tags generates a plain-text link. A share with a well-crafted og:image (at least 1200x630 pixels) generates a large image card that dominates the feed. Studies consistently show that social posts with image cards get more engagement than text-only links. The investment is four meta tags.

Structured data can earn rich results that take up more vertical space in the SERP than a standard blue link and display extra information (ratings, availability, price, event date) before the user even clicks. Rich results are not guaranteed -- Google decides when to show them -- but correctly implemented structured data is the prerequisite. Use Google's Rich Results Test and Search Console to verify and monitor them.

How to implement Open Graph and JSON-LD

For Open Graph, add the four required tags to <head>: <meta property="og:title" content="...">, <meta property="og:description" content="...">, <meta property="og:image" content="https://example.com/image.jpg">, and <meta property="og:url" content="https://example.com/page">. The image should be at least 1200x630 pixels and hosted on an absolute HTTPS URL. Set <meta property="og:type" content="website"> (or "article" for blog posts).

For Twitter Cards, add <meta name="twitter:card" content="summary_large_image"> to enable the large image format. If your OG tags are already set, the title, description, and image will be read from them automatically. Add <meta name="twitter:creator" content="@handle"> to attribute the content to an account.

For JSON-LD, add a <script> in <head> with type="application/ld+json". Write a JSON object using a @context of "https://schema.org" and a @type matching the content (e.g. "Article"). Include the properties that Schema.org defines for that type. Validate with the Rich Results Test before publishing.

Try it

Edit the Open Graph fields and watch the simulated social card assemble in real time.

Open Graph card preview

https://example.com/og-image.jpg

example.com

Flexbox Guide | CSS Tricks

A visual guide to CSS Flexbox, covering alignment, ordering, and responsive layouts.

Tag reference

og:titleproperty="og:title"Card headline. Pulled from page title if absent.
og:descriptionproperty="og:description"Card subtext. Under 200 chars.
og:imageproperty="og:image"Card image. Absolute HTTPS URL, min 1200x630px.
og:urlproperty="og:url"Canonical page URL. Must be absolute.
og:typeproperty="og:type""website" or "article". Defaults to website.
twitter:cardname="twitter:card""summary_large_image" for the big image format.
twitter:creatorname="twitter:creator"@handle of content creator. Optional.

JSON-LD structured data (Article)

<script type="application/ld+json">

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Flexbox Guide | CSS Tricks",
  "description": "A visual guide to CSS Flexbox, covering alignment, ordering, and responsive layo",
  "url": "https://example.com/flexbox-guide",
  "image": "https://example.com/og-image.jpg",
  "author": {
    "@type": "Person",
    "name": "Jane Smith"
  }
}

</script>

JSON-LD goes in <head>. Use schema.orgvocabulary and test with Google's Rich Results Test to see which rich result types are unlocked.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which four Open Graph properties are required for a complete social card?
  2. 2Where does JSON-LD structured data go and what is its purpose?
  3. 3What is wrong with og:image content='/images/card.jpg'?

Remember this

  • Open Graph requires four tags: og:title, og:description, og:image, og:url. All must be absolute URLs.
  • og:image must be at least 1200x630px and use an absolute HTTPS URL.
  • Twitter falls back to OG tags. Adding twitter:card enables the large image format.
  • JSON-LD in <script type="application/ld+json"> enables Schema.org rich results in SERPs.

Done with this concept?

Mark it complete to track your progress. No login needed.