Coding Journal

My journey to become a Full Stack Developer

cover image

What are metadata and meta tags?

April 18, 2021, 7:34 p.m.

What is metadata?

Metadata is  data about data. It means that it's usually a short description or summary that describes the content. 

When we are learning HTML we usually omit that part as not so important because it is something we can't see on our websites. But it can be read by search engines so metadata is important for SEO purposes.

How do we add metadata to our websites?

The place for metadata is in the head of our HTML document. There, we're supposed to add Meta Tags. 

When we use code editors with Emmet, we usually can produce the skeleton of our HTML file typing only !, so we often don't think about meta tags. We already have things like the character set used in the page (charset tag), the version of Internet Explorer (http-equiv="X-UA-Compatible", content="IE=edge") and set the viewport to the device-with that helps with making our website responsive.

 

Let's look at the file produced with Emmet:

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    

</body>

</html>

We also have the title tag there.  Always remember to add your title. For SEO purpose it is good to start the title from a keyword but it shouldn’t be overloaded with keywords. The length of the title should be less than 60 characters.

What other meta tags can we use?

description - it’s a summary of your page, you can write to your users to encourage them to click, you can use keywords here as well as add an offer or a discount. 

author - here you can add the author of the website

 

 <meta name="description" content="This is the description of a site that would be seen in the google search">

 <meta name="author" content="Your name">

 

Meta tags are not only important for SEO purposes but also to prepare nice shareable social media objects. 

 

How to prepare nice Social Media cards using Meta Tags?

A few years ago Facebook introduced Open Graph meta tags. Thanks to them we can control how URLs of our website are displayed on Social Media. 

Open Graph tags has got og: before tag’s property

Mostly used tags are:

og:title 

<meta property=”og:title” content=”Title of the content” />

og:url

<meta property=”og:url” content=”https://yourwebsite.com” />

og:image 

<meta property=”og:image” content=”https://yourwebsite.com/photo-link.png” />

og:type 

<meta property=”og:type” content=”article or website” />

og:description

<meta property=”og:description” content=”description you want to have on the social media card” />

 

After adding those Open Graph tags you can check how your social media card will look like on this page: 

https://www.opengraph.xyz/

 

Tagged in : tutorial

my photo

written by

Makneta

Avid learner, Python / Django and CSS Art ethusiast.

Similar posts

All posts