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 . includes meta tags in every one of the blog posts which is enabling twitter to create that beautiful card. Before we get an overview of what meta tags are - let's just see what meta tags Hashnode included in the blog post, which enabled the twitter to display the preview of the link that you see on twitter. meta tags Hashnode I 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&#x27;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&#x27;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 section of your website to describe what the content in that particular page is about. In short, meta tags contain metadata of the page on a website. head Platforms 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 . 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. Summary Card with Large Image 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 for showing link previews on Facebook. And there will be a meta tags for for showing previews on LinkedIn. Since all these meta tags related to title refer to the same thing. Wouldn't it be nice to combine all the title meta tags in to one? Fortunately there is a way - It's called Open Graph Protocol. title title Open 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 , and 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. Facebook Sharing Debugger Twitter Card Validator LinkedIn Post Inspector There is one other validator that I frequently use which combines all these: . 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 section of your html. metatags.io head With 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 and comment here if you have any questions. You can even message me directly on Twitter if you want to chat about anything related to tech. Bhanu Teja P @pbteja1998 Links and References: Metatags.io Twitter - Summary Card Twitter - Summary Card with Large Image Twitter - App Card Twitter - Player Card Twitter - Cards Markup Tag Reference The Open Graph Protocol Facebook - A Guide to Sharing for Webmasters How Google Meta Tags Impact SEO Previously published at https://blog.bhanuteja.dev/optimize-your-website-for-social-media-platforms-ckdrnv6o700v3gws14gwy5xux
