DEV Community

Magda Rosłaniec
Magda Rosłaniec

Posted on • Originally published at

What are metadata and meta tags

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">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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:

<meta property=”og:title” content=”Title of the content” />
Enter fullscreen mode Exit fullscreen mode


<meta property=”og:url” content=”” />
Enter fullscreen mode Exit fullscreen mode

*og:image *

<meta property=”og:image” content=”” />
Enter fullscreen mode Exit fullscreen mode

*og:type *

<meta property=”og:type” content=”article or website” />
Enter fullscreen mode Exit fullscreen mode


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

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

Top comments (4)

ravavyr profile image

A good explanation, i do feel you can talk about OpenGraph without mentioning the JSON version. Since most devs are learning javascript stacks these days, this may be a better fit for most of them.

Facebook's example is a good one.

Anyone interested, read up on website "schema" "open graph" and "json-ld" [Json for linking data]

makneta profile image
Magda Rosłaniec

Thank you. I wanted to write only about the very basic usage of meta tags and OpenGraph for the beginning. I want to use it as my notes and build my knowledge of it gradually.

carlosrafael22 profile image
Rafael Leitão

Thanks for the article, Magda! I didn't know about this OG tags. Interesting to learn about it :)

makneta profile image
Magda Rosłaniec

Thank you for your nice comment.