
Social media banners are a great way to bring more attention to your content on social media platforms like Facebook, X (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.

```jsx
<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](/blog/open-graph-meta-tags.png)

- `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 

## Banner size and format

**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](/blog/banner-sizes.png)

## 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](/tools/website-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](/blog/website-metadata-tester.png)

### 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](https://chrome.google.com/webstore/detail/social-link-preview-by-ba/fpeploidflhiimaailgakhamacaimbbh).


![Open graph tester, Chrome Extension](/blog/open-graph-chrome-extension.jpeg)

## 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](/blog/blog-post-cover-creator.png)


Zapier

Make.com

Integrately

WordPress Plugin

Mailchimp

Airtable Extension

Google Sheets

Excel/CSV file

HTML Embed

REST API

RenderForm CLI

Webhooks

HTML to Image

Posts with #banner

How to show article banner in social media?