Automate image generation
Save time on creating similar images with different texts and branding!
Create account
Share article

How to show article banner in social media?

Jakub PomykałabyJakub Pomykała
Last updated: April 19, 20223 min read

How to show article banner in social media?

Social media banners are a great way to bring more attention to your content on social media platforms like Facebook, Twitter, LinkedIn and others. Eye-catching banners can increase much more your CTR (click-through rate) and bring you more visitors who might stick with you for longer. In this article, I will show you how to configure a widely used Open Graph standard on your blog post to show a banner from your blog post on social media while sharing it.

How to configure social media thumbnails?

In general, social blog banners configuration always looks the same. The only thing you need to do is adding HTML tags shown below to a head section of the page where you want to show your thumbnail.

<meta property="og:image" content="">
<meta name="twitter:image" content=""/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="thumbnail" content=""/>

The actual configuration might look different on every platform.

open graph meta tags for social banners

  • og:image it's a widely used standard for adding data to your website. It's commonly used by Facebook, Linkedin and many others. og stands for open graph,
  • twitter:image is a standard preferred by Twitter. It's usually used together with twitter:card=summary_large_image to show full-width banners instead just a square thumbnails.
  • thumbnail one of the first image HTML tags for showing thumbnails, it might be still used by some social media platforms to fetch a social media banner

A universal banner size is 1280 pixels width and 670 pixels height. Any other resolutions are also might fit, if they keep the golden 1.91 aspect ratio. The best image format for social banner is JPG or PNG format, these are the most common used formats across the web, which makes them a perfect choice.

social banner sizes

Why my banner is not showing?

There are a number of things to check when your banner is not showing on a social media platform. The most common cause is that you have a type in your HTML tags, or your newly added HTML tags are not visible in the page where you wanted to add them.

Test Open Graph metadata

Start from testing your website metadata with RenderForm metadata preview tool and see if the correct HTML tags are there. Make sure that images which you added there are accessible. Try to copy the link to the image and paste it into your browser URL section.

website metadata tester tool

Chrome Extension

If you are want to check numerous web pages and test metadata or social image banners, then you should install our Social Media Preview Extension for Google Chrome.

Open graph tester, Chrome Extension

Things to remember

Make sure that your banner is good-looking. A good-looking banner brings attention to your blog posts and increases CTR (click-through rate) A popular way of creating attractive blog post banners is by adding a title on the banner, author avatar and name. Some technical blogs are used to add also a URL to the blog to make it look a bit more technical.

  • Make sure that contrast between text and background makes your banner readable,
  • stick with the same colors on every banner,
  • add blog post author avatar and name,
  • keep it simple and readable,
  • do not use transparent background, always set a color.

simple blog post cover creator

Relevant posts

Dynamic Social Images for Wordpress

Dynamic Social Images for Wordpress

Jakub PomykałabyJakub PomykałaJune 04, 2022

Automatically generate social media image previews for Wordpress blog posts with the RenderForm.

Continue reading
5 Tips for Creating Great Blog Post Covers

5 Tips for Creating Great Blog Post Covers

Kinga WojciechowskabyKinga WojciechowskaMay 07, 2022

The blog post cover is the first thing that the reader will see. It should be attractive and intriguing enough to make them want to click on it and read on. We have prepared five tips for creating great blog post covers.

Continue reading
Social Media and E-commerce — Why Those Two Are Inseparable?

Social Media and E-commerce — Why Those Two Are Inseparable?

Julia ReznerbyJulia ReznerJanuary 19, 2022

Learn why social media is crucial for your e-commerce success, and how to use this form of communication to boost your results!

Continue reading

Design. Automate. Scale.

Free plan • No credit card required • Get started in minutes