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. Add a few magic links to your `<head/>` and you are good to go.

![Automatic blog post generation for social media](/docs/automatic-cover-generation-for-blog-posts.jpg)

## How to configure?

Configuration is simple and does not require any special skills nor WordPress plugins.

1. Open Wordpress admin panel
2. Expand Appearance menu on the left side
3. Open Theme Editor
4. On the right side choose 'header.php' file
5. Paste your configuration code into editor
6. Click 'Save changes' on the bottom


![Wordpress: Automatic Social Image Previews](/docs/instructions/wordpress-automatic-social-image-previews.png)

> Configuration code must be pasted between `<head>` and `</head>` tags.


## Test configuration

Open our [Open Grap Preview Tool](https://renderform.io/tools/twitter-card-preview-tool/) and paste url to your
blog post and see if the image is correctly generated.


### General Meta Link Example
```html
<head>
  <meta
    property="og:image"
    content="https://get.renderform.io/og/TEMPLATE_ID.jpg?url=YOUR_BLOG_POST_URL">
  <meta
    name="twitter:image"
    content="https://get.renderform.io/og/TEMPLATE_ID.jpg?url=YOUR_BLOG_POST_URL">
    
</head>
```


### Resources

- [Documentation: Dynamic og:images](/docs/general/dynamic-og-images/)

Dynamic Social Images for Wordpress


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.

```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.png)

## 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)


How to show article banner in social media?


Images are one of the most important elements in an e-commerce website. They are used for product promotion, information sharing, and more. Images can be classified into three major categories: photos, illustrations, and infographics. 

Photos are probably the most common type of image used on websites because they convey the product best. Photos also give shoppers a sense of realism when browsing online stores.

Images can be used to provide information about products quickly and efficiently. With minimal copywriting skills required to write descriptions or captions, they are very popular for online marketing campaigns.

Infographics are perfect for more technical aspects of your products, giving the important information about your item in a more customer-friendly way.

![e-commerce social preview](/blog/imessage-social-preview.jpg)

## How Images Affect the Conversion Rates

Images can help to **tell a story** and help readers to **connect with the content**. They can also create a feeling of transparency, which is very important for modern brands.

We also need to consider things like color and contrast when we use images on our website. It's important that we **draw attention** to our chosen area and not just add an image for no reason.

![e-commerce social image](/blog/e-commerce-image.png)

Moreover, we should be using images that **represent the product** we're selling - this is especially relevant when it comes to fashion stores.
When we make sure our site has enough images, not only will it look more professional but it will also be more engaging for the reader.

Images are a **great way to communicate a message without the need to use words**. They help create a more memorable experience for the audience and can increase conversion rates by a lot. With image-optimizing tools, you will be able to make your images load faster and more efficiently.

**Image optimization** is an important step in web design that can help you get better results. Images add more depth and make the website feel more alive.

## What are the Common Mistakes Made by Brands Using Images in Their e-commerce Strategies?

Images are a vital part of the e-commerce strategy for most brands. They can make or break a conversion. However, many brands still make mistakes with their images and end up wasting their time and money on them.

![e-commerce juice image](/blog/e-commerce-juice-image.png)

**A well-designed and optimized image is the key to a successful e-commerce strategy.** However, there are some mistakes that brands usually make.

1. Not having a clearly defined purpose for the image
For example, do you want to use it as a logo? Do you want to use it as an advertisement? Or do you want to use it as an item presentation? Having a clear purpose will help you find the best type of image for your needs.

2. Choosing the wrong size or dimensions
To display your images on different screens, you need to have multiple sizes of your images from small square thumbnails for mobile devices, medium square thumbnails for tablets and laptops, and large square thumbnails for desktops and monitors. 


## How can Brands Capitalize on the Power of Images?

Images are powerful. They can evoke emotions and feelings, tell stories and create memories.
Brands use images to captureResponse the attention of their audience, identify themselves visually, and create a unique identity.

![taking photos for social media](/blog/social-image-photo.png)

Images are a crucial part of the branding process as they represent the brand.
If done correctly, images can be used to build trust with consumers.
But how can brands capitalize on the power of images?

1. Use them as a form of storytelling: Convince your audience that you care about them by allowing them to become part of your story by providing visually interesting content that is relevant to their needs and what they aspire for.

2. Create a unified image across every facet of your company: Use consistent colors, fonts, icons, and imagery across all channels. This will create a unified image of your brand, which your customers will recognize you for. 

As for the above, check out [RenderForm.io](https://renderform.io) and our great templates which will help you to keep consistency in your e-commerce images!


Zapier

Make.com

Integrately

WordPress Plugin

Mailchimp

Airtable Extension

Google Sheets

Excel/CSV file

REST API

RenderForm CLI

Webhooks

HTML to Image

Open graph

Dynamic Social Images for Wordpress

How to show article banner in social media?

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