Skip to content

How to add social media link preview to your SaaS landing page

  • by
Social media preview

I am bulding : An AI assitant to your twitter profile that will write intelligent tweets and replies, convert your blogs into twitter threads and schedule your tweets.

I have successfully launched our landing page : visit here

I just added social media link preview to my new SaaS landing page (Built upon NextJS & Tailwind CSS).

It is done by ‘Open graph protocol’ or ‘Twitter Card’ meta tags.

Here is how it’s done πŸ‘‡

To get preview of link while sharing on social media is important for SEO and as well as aesthetic value.

People know what they’re going to see if they’re clicking this link

Here is how to add metadata and preview card to your NextJS and Tailwind CSS website.

Add these Opengraph Meta tags in layout.jsx under <head></head> tags.

Opengraph meta tags

Add Twitter Card Meta Tags below thisπŸ‘‡

Twitter card meta tags

Your head section will look like this:

All meta tags for link preview

You can also use an online tool to get these codes for your website

Unlock Your Tweeting Potential with BetterTweet! Join the Waitlist for 50% Off: Boost your profile with AI-Powered Tweets, Intelligent Replies, and Blog-to-Thread Conversion!

Thanks for reading!

Post bySampat Sharma from

Leave a Reply

Your email address will not be published. Required fields are marked *