Template Rendering

You can now use the HTML <template> element to design Open Graph cards without changing your visible page content.

How it works

Add a <template id="ogplus"> element to your page’s <head>. When OpenGraph+ renders your page, it replaces the body content with your template:

<head>
  <template id="ogplus">
    <div class="og-card">
      <h1>My Blog Post</h1>
      <p>A custom card design for social sharing</p>
    </div>
  </template>
</head>
<body>
  <h1>My Blog Post</h1>
  <p>Regular page content here...</p>
</body>

The template is invisible to visitors since browsers don’t render <template> elements. OpenGraph+ sees it and uses it for the screenshot.

Provider-specific templates

Different social networks have different card dimensions. You can create templates for specific providers:

<head>
  <template id="ogplus">
    <div>Default card</div>
  </template>

  <template id="ogplus-twitter">
    <div>Twitter-specific card (wider aspect ratio)</div>
  </template>

  <template id="ogplus-discord">
    <div>Discord-specific card</div>
  </template>
</head>

When Twitter’s crawler hits your page, it gets ogplus-twitter. Discord gets ogplus-discord. Everyone else gets the default ogplus template.

Selecting templates with og:plus:selector

If you’d rather name your templates differently, use og:plus:selector to point at them:

<head>
  <meta property="og:plus:selector" content="template#social-card">
  <template id="social-card">
    <div>Your card design</div>
  </template>
</head>

The selector approach also lets you select non-template elements if you want to screenshot a specific part of your page instead.

When to use templates vs selectors

Use <template id="ogplus"> when you want a completely custom card design that’s separate from your page content.

Use og:plus:selector when you want to screenshot an existing element on your page, like a hero section or article header.

Why templates?

I use OpenGraph+ to render Open Graph images for OpenGraph+. This week as I was putting together landing pages for specific customers, I needed a way to pull in their… umm… “crazy” HTML page is a nice way of putting it, into OpenGraph+, manipulate it, and emit a reasonable looking OpenGraph image.

I tried everything from injecting CSS to JavaScript, and getting it working was super clunky. Finally I landed on using the HTML <template> element to pull HTML content in from the page into some more sane DOM, then let OpenGraph+ render it.

The technique proved to be so effective that I decided to roll it into the official API as yet another way to render OpenGraph images with web standards for websites.