Rich Card Previews on Social Media

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

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ronnie Royston

Tulane Graduate (Philosophy '97), Cisco Certified Internetworking Expert# 6824, USPA Master Skydiver (D# 20776).