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/
Top comments (4)
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.
developers.facebook.com/docs/marke...
Anyone interested, read up on website "schema" "open graph" and "json-ld" [Json for linking data] json-ld.org/
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.
Thanks for the article, Magda! I didn't know about this OG tags. Interesting to learn about it :)
Thank you for your nice comment.