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

How to show article banner in social media?

Published 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="https://my-blog.com/my-image.jpg">
<meta name="twitter:image" content="https://my-blog.com/my-image.jpg"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="thumbnail" content="https://my-blog.com/my-image.jpg"/>

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.

Read more
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.

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

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

Julia ReznerbyJuliaJanuary 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!

Read more
How to Boost Your Social Media Engagement with Images

How to Boost Your Social Media Engagement with Images

Julia ReznerbyJuliaNovember 27, 2021

Ready to step up your social media game? Learn how images can affect your results!

Read more
What you see is what you get — Importance of Images in E-commerce

What you see is what you get — Importance of Images in E-commerce

Julia ReznerbyJuliaNovember 23, 2021

If you’re wondering about the role of images in e-commerce and how images affect conversion rates, read this article now! Inside you’ll find all the information on the topic.

Read more
11 Actionable Tips to Create Perfect Product Page

11 Actionable Tips to Create Perfect Product Page

Jakub PomykałabyJakub PomykałaNovember 11, 2021

11 quick and actionable tips to create great product page for any ecommerce business. A few steps to help you create the perfect product page for your products.

Read more

Design. Automate. Scale.

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