Open Graph Images

Last modified: June 01, 2022Author: Jakub Pomykała

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?

Go to 'Domains' section in your account page and add domain of your blog or website. This will allow RenderForm to identify your blog and secure access to your template.

Create a meta link according to the following format:

https://get.renderform.io/og/<MY_TEMPLATE_ID>.jpg?url=<BLOG_POST_URL>

Change values:

  • <MY_TEMPLATE_ID> - with your template identifier,
  • <BLOG_POST_URL> - with link to your blog post.

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>"/>
  <meta 
    property="og:image" 
    content="https://get.renderform.io/og/<TEMPLATE_ID>.jpg?url=<BLOG_POST_URL>"/>
  <meta 
    name="twitter:image" 
    content="https://get.renderform.io/og/<TEMPLATE_ID>.jpg?url=<BLOG_POST_URL>"/>
  <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 doesn'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>