# Rails ## Getting Started ## Create a connection 1. Sign in to [OpenGraph+](/) 2. Go to your website's **Meta Tags** page 3. 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 `` content. ## Add Open Graph meta tags Add the following meta tags to your layout's ``. These control how your pages appear when shared on Twitter, Slack, LinkedIn, and other platforms. ```erb "> "> <%= yield %> ``` 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: ```erb <%# app/views/posts/show.html.erb %> <% content_for(:og_title) { @post.title } %> <% content_for(:og_description) { @post.excerpt } %>

<%= @post.title %>

<%= @post.body %>

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

<%= @product.name %>

``` ### Article type for blog posts Set `og:type` to `article` for blog posts. Add this to your layout or override per-view: ```erb "> ``` Then in your post view: ```erb <% 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. ## Tag Helpers The [Getting Started](/docs/rails/connect) guide puts meta tags directly in your layout. That works fine for small apps, but as your app grows you'll want to extract them into partials or helpers. Here are a few ways to do that. ## Shared partial Pull your meta tags into a partial so you can reuse them across layouts: ```erb <%# app/views/shared/_open_graph.html.erb %> "> "> "> ``` Render it in your layout: ```erb <%= render "shared/open_graph", og_title: content_for(:og_title), og_description: content_for(:og_description), og_type: content_for(:og_type) %> ``` ## Helper method If you want to build the tags in Ruby instead of ERB, create a helper: ```ruby # app/helpers/open_graph_helper.rb module OpenGraphHelper def og_meta_tags(title: nil, description: nil, type: "website") safe_join([ tag.meta(property: "og:title", content: title || "My Site"), tag.meta(property: "og:description", content: description || "Welcome to my site"), tag.meta(property: "og:url", content: request.original_url), tag.meta(property: "og:site_name", content: "My Site"), tag.meta(property: "og:type", content: type), tag.meta(property: "og:image", content: "https://$OGPLUS_KEY.ogplus.net#{request.path}"), tag.meta(name: "twitter:card", content: "summary_large_image"), ]) end end ``` Then in your layout: ```erb <%= og_meta_tags title: content_for(:og_title), description: content_for(:og_description), type: content_for(:og_type) %> ``` ## Setting tags from controllers You can also set `content_for` in a `before_action` instead of in the view. This is useful when the controller already loads the record: ```ruby class PostsController < ApplicationController before_action :set_post, only: :show def show end private def set_post @post = Post.find(params[:id]) content_for(:og_title) { @post.title } content_for(:og_description) { @post.excerpt } content_for(:og_type) { "article" } end end ``` ## Customize OpenGraph+ captures your page in a headless browser and renders it as an image. You control what gets captured using meta tags in your layout and CSS in your stylesheets. All of the rendering options below are standard HTML meta tags and CSS, so they work the same regardless of framework. The [HTML, CSS, & HTTP guide](/docs/html-css) covers each one in detail. This page shows how to wire them into a Rails app. ## Meta tags Add these to your layout's `` alongside your `og:image` tag. They're all optional. ```erb <%# Render at 800px wide instead of the default %> <%# Only capture this element instead of the full page %> <%# Inject inline styles on the captured element %> ``` See the [Rendering](/docs/html-css/rendering) guide for what each meta tag does and how they interact. ## CSS styling OpenGraph+ adds a `data-ogplus` attribute to your `` 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. ```css /* 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](/docs/html-css/data-attributes) for plain CSS examples and [Tailwind setup](/docs/html-css/data-attributes#tailwind-css). ## Templates For fully custom social card layouts that pull content from your page, use `