Getting Started

Create a connection

Sign in to OpenGraph+
Go to your website’s Meta Tags page
Create a new connection and copy your connection URL

Your connection URL looks like https://$OGPLUS_KEY.ogplus.net.

Find your layout

Sitepress layouts live in app/views/layouts/ alongside your Rails layouts. If your site uses a shared layout like application.html.erb, that’s where you’ll add Open Graph meta tags so every page inherits them.

Add Open Graph meta tags

Add the following meta tags to your layout’s <head>. These control how your pages appear when shared on Twitter, Slack, LinkedIn, and other platforms.

<!-- app/views/layouts/application.html.erb -->
<html>
  <head>
    <meta property="og:title" content="<%= current_page.data.title || "My Site" %>">
    <meta property="og:description" content="<%= current_page.data.description || "Welcome to my site" %>">
    <meta property="og:url" content="<%= request.original_url %>">
    <meta property="og:site_name" content="My Site">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net<%= current_page.request_path %>">
    <meta name="twitter:card" content="summary_large_image">
  </head>
  <body>
    <%= yield %>
  </body>
</html>

Replace https://$OGPLUS_KEY.ogplus.net with your connection URL, and "My Site" with your actual site name.

What each tag does

Tag	Purpose
`og:title`	The title shown in the link preview
`og:description`	The description shown below the title
`og:url`	The canonical URL of the page
`og:site_name`	Your website’s name
`og:type`	Content type (`website`, `article`, `product`)
`og:image`	The social card image (powered by OpenGraph+)
`twitter:card`	Tells Twitter to show a large image card

Set dynamic tags from frontmatter

Sitepress pages define their metadata via YAML frontmatter. The layout picks up these values automatically through current_page.data:

---
title: How to Build a Site with Sitepress
description: A step-by-step guide to building a fast content site.
---

Your page content here.

You can also set tags from a Sitepress layout so they apply to every page that uses it:

<%# app/content/layouts/blog.html.erb %>
<% content_for(:og_type) { "article" } %>
<%= yield %>

Then use content_for in the application layout to pick it up:

<meta property="og:type" content="<%= content_for(:og_type) || "website" %>">

Verify

Start your development server and view the page source. Check that all og: meta tags are present with the correct values.

Open the preview tool in your OpenGraph+ dashboard and paste a URL from your site to see the social card image.