Open Graph

Open Graph tags are automatically rendered for all pages on Ruby Static Pro.

The default open graph image is located at: /images/og/open-graph.png and looks like this.

There is no additional gem needed for the open graph support. All open graph code is part of Ruby Static Pro.

Tags included are:

og:site_name
og:title
og:description
og:type 
og:image
og:image:secure_url
og:image:type
og:image:width
og:image:height
og:locale
og:url
twitter:title
twitter:description
twitter:card 
twitter:domain
twitter:url
twitter:image

Click here to see an example of what the site looks like when rendered on various social media platforms.

Tag Generation

Open Graph tag generations happens automatically via the social media tags in the _header.html.erb file:

<% social_tags(current_page).each do|key, value| %>
    <meta property="<%= key %>" content="<%= value %>" />
<% end %>

The social_tags method is located in the helper method section of the config.rb file of your Ruby Static Pro stie. This is where all the logic resides for generating the open graph tags.

Customizing the Open Graph Image, Title and Description

You can customize the open graph results on each page by adding the following to your frontmatter:

ogp:
  # Image is in a folder that has the same name as your blog post file.
  # e.g. 2024-10-07-foo-bar.html.markdown has a folder called /blog/2024-10-07-foo-bar/
  image_path: path_to_your_image.jpg 
  title: My Custom OGP Title
  description: My Custom OGP Description

Providing these values will override the existing defaults that are generated in the social_tags method in config.rb

All fields are optional. This means that you can leave the title and description as the defaults and only update the image_path. Same can be said for the title or description.

Example, this is valid:

ogp:
  image_path: path_to_your_image.jpg 

So is this:

ogp:
  title: A Custom Title

If the social tags method finds the key in the ogp data structure, it will use that instead of the default. Othwerwise the default will be used.

Blog Images and Open Graph

See the blogging open graph doc for more info.