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.
.jpgfile 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.
