Customize

Sitepress runs on Rails, so all customization options from the Rails customize guide apply directly. This page shows the same techniques with Sitepress-specific file paths.

Meta tags

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

<head>
  <meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net<%= current_page.request_path %>">
  <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=".page-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.

/* app/assets/stylesheets/application.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.

<%# app/views/layouts/application.html.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: