Plain HTML & Static Sites Guide

How to integrate dynamic Open Graph and Twitter Card images into standard HTML and static sites.

Integrating dynamic Open Graph images into static HTML pages requires no JavaScript runtime dependencies or client-side packages.

Complete HTML Boilerplate

Place the following tags inside the <head> of your HTML document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Production Engineering — Scaling Distributed Systems</title>
    <meta
      name="description"
      content="A deep dive into distributed systems resilience, fault domains, and latency reduction."
    />

    <!-- Open Graph protocol metadata -->
    <meta property="og:type" content="article" />
    <meta
      property="og:title"
      content="Production Engineering — Scaling Distributed Systems"
    />
    <meta
      property="og:description"
      content="A deep dive into distributed systems resilience, fault domains, and latency reduction."
    />
    <meta
      property="og:image"
      content="https://api.generativeog.in/v1/images/article.png?author=Jane+Doe&amp;description=A+deep+dive+into+distributed+systems+resilience%2C+fault+domains%2C+and+latency+reduction.&amp;theme=dark&amp;title=Production+Engineering+%E2%80%94+Scaling+Distributed+Systems"
    />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta
      property="og:image:alt"
      content="Production Engineering — Scaling Distributed Systems"
    />

    <!-- Twitter / X Card metadata -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:title"
      content="Production Engineering — Scaling Distributed Systems"
    />
    <meta
      name="twitter:description"
      content="A deep dive into distributed systems resilience, fault domains, and latency reduction."
    />
    <meta
      name="twitter:image"
      content="https://api.generativeog.in/v1/images/article.png?author=Jane+Doe&amp;description=A+deep+dive+into+distributed+systems+resilience%2C+fault+domains%2C+and+latency+reduction.&amp;theme=dark&amp;title=Production+Engineering+%E2%80%94+Scaling+Distributed+Systems"
    />
  </head>
  <body>
    <h1>Production Engineering</h1>
  </body>
</html>

Important Static HTML Considerations

1. Escaping Query Delimiters (& vs &amp;)

In HTML attribute values, the ampersand character (&) separates query parameters in the URL. According to the W3C HTML specification, raw & inside attribute values should be escaped as &amp; to prevent XML/HTML parsing ambiguity:

  • Valid: content="https://api.generativeog.in/v1/images/article.png?title=Foo&amp;theme=dark"
  • Browsers and social crawlers automatically unescape &amp; back into a literal & when making the network request to fetch the image.

2. URL Length Limit

Keep the total URL length under 2,048 characters. If your article title or description is lengthy, encode and truncate before embedding.

3. Verification

After deploying your static site, verify how platforms parse your tags using the Page Inspector tool.