All About Metadata of Your Website

What is metadata and why is it important? Let's find out!

Asavari Ambavane
Geek Culture
4 min readJul 6, 2021

--

This blog will be going over the key aspects of metadata, meta tags, how it can help you push your site up on google search, and more…

What is metadata?

Metadata is simple snippets of text and image content that provide a summary of the webpage. This data generally shows up when somebody shares a link via Whatsapp, Instagram, Twitter, Linkedin, messaging, etc. Moreover, metadata also contains information that helps different search engines scan your site to figure out what it is about or whether it is legit. If I were to describe metadata in one sentence, I’d say —

It is all the information your website provides about itself before actually opening it in a browser.

meta title and description
meta tag image

Why is metadata important?

Don't you want your website to look super beautiful and enticing at first glance? Well, that is exactly why you need metatags! Incorporating metatags in your website not only makes it look good on social media pages but also pushes its ranking up on google. It is necessary to be meticulous while creating your metadata as you need to pick just the right words for it. One should not just ramble on and on in meta tags. The limit google offers is 60 characters for the title and 105 for the description. So, we must make sure that we use our words efficiently. Used correctly, your website metadata will greatly improve your website’s visibility in organic search results and can lead to a greater amount of traffic to your site.

Metatags

I’ve been ranting about metatags and metadata for quite a while now. But, where does the metadata actually go? How do I define it?
Metadata has its own special place in a website’s code. It is placed inside the <head> </head> tag of your .html file. Let us look at the different kinds of tags we can write.

Title tag

The most important meta tag is the title tag. It is something that appears everywhere you mention your site. Whether it be on search engines or on any social media site, you will see the contents of the title tag everywhere. It is defined as—

<title>Your Website Title</title>
<meta name="
title" content="Your Website Title">

Description Tag

The description tag is very valuable when it comes to increasing the engagement of your site. It is one of the most effective ways to get through to your target audience. While google auto-generates the description by picking up text from your web page, it is always advisable to customize it according to your needs when you can. It is defined as —

<meta name="description" content="Your description here">

Meta Image or OG:Image Tag

This tag is very critical as it has to do with the visual aspects of your website. I want people to know how beautiful my site looks or what my brand stands for so that they are excited to open my link. If that is what you want to, then you should definitely use the og:image tag. On sites like Facebook, Twitter, and Linkedin, your meta image is 3x larger than your text content! It is defined as —

<meta property="og:image" content="your image path">

Opengraph and Social Media Tags

Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media. Everything that is displayed about your webpage on social media sites is contained in the og or open graph tags. Some social media sites prefer to have their own tags like Twitter. These tags look like —

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="Your site URL">
<meta property="og:title" content="Your site title">
<meta property="og:description" content="Your site description">
<meta property="og:image" content="your image path">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="Your site URL">
<meta property="twitter:title" content="Your site title">
<meta property="twitter:description" content="Your description">
<meta property="twitter:image" content="Your image path">

Given above is a brief of what meta tags are and why they are important. Metadata can be a really useful tool to boost your website's engagement and activity. So, keep in mind these tags the next time you create or edit your website!

I hope you liked this blog. See you soon!

--

--

Asavari Ambavane
Geek Culture

I like to write about web development and design :)