Open Graph Images

Last modified: June 01, 2022

Create your template for article cover and use RenderForm for automatic og:image generation. Configure once, and get the covers for all your articles. You need to edit a HTML code of your blog. Adjust your og:image and twitter:image meta tags in <head/> and point what data should be used for your template.

How to start?

Create a meta-link according to the following format:

https://get.renderform.io/og/<MY_TEMPLATE_ID>?url=<BLOG_POST_URL>&apiKey=<MY_API_KEY>

Change values:

  • <MY_TEMPLATE_ID> - with your template identifier,
  • <BLOG_POST_URL> - with link to your blog post.
  • <MY_API_KEY> - api key for your account.

Configure article template

Add or modify your <meta/> tags in <head/> section.

<head>
  <meta
    property="thumbnail"
    content="https://get.renderform.io/og/<TEMPLATE_ID>.jpg?url=<BLOG_POST_URL>&apiKey=<YOUR_API_KEY>"/>
  <meta
    property="og:image"
    content="https://get.renderform.io/og/<TEMPLATE_ID>.jpg?url=<BLOG_POST_URL>&apiKey=<YOUR_API_KEY>"/>
  <meta
    name="twitter:image"
    content="https://get.renderform.io/og/<TEMPLATE_ID>.jpg?url=<BLOG_POST_URL>&apiKey=<YOUR_API_KEY>"/>
  <meta
    name="twitter:card"
    content="summary_large_image" />
    <!-- other meta tags -->
</head>

If your website already has <meta/> tags with same name or property values then you need to replace them with tags from above.

Configure article data

RenderForm will automatically pull data from your blog content and put into template. To know which value put into which component you need to adjust your website HTML. There are two ways to do it: using <meta/> tags or using data-rf- attributes.

Use meta tags

One way of providing data to your template is to use meta tags. Every tag must have a property and content attribute. The property attribute defines the component name and component property. The content attribute defines the value for component property.

<head>
  <meta
        property="rf:title_component:text"
        content="My article title"
    />
  <meta
        property="rf:blog_cover:src"
        content="https://myblog.com/my-image.jpg"
    />
    <!-- other meta tags -->
</head>

Please note that every property must start with rf: prefix which stands for RenderForm.

Use attributes

The second way is to use attributes directly HTML tags.

<article>
    <h1
        data-rf-component="title_component"
        data-rf-property="My article title"
        data-rf-value="My article title"
    >
        My article title
    </h1>
    <img
        src="https://myblog.com/my-image.jpg"
        data-rf-component="blog_cover"
        data-rf-property="src"
        data-rf-value="https://myblog.com/my-image.jpg"
    />
    <!-- other HTML -->
</article>

You can skip data-rf-value attribute, if you want to use text value from <h1/> tag.

If you are using HTML templates then you can also skip data-rf-component as HTML templates don't have components.

You don't have to use data-rf-* attributes exactly on HTML that hold your data. They can be used anywhere, you can also create a custom

tags with all values. You need to only remember to use one set of data-rf-component, data-rf-property and data-rf-value per HTML tag.

<article>
    <h1>
        My article title
    </h1>
    <img src="https://myblog.com/my-image.jpg" />
    <!-- other HTML -->
    <div
        data-rf-component="title_component"
        data-rf-property="My article title"
        data-rf-value="My article title"
    />
    <div
        data-rf-component="blog_cover"
        data-rf-property="src"
        data-rf-value="https://myblog.com/my-image.jpg"
    />
</article>