Dynamic og:images

Last modified: April 15, 2022Author: 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.

Create a meta link according to the following format:

https://get.bannerly.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.

You can use this link in open graph tags to generate an image automatically whenever 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.

Adjust your template component identifiers

Bannerly 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 component identifiers to make sure the website title will show up in the right place on your template.

Example blog post cover template for automatic article cover generation

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 the same as Component IDs above.