Rich Card Previews on Social Media

0

By Ron Royston

Originally Published 7/23/2019
Updated 7/23/2019

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 Twitter Rich Card 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.

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.

Automate a workflow or process today with standards based, library free JavaScript in the browser, in the cloud with NodeJS, or both. High Tekk can do that! See our services page for more details.

Dialog Title

Cell Phone Number

Your order ID is . The grand total is , or bitcoin.

This action cannot be undone. Continue?

Changes will be lost. Continue?

Delete location?






A signin link will be sent to your email address.

You privacy is top priority. Email addresses are never shared with a third party. For more information see our privacy policy.

Find a bug? Experience an error? How can we do better? We appreciate your feedback.

Delete order? This action cannot be undone.

Delete order? This action cannot be undone.