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

Rails layouts live in app/views/layouts/. Most apps use application.html.erb as the base layout. All views rendered within this layout inherit its <head> content.

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="<%= content_for(:og_title) || "My Site" %>">
    <meta property="og:description" content="<%= content_for(:og_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<%= 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 views

Use content_for in your views to set page-specific titles and descriptions:

<%# app/views/posts/show.html.erb %>
<% content_for(:og_title) { @post.title } %>
<% content_for(:og_description) { @post.excerpt } %>

<h1><%= @post.title %></h1>
<p><%= @post.body %></p>

For a product page:

<%# app/views/products/show.html.erb %>
<% content_for(:og_title) { @product.name } %>
<% content_for(:og_description) { "#{number_to_currency(@product.price)} - #{@product.description}" } %>

<h1><%= @product.name %></h1>

Article type for blog posts

Set og:type to article for blog posts. Add this to your layout or override per-view:

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

Then in your post view:

<% content_for(:og_type) { "article" } %>

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.