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
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 in your OpenGraph+ dashboard. Paste a URL from your site to confirm the meta tags and social card image render correctly.