When you share a link to your website on social media platforms such as LinkedIn, Facebook, Twitter, a social share preview image shows up. Even when you share a link on messaging platforms such as Slack, Facebook Messenger, or even via SMS text messages, a preview image will be displayed. 

This social share preview image is commonly called an OG image, or Open Graph image. The Open Graph protocol was created by Facebook in 2010 to make sharing websites on their platform easier, and it is now used by many other platforms.

Your web page’s title, an image, the URL, and a short description will typically be displayed in the preview. You can set these using Open Graph meta tags. If your website doesn’t have OG tags in the code, the platform will do its best to find the right information. Typically, the featured image is the one thing that can’t be determined well without OG tags. 

OG image tags tell social networks which image to use. Without that tag, the platform usually displays the first image it finds. In many cases, this could simply be your website’s logo. 

Here are a few examples of social share preview images:

No image found:

Improperly sized image used:

OG image set correctly:

Each social network has slightly different size requirements for their social share previews. We’ve done a deep dive into OG image sizes here, and our conclusion is to use a 2:1 or 1200x600px image. If you’ve cut Twitter out of your marketing channels, use 1200×627 for more optimized size on LinkedIn and Facebook.

How To Set Your Social Share Preview Image On Your Website

How you will set up your social media preview image will vary depending on how your website is built. Here are a few common ways to set up your OG image. 

How To Set A Social Preview Image In WordPress

There is a great plugin for WordPress called Yoast SEO. Yoast helps you control many different SEO settings, with social preview images being one of them. They have a way to set up both Facebook- and Twitter-specific images. If you just set up an image for Facebook, that one will be used across all platforms. You can also set a Facebook-specific title and description here as well if you want to.

How To Set A Social Preview Image In Shopify

Shopify has a specific place you can set up your social sharing image. For all product pages, collection pages, and blog posts, the set featured image will be shown. But for other pages, you’ll need to set a specific image. Follow Shopify’s tutorial here on choosing a social media thumbnail image.

How To Set A Social Sharing Image In Squarespace

Squarespace has a few different ways to set up social sharing images depending on your site’s version and the type of page you’re sharing. Squarespace’s support article here outlines how to add social sharing images.

Set OG Image Tags In Your Code

If your website was created without a CMS, simply add a few lines of text to the head of your HTML file. 

Here’s an example of the code:

<meta property="og:image" content="https://image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">

Check How Your Website Link Will Be Displayed On Social Media 

Zelolab’s Social & Share Preview Tool allows you to preview how your link will be displayed when shared on Twitter, Facebook, Slack, LinkedIn, and Google Search. Plus, you can preview your raw tags as well. 

Our free tool helps you check social share previews of individual web pages. Try it now!

Soon, you’ll be able to audit your entire site’s social preview images with our site-wide audit tools. Plus, we’ll continuously monitor your site and alert you when new pages or posts are published. You’ll see what, if any, the set OG image is in realtime. Sign up to be alerted when our site-wide audit, optimization, and monitoring tools are ready!