Have you ever wondered how Twitter automatically shows the preview of the link in a tweet that you post. How does twitter know what image to use and what part of website content to use for generating title and description? It must somehow know exactly what image to show, and what title and description to use.
The answer to the above question is
meta tagsI skimmed through the page source of the Hashnode blog post and found many meta tags. See below the meta tags that are related to Twitter.
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:title" content="Add Typescript to your Next.js project"/>
<meta property="twitter:description" content="It's very easy to add typescript to a Next.js project. In this post, I will list out steps on how to do so.
First, let's create a new Nextjs project my-ts-app
# Create a directory with name `my-ts-app`
mkdir my-ts-app
# Change directory to `my-ts-ap..."/>
<meta property="twitter:image" content="https://hashnode.com/utility/r?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1597120734019%2FcIO4EHx9R.png%3Fw%3D1200%26h%3D630%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dformat%26q%3D60"/>
<meta property="twitter:creator" content="@pbteja1998"/>
<meta name="twitter:site" content="@hashnode"/>As you can see, Hashnode is explicitly telling Twitter what to show and how to show the preview of the link to the blog post.
Now, let's get to the actual content of the blog post.
What are meta tags?
Meta tags are snippets of text that describe a page's content; the meta tags don't appear on the page itself, but only in the page's source code.
So basically they are just html tags that you add in the
headPlatforms like Twitter, Facebook, and LinkedIn make use of these meta tags to display link previews when you add that link on their platform. They not only just use these meta tags, they also provide specific guidelines that you can follow which makes the preview look the best on whatever platform that you post your link in.
Let's see what twitter recommends. Twitter actually has 4 different ways to show the link preview
- Summary Card: Title, description, and thumbnail.
- Summary Card with Large Image: Similar to the Summary Card, but with a prominently-featured image.
- App Card: A Card with a direct download to a mobile app.
- Player Card: A Card that can display video/audio/media.
In this post, I will just list down the recommendations for Summary Card with Large Image. I will add the links to other cards at the bottom of the post so that you can go and read it out for yourself later.
Twitter Summary Card with Large Image
You need to set the above properties as per the given recommendations in your head tag of the website in the following way.
<meta name="property-name" content="property-content" />
<!-- For example, to set the title of the card to "Optimize your tweets with cards", add the following meta tag to your site -->
<meta name="twitter:title" content="Optimize your tweets with cards" />
Similarly, there are meta tags that platforms like Facebook and LinkedIn use. For example, there will be meta tags related to
titletitleOpen Graph Protocol
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.
To turn your web pages into graph objects, you must include the following four meta tag properties to your website.
There are many other open graph properties that you can add to your site, I will add a link to them at the end of blog post.
Now, coming back to link previews on Facebook, Facebook actually directly uses the open graph based meta tags to show link previews. See the recommendations that they give below.
Facebook Recommendations
Similarly, LinkedIn also uses open graph tags to show the link previews.
LinkedIn Recommendations
Validating Meta Tags
In case you are in doubt, whether you set your meta tags properly or not, you can validate and check them using Facebook Sharing Debugger, Twitter Card Validator and LinkedIn Post Inspector You just have to paste the link you want to validate in any of the above tools and then see the preview of the link.
There is one other validator that I frequently use which combines all these: metatags.io. It shows the previews for Google, Facebook, Twitter, LinkedIn, Pinterest, Slack, all in one place. You can even upload the image, enter title and description to and it allows you to copy the exact html code that you need to put in your
headWith this information, you should now know how to make your website links shareable on social media platforms.
If you learnt something new from this article today, drop a like and follow me at Bhanu Teja P and comment here if you have any questions. You can even message me directly on Twitter @pbteja1998 if you want to chat about anything related to tech.
Links and References: