OpenGraph+ captures your page and renders it as an image. Use these options to control exactly what gets captured and how it looks.
Viewport
Set the viewport width in pixels for rendering:
<% open_graph do |og|
og.plus.viewport.width = 800
end %>
Mobile viewport widths between 600-800px tend to look best for social cards. Use your browser’s responsive design tools to preview how your page looks at different widths.
Style
Inject inline CSS into the selected element (or body if no selector is set) for basic tweaks like adding padding, setting a background color, or adjusting fonts for the social card without changing your actual page styles.
<% open_graph do |og|
og.plus.style = "padding: 40px; background: linear-gradient(to right, #667eea, #764ba2);"
end %>
You can also use a hash, which converts underscores to hyphens:
<% open_graph do |og|
og.plus.style = { padding: "40px", background_color: "#1a1a2e" }
end %>
For more sophisticated styling, use the data attribute or Tailwind plugin to control what’s displayed on the open graph image.
Data attribute
OpenGraph+ injects data-ogplus on the <html> element when capturing your page. The attribute value contains the consumer name (e.g., linkedin, twitter) when available.
Tip: Use the OG+ Preview Bookmarklet to test your
ogplus:styles in any browser without deploying.
/* Target all OpenGraph renders */
[data-ogplus] .nav,
[data-ogplus] .footer { display: none; }
[data-ogplus] .hero { padding: 60px; background: #0f172a; }
/* Target specific consumers */
[data-ogplus="linkedin"] .hero { padding: 80px; }
[data-ogplus="twitter"] .hero { background: #1da1f2; }
This is cleaner than inline styles when you need to hide elements, adjust layouts, or make multiple changes for your social cards.
Tailwind
Install the OpenGraph+ Tailwind plugin for ogplus: variants:
npm install @opengraphplus/tailwindThen add to your Tailwind configuration file in Rails:
Tailwind 4 configuration
/* app/assets/stylesheets/application.css */
@import "tailwindcss";
@plugin "@opengraphplus/tailwind";
Tailwind 3 configuration
// tailwind.config.js
module.exports = {
plugins: [
require('@opengraphplus/tailwind'),
],
}
Using the ogplus: variant
Once the plugin is installed and properly configured, you may use ogplus: variants to show or hide elements only when rendering social cards:
<!-- Hide the nav bar in social cards -->
<nav class="ogplus:hidden">...</nav>
<!-- Show a logo only in social cards -->
<div class="hidden ogplus:block">
<%= image_tag "social-logo.png" %>
</div>
<!-- Consumer-specific styling -->
<div class="ogplus:p-8 ogplus-linkedin:p-12 ogplus-twitter:bg-sky-500">
Platform-optimized content
</div>
Available variants: ogplus:, ogplus-linkedin:, ogplus-twitter:, ogplus-facebook:, ogplus-discord:
Selector
Capture a specific part of your page instead of the full viewport:
<% open_graph do |og|
og.plus.selector = "article#main"
end %>
Quirks
Browsers can’t reliably scroll to capture an element mid-page. To get a clean screenshot, the renderer finds your element, copies it, removes everything else from the page, and injects just that element back into the body.
Your selected element becomes the root, so plan your styles accordingly.
Full example
Combine these to create a custom social card from your page content:
<% open_graph do |og|
og.title = @post.title
og.description = @post.excerpt
og.plus.selector = ".post-header"
og.plus.style = { padding: "60px", background_color: "#0f172a", color: "white" }
og.plus.viewport.width = 800
end %>