Customize

OpenGraph+ captures your page in a headless browser and renders it as an image. You control what gets captured using meta tags in your layout and CSS in your stylesheets.

All of the rendering options below are standard HTML meta tags and CSS, so they work the same regardless of framework. The HTML, CSS, & HTTP guide covers each one in detail. This page shows how to wire them into a Middleman site.

Meta tags

Add these to your layout’s <head> alongside your og:image tag. They’re all optional.

<!-- source/layouts/layout.erb -->
<head>
  <meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net<%= current_page.url %>">
  <meta name="twitter:card" content="summary_large_image">

  <%# Render at 800px wide instead of the default %>
  <meta property="og:plus:viewport:width" content="800">

  <%# Only capture this element instead of the full page %>
  <meta property="og:plus:selector" content=".post-header">

  <%# Inject inline styles on the captured element %>
  <meta property="og:plus:style" content="padding: 60px; background: #0f172a; color: white;">
</head>

See the Rendering guide for what each meta tag does and how they interact.

CSS styling

OpenGraph+ adds a data-ogplus attribute to your <html> element during capture. Use it in your stylesheets to hide navigation, adjust spacing, or restyle anything for the social card without affecting your actual site.

/* source/stylesheets/site.css */
html[data-ogplus] {
  nav { display: none; }
  footer { display: none; }
  .hero { padding: 60px; }
}

If you’re using Tailwind, there’s a plugin that gives you ogplus: variants like ogplus:hidden and ogplus-twitter:bg-sky-500. See CSS Styling for plain CSS examples and Tailwind setup.

Templates

For fully custom social card layouts that pull content from your page, use <template> elements. These let you build a completely different layout for screenshots without touching your visible page.

<%# source/layouts/layout.erb %>
<template id="ogplus">
  <div style="padding: 48px; background: #0f172a; color: white; height: 100%;">
    <h1 style="font-size: 48px;">
      ${document.querySelector('h1')?.textContent}
    </h1>
  </div>
</template>

See the Templates guide for expression syntax, platform-specific templates, and full examples.

Testing locally

The Preview Bookmarklet sets the data-ogplus attribute in your browser so you can see how your CSS and Tailwind variants look without deploying or waiting for a real crawler to hit your page.

Full example

A layout with all the pieces together: