Rich Card Previews on Social Media

Ronnie Royston
2 min readJan 4, 2023


Table of Contents


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

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="" />
<meta property="og:title" content="My Page Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />


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.


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



Ronnie Royston

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