Technical SEO: Open Graph and structured data

Control how your pages preview on social networks with Open Graph and aim for rich results with schema.org in JSON-LD.

8 min · 3 questions

When a URL is shared on a social network or in a messaging app, a scraper reads the HTML to build the preview card. The Open Graph protocol drives that card: og:title, og:description, og:type, og:url, and above all og:image, which must be an absolute URL (relative paths are ignored by most platforms). A real-world trap: these scrapers do not execute JavaScript. If your tags are injected client-side by your framework, the preview will be empty; they must be present in the initially served HTML (SSR or static generation).

<meta property="og:title"
      content="The filter coffee guide">
<meta property="og:type" content="article">
<meta property="og:url"
      content="https://example.com/cafe-filtre">
<meta property="og:image"
      content="https://example.com/cover-1200.jpg">
<meta property="og:description"
      content="Ratios and techniques for a clean cup.">

Two additions complete the baseline. <link rel="canonical"> designates the reference URL when a page is reachable at several addresses (tracking parameters, pagination): it is your defense against duplicate content. And the Twitter Cards tags: the platform falls back on Open Graph for the content, but twitter:card is still needed to choose the display format, notably summary_large_image.

<link rel="canonical"
      href="https://example.com/cafe-filtre">
<meta name="twitter:card"
      content="summary_large_image">

schema.org structured data describes the meaning of your content to search engines: article, product, recipe, breadcrumb, FAQ. Three syntaxes exist (microdata, RDFa, JSON-LD), but Google recommends JSON-LD: a self-contained block inside a <script type="application/ld+json">, decoupled from the visual markup, and therefore easy to generate and maintain. This markup is what makes your page eligible for rich results: review stars, prices, and event dates right in the results page.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "The filter coffee guide",
  "datePublished": "2026-05-12",
  "author": {
    "@type": "Person",
    "name": "Ana Costa"
  }
}
</script>

Knowledge check

Make sure you remember the key points of this lesson.

1. What constraint applies to the value of og:image?
   • It must be an absolute URL, domain included
   • It must point to a file in WebP format
   • It must be base64-encoded inside the tag
2. Why does Google recommend JSON-LD over microdata?
   • JSON-LD is executed as JavaScript, so it is faster
   • JSON-LD is a self-contained block, decoupled from the visible markup and easy to generate
   • Microdata is no longer read by search engines
3. What does valid, complete schema.org markup guarantee?
   • Rich results displayed every time
   • A direct boost to the page's ranking
   • Eligibility for rich results, with no display guarantee