HTML meta tags for social media cards
Your website can have a social media card so that when you share it online it looks more appealing and provide additional information for people. To do so you’ll need to add HTML meta tags for social media.
What is a social media card?
A social media card is a visual representation of the content of a specific web page on a social media platform that it is being shared on. You most probably have already seen these on Twitter, Facebook, and LinkedIn.
A social media card acts as a teaser to a webpage, by providing users with some information on what kind of content it has. Like page title, description, and an image.
When a link is shared on a social media platform it scans the page for specific meta tags, and then it takes the data from these meta tags and displays it in a form of a card.
If no social media meta tags are specified then the shared webpage will be represented as a regular link.
Open Graph meta tags (Facebook, LinkedIn)
The Open Graph meta tags are used by most of the social media platforms, most known are Facebook and LinkedIn.
These meta tags have a property attribute that contains a value with the og: prefix and the content attribute.
There are quite a few properties you can use for the Open Graph meta tags, but the four required ones are:
og:title- represents the web page titleog:description- the description of your web pageog:image- an image URLog:url- the URL of your web page
NOTE: Recommended image size for the Facebook card is 1080 pixels in width and the minimum is 600px in width.
Twitter meta tags
Unlike other social media platforms, Twitter has its own unique meta tags for displaying cards. It is called a Twitter Card and it looks very similar to the Open Graph cards.
Just like the Open Graph, the Twitter meta tags have a property attribute with the twitter: prefix.
twitter:title- represents the web page titletwitter:description- the description of your web pagetwitter:image- an image URL
NOTE: Images for Twitter Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or a maximum of 4096x4096 pixels.
When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently and minimizes the amount of duplicate markup required to describe content and experience.
NOTE: all meta tags should be placed at the head of your web page.
Ready to use code snippet
<head>
<meta property="og:title" content="Frontend Dev Blog" />
<meta property="og:description" content="A blog about frontend web development - tips, tricks, use cases, how-tos, examples, stories." />
<meta property="og:url" content="https://nikitahl.com/" />
<meta property="og:image" content="https://nikitahl.com/images/icons/twitter-image.png" />
<meta name="twitter:title" content="Frontend Dev Blog">
<meta name="twitter:description" content="A blog about frontend web development - tips, tricks, use cases, how-tos, examples, stories.">
<meta name="twitter:image" content="https://nikitahl.com/images/icons/twitter-image.png">
<meta name="twitter:card" content="summary_large_image">
</head>