Getting Started

Create a connection

Sign in to OpenGraph+
Go to your website’s Meta Tags page
On your first visit you’ll see the Terms of Service; click Agree & Create Connection, then copy your connection URL

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

Find your layout

Open source/layouts/layout.erb. Middleman uses ERB templates and YAML frontmatter for page data. This is where you’ll add Open Graph meta tags so every page inherits them.

Add Open Graph meta tags

Add the full set of Open Graph tags to your layout’s <head>. Use current_page.data to pull in dynamic values from each page’s frontmatter:

<!-- source/layouts/layout.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="https://mysite.com<%= current_page.url %>">
    <meta property="og:site_name" content="My Site">
    <meta property="og:type" content="<%= current_page.data.og_type || "website" %>">
    <meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net<%= current_page.url %>">
    <meta name="twitter:card" content="summary_large_image">
  </head>
  <body>
    <%= yield %>
  </body>
</html>

Replace https://$OGPLUS_KEY.ogplus.net with the connection URL you copied.

Tag reference

Tag	Value	Source
`og:title`	Page title	`current_page.data.title` frontmatter
`og:description`	Page description	`current_page.data.description` frontmatter
`og:url`	Canonical URL	Site URL + `current_page.url`
`og:site_name`	Site name	Hardcoded in layout
`og:type`	Content type	`current_page.data.og_type` frontmatter, defaults to `website`
`og:image`	Social card image	OpenGraph+ connection URL + page path
`twitter:card`	Card format	`summary_large_image` for large previews

Dynamic tags from frontmatter

Middleman pages set their tags via YAML frontmatter. The layout picks up these values automatically:

---
title: About Our Company
description: We build tools for developers.
---

Blog post example:

---
title: Shipping Our New Feature
description: A deep dive into how we built real-time previews.
og_type: article
---

Verify

Build your site and open the preview tool. Paste a URL from your site to confirm the meta tags and social card image render correctly.

Multiple domains

Running staging and production, subdomains, or several sites under one account? See Multiple domains & environments. For a single site, the connection tag above is all you need.