Customize

OpenGraph+ captures your page in a headless browser and renders it as an image. You control what gets captured using meta tags and CSS added through Webflow’s Custom Code feature.

All of the rendering options below are standard HTML meta tags and CSS, so they work the same regardless of platform. The HTML, CSS, & HTTP guide covers each one in detail. This page shows how to add them in Webflow.

Meta tags

Add these through Page Settings > Custom Code > Head Code for per-page control, or Site Settings > Custom Code > Head Code for site-wide defaults. They’re all optional.

<!-- 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=".hero-section">

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

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. Add a <style> block to Site Settings > Custom Code > Head Code to hide navigation, adjust spacing, or restyle anything for the social card without affecting your actual site.

<style>
  html[data-ogplus] .navbar { display: none; }
  html[data-ogplus] .footer { display: none; }
  html[data-ogplus] .hero-section { padding: 60px; }
</style>

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. Add this to Site Settings > Custom Code > Footer Code (before </body>):

<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 looks without publishing or waiting for a real crawler to hit your page.

Full example

Site-wide Custom Code > Head Code with all the pieces together: