Free UI/UX design course
Learn how to create exceptional designs by reading my new tutorial.
Start learningMetadata and SEO
Search Engine Optimization is a topic that most developers treat with neglect, most often pretending that it does not exist.
Don't go this path. For your client, such as our sample blog author, SEO is crucial and can decide whether or not a project will exist. That is why in this lesson we will learn the basics of SEO and take care of metadata.
Meta tags generator
To generate metadata we will use useful tool - Meta Tags Generator.
When you go to the link above you will see several sections. Everything is easy and intuitive to use - each section is responsible for the metadata of the selected website, such as Google, Facebook, Twitter, etc.
Your task is simply to complete the form on the right in such a way that it best corresponds to the content of your client's blog and that it presents itself in the best possible way.
At each input there is a limit of characters that a given service imposes on metadata. So you have to choose your words in such a way as to adapt to these requirements.
Take a look at the screenshots below to see what an example metadata for our backpacking blog might look like.
Open graph (Facebook, Pinterest, LinkedIn)
Copy the generated metadata
When you're done filling out the form, you'll see the generated metadata code at the bottom of the page.
Copy it and insert it into the <head> element in your project, but be careful not to overwrite linked files. Finally your <head> section should look like this:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>The best backpacking blog</title>
<!-- Search Engine -->
<meta name="description"
content="Do you want to start your adventure as a backpacker and are you looking for valuable, free knowledge? You've come to the right place">
<meta name="image"
content="https://mdbootstrap.com/learn/mdb-foundations/create-blog/intro-section/assets/intro-2.png">
<!-- Schema.org for Google -->
<meta itemprop="name" content="The best backpacking blog">
<meta itemprop="description"
content="Do you want to start your adventure as a backpacker and are you looking for valuable, free knowledge? You've come to the right place">
<meta itemprop="image"
content="https://mdbootstrap.com/learn/mdb-foundations/create-blog/intro-section/assets/intro-2.png">
<!-- Open Graph general (Facebook, Pinterest & LinkedIn) -->
<meta property="og:title" content="The best backpacking blog">
<meta property="og:description" content="A Free Beginner's Backpacking Guide">
<meta property="og:image"
content="https://mdbootstrap.com/learn/mdb-foundations/create-blog/intro-section/assets/intro-2.png">
<meta property="og:url" content="https://blog-tutorial.mdbgo.io/">
<meta property="og:site_name" content="Backpacking Blog">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<!-- Twitter -->
<meta property="twitter:card" content="summary">
<meta property="twitter:title" content="The best backpacking blog">
<meta property="twitter:description" content="A Free Beginner's Backpacking Guide">
<meta property="twitter:image:src"
content="https://mdbootstrap.com/learn/mdb-foundations/create-blog/intro-section/assets/intro-2.png">
<!-- MDB icon -->
<link rel="icon" href="https://mdbootstrap.com/favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
</head>
If you did everything right, then after saving the file you should see that the title of your page in the tab title in the browser has changed according to the set metadata.
About author
Michal Szymanski
Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.