Rich Card Previews on Social Media

Ronnie Smith
2 min readJan 4, 2023

--

Table of Contents

Introduction

Web addresses, also known as URL’s or hyperlinks, render rich preview cards on social media sites such as Facebook and Twitter when shared

Screenshot Twitter

provided that a few key lines of code, called <meta> tags, are included in your webpage. Implementing rich card previews for social media link sharing is easy and delivers immediate impact value to your brand.

The Image

The rich card’s key feature is the image. Images meeting the below specifications will display great across all social media platforms supporting rich cards.

  • .jpg file format
  • 1200px x 1200px dimension
  • 300KB maximum filesize
  • Center any image focal points to account for auto cropping that may occur on some rich card previews. Note, other image specifications may work but sticking to the above standard is a time saver and makes for easy management.

The Code

Simply paste the code below into the <head> of your HTML and you are done!

<meta name="og:description" content="This is where the description of my webpage goes." />
<meta name="twitter:card" content="summary">
<meta name="twitter:image:alt" content="Description of My Image">
<meta property="og:image" content="https://myurl.com/my-image.jpg" />
<meta property="og:title" content="My Page Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://myurl.com/my-page" />

Validate

Use the Twitter Card Validator Tool and LinkedIn Post Inspector to validate that your rich card displays prior to sharing the hyperlinks on social media.

Conclusion

Rich card previews are very valuable and are easy to implement.

--

--

Ronnie Smith
Ronnie Smith

Written by Ronnie Smith

Delivering refined solutions via vigorous practice. Tulane ('97), Cisco CCIE# 6824, Google Certified Professional Cloud Architect, and USPA Master Skydiver