To begin with, what are meta tags?
Meta tags provide information about the web page in the HTML of the document. This information is called "metadata" and while it is not displayed on the page itself, it can be read by search engines and web bots
I will now show you how you might give an overview of your application when you share it on social media. That is, adding a preview for your app.
Something like this :
For a web bot to understand your application, this is the basic code you are supposed to add.
<title>Your Page Title</title>
<meta name="title" content="Your Page Title">
<meta name="description" content="Your Page Description">
But wait, it's not enough for every app to be able to read your web page and so it can give an appropriate preview of your app.
In order to get a proper preview from Facebook, Instagram, WhatsApp, LinkedIn like apps, you are supposed to add specific meta tags which are required by these crawlers. These tags are called Open Graph tags by Facebook, By which facebook related apps keep control of your app data.
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourpage.com/">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your Page Description">
<meta property="og:image" itemprop="image" content="https://yourimagepath.jpg">
! important
You need to add itemprop="image" attribute to og:image tag
In order to display the image in the preview of Whatsapp. Also, be sure to keep your preview image below 300 KB.
If you would like to use Facebook Insights, you need to add the app ID to your page. Insights gives you the ability to view traffic statistics on your site from Facebook. You can do so by adding the tag below.
<!-- Replace 123456789123456 with your app id --!>
<meta property=fb:app_id content=123456789123456>
You are needed to create Facebook developer account in order to get app id. Then, You are supposed to create an app and link your webpage there. Refer this link in order to get your app id : app id
Now coming to Twitter, below are the tags you need to add in order for Twitter to show a preview of your app when shared.
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://yourpage.com/">
<meta property="twitter:title" content="Your Page Title">
<meta property="twitter:description" content="Your Page Description">
<meta property="twitter:image" content="https://yourimagepath.jpg">
Similar to Facebook insights, Twitter has its own Twitter Analytics which requires the below tag, where you are supposed to enter your Twitter username
<meta name="twitter:site" content="@twitter-username">
After all these changes you may find that you are not able to see your changes, That's because your cache is not cleared from your social media pages i.e., your webpages are not yet crawled by bots after your changes. In order to make them crawl use these :
- In order to reflect the changes to Facebook, Instagram, WhatsApp, just go to this link and enter your website URL and scrape it again. This site also lets you check which meta tags you can add in order to enhance.
- For twitter just go to Twitter Validator and enter your URL and click on preview card. Now twitter fetches new changes and updates its caches.
- LinkedIn provides Post Inspector that deletes the preview cache. Simply debug the cached URL here.
Complete code
<!-- Primary Meta Tags -->
<title>Your Page Title</title>
<meta name="title" content="Your Page Title">
<meta name="description" content="Your Page Description">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourpage.com/">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your Page Description">
<meta property="og:image" itemprop="image" content="https://yourimagepath.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://yourpage.com/">
<meta property="twitter:title" content="Your Page Title">
<meta property="twitter:description" content="Your Page Description">
<meta property="twitter:image" content="https://yourimagepath.jpg">
<!-- For Facebook Insights --!>
<meta property=fb:app_id content=123456789123456>
<!-- For Twitter Analytics --!>
<meta name="twitter:site" content="@twitter-username">
Thanks for making it this far 🙏. If this helped you in any way, please drop a like.
Top comments (1)
Thanks for this thorough article! Devs can make the process of creating meta tags a little easier by using Metatags.site. It lets you preview, edit & generate meta tags for your website.