Dynamic og:images

Last modified: December 11, 2021Author: Jakub Pomykała

Meta Link is a way of accessing and generating images on demand without using any fancy tools. You only need to edit your HTML code. Adjust your og:image and twitter:image meta links in <head/> and you are good to go.

Automatic blog post generation for social media

How to use?

Go to 'Domains' section in your account and add domain of your blog or website.

If your blog uses subdomain (subdomain.domain.com) then you need to use it WITH the subdomain. Wildcards like '*' are not supported.

Create a meta link according to the following format:

Format:

https://get.bannerly.io/og/<TEMPLATE_ID>.jpg?url=<BLOG_POST_URL>

Replace:

  • TEMPLATE - your template identifier,
  • BLOG_POST_URL - link to your blog post

You can use this link in open graph tags in order to generate image when your blog article is posted on a social media platform like Facebook, Twitter or other.

Adjust meta tags

Add or modify your <meta/> tags in <head/> your blog HTML code.

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

Bannerly will take your page title, description and image and put it into corresponding components.

Correct component naming is very important. Otherwise, Bannerly won't know into which component changes should be applied.

Example blog post cover template for automatic article cover generation

Component Naming

Bannerly will automatically pull data from your blog content and put into template. Learn how to name your components in order to get proper values on generated images.

Title

Will be automatically pulled from first h1 tag in article tag.

Component ID: title

Image

Will be automatically pulled from first img in article tag

Component ID: image

Author name

Will be automatically pulled from <meta name="author"> or from HTML tag with the rel="author".

Component ID: author_name

Author photo

Will be pulled automatically from <img class="author"> or from <img class="avatar">

Component ID: author_photo

Reading time

Will be automatically calculated from text in <article> tag and put as text property with format X min read.

Component ID: reading_time

Description

Will be automatically pulled from <meta name="description">.

Component ID: description

Domain

Domain will be automatically generated from your blog post link

Component ID: domain

HTML Templates

If you created your template in HTML Template Editor, please use merge tags which are corresponding to the Component IDs above.