Up next in 10
This instructional video, titled "A Beginner's Guide to HTML Meta Tags for SEO," serves as a valuable resource for individuals new to web development and search engine optimization (SEO). The content covers the fundamental aspects of HTML meta tags, providing insights into their importance for optimizing a website's visibility on search engines. Viewers can expect to gain a clear understanding of how to implement meta tags effectively, enhancing their website's chances of ranking higher in search engine results. With a focus on simplicity and accessibility, this guide is tailored for beginners, making it an excellent starting point for those looking to improve their website's SEO performance.
Show More Show Less View Video Transcript
0:00
Hello everyone, welcome to Key2Blogging and today we will discuss about HTML metatags
0:05
why it is important for SEO and how you can use this metatags in your website
0:10
So first let's check what is metatags. So metatags are a little code snippet that usually put below the head tag and it is not
0:19
visible to the normal visitors and it only visible to the search engine and the browser
0:25
So browser use it to display the content properly to the visitors and search engine
0:30
use this metatags to display the content in the search result. So let's start with the HTML title tag
0:38
So the title text looks like this. So you have to add the title
0:43
Then here you have to add your website title and then close the title like this
0:48
And here you have to put this title tag below the head tag so that it will show the title
0:54
in the search result. So let me just show you. So let me just search for Key2Blogging
1:04
And here scroll down and here as you can see, this is our title tag
1:09
So search engine use that title tag to show this title like this
1:14
And then here comes with the HTML meta description. So the meta description will look like this
1:22
And here the first attribute is name and the value is description
1:27
And the second attribute in this meta description is content. And here you have to add your description
1:34
So here I have added this description for my website. So in this way, you can control how your website looks in the search result
1:43
So let's check how can add this to your website. So let me just show you how to add it in WordPress
1:51
And then I will show you how to add this in blogger. So to add this in WordPress, let me just go to the pages
2:00
And here let me just select the homepage and here click on edit
2:05
Now if you are using RankMath, then you will see this option here
2:09
Or if you are using Yoast SEO, then you will see this option below the page
2:14
So here I am using the RankMath. So click on edit snippet
2:19
And here you can control the title. So the meta title will look like this
2:24
Here comes with the site site name and then add a separator
2:28
And then I have added the site description. And here this is the meta description
2:33
So here if you change the meta description, it will change it here in this search result
2:39
But it takes time to process it and so the result in the search result page
2:44
So let's go to the blogger and let's check how you can control the meta text, meta title
2:49
and meta description. So for this, you have to go to the settings
2:55
And here you have to change the title like this. So here you can add your site title
3:01
And here you can add your meta description. So it will show in search result
3:06
You can also change the HTML title in individual post. So let me just open a single post here
3:13
And here you can change the title. By default, your title of the blog post is act as a title of that page
3:20
And here you can control the search description. But here I am not seeing this option
3:26
So for this, you have to go to the settings. And here scroll down and search for meta text
3:33
So here turn on the enable search description so that you will see a search description
3:39
field in the blog post. So let me just open the blog post
3:43
And here as you can see, you have opened the search description field. So you can add your meta description here
3:50
And if you are using rank math or your ratio, then you can control the description and title
3:56
from here. So let me just close this. And let's go to the third meta text
4:03
It is called meta keywords. So you can add some keywords to your website
4:09
So just add the meta then in the attribute type name and here add the attribute keywords
4:16
Then again set the attribute content. And here you have to add the keywords by putting comma so you can add multiple keywords to
4:24
your website. Today search engine like Google doesn't consider this meta keywords
4:29
But still there are some search engine that uses this field date
4:33
So you can use this meta keywords in your website. So you have to add this little code snippet below the head tag
4:41
Now let's move to the next meta text. And here this is the meta authors
4:46
So you can assign the author name and tell the search engine about the author of a web page
4:53
So you can add this meta tag like meta name author. And here in the content field, you have to add your name so that search engine and the
5:01
browser will know who is the author of that page. Now let's move on to meta viewport and the meta viewport will look like this
5:11
So here you have to add the name to viewport and here in the content, you have to set the
5:16
initial device width. And here you can set the initial scale one
5:22
So whenever a person visit your website, it will by default. So these two initial scale one, it means 100%
5:31
So let me just open a website from here. And when I land on this page, it will set to 100%
5:40
So if you don't set the meta viewport, then browser may display it like 125% or 175% which
5:48
is not mobile friendly. That's why you have to set the meta viewport to your website
5:54
So in WordPress, by default, the meta viewport is added. So let me just show you here in the appearance section, go to the theme editor
6:04
Now here you have to select the header dot PHP. And here you will set the meta viewport
6:12
So here by default, the meta viewport tag is added. And if you want to add this tag to your blogger website, then here you have to go to the theme
6:23
and here click on edit HTML. And here you have to add the meta viewport tag just below the head tag
6:31
So you can easily check if the meta viewport tag is added to your website or not
6:36
So you have to just go to this website mobile friendly test by Google
6:41
And here you have to put your website URL and it will show this result like this
6:47
So if the viewport is not set, then you will it will show this warning
6:51
So you can easily fix this warning by adding this code meta viewport just below the head tag
6:57
The next HTML meta tag is meta character set UTF-8. So this meta tag tells the browser and the search engine about the encoding of the HTML
7:09
so that search engine can easily understand the encoding of the HTML code
7:14
So here go to the template and here as you can see the HTML coding is using the UTF-8
7:22
So here you can add a meta text like this. So just add the meta character set UTF below the head tag and the HTML character set meta
7:33
tag will be added to your website. And in case of WordPress, there is already set the character set
7:40
And here as you can see, this is the meta character set. So let's take the next HTML meta tags and this is canonical tag
7:48
So canonical tag tells the search engine about a specific URL that is the master copy of
7:54
a page. So if you create multiple copy like HTTP version of a page, HTTPS version of a page, and there
8:03
is a page like www, non www. So you have to set the canonical version so that search engine will display that page
8:13
So if you don't set the canonical, then search engine can automatically take a page, but
8:18
it is better to set the canonical tag. And you can easily set this by just copy this code and here replace the URL of your website
8:27
and then go to the template and put it just below the head tag
8:31
Now the next HTML meta tag is header tag. So there are quite a few header tags that we use in our blog post and there are h1 tag
8:42
h2 tag, h3 tag. So you have to properly format your content
8:47
So by default, the title will act as a h1 tag and then you can start your paragraph
8:52
or start a heading. So you can add multiple heading and if you are using subheading, then you can set a subheading
8:59
below the h2 tag like h3 tag or h4 tag, and you can set your conclusion like in h2 tag
9:07
So this h1 tag, h2 tag plays an important role in SEO
9:10
So use it properly. So the next meta tag in our list is robots meta tags
9:17
So although these meta tags are not used quite often, but you can easily use this tag to
9:23
block a certain page from your website. Just put this meta tags in that page and search engine will no follow this or no index this
9:32
You can also use the robots.txt file to block certain pages. So let me just show you
9:39
So in case of blogger, go to the settings and scroll down
9:43
And here you will see this option custom robot.txt. Turn on this and here click on enable custom robot header tag
9:52
And here you can set the tag like if you want to index the homepage, then you can set
9:57
it to all and set it to no dp. Click on save
10:01
If you don't want to index the archive pages and search pages, then here click on no index
10:07
and click on no dp and click on save so that the search engine will don't crawl this page
10:14
and doesn't index in search result. And here click on post and pages and click on all and no dp and click on save
10:23
You can also individually no index certain pages or post from your blogger website
10:29
So just click on the blog post and here click on the custom robot.txt and here you can select
10:36
the no index and hit the update button so that this page will not index by the search engine
10:43
So in this way you can individually no index the page and if you are using WordPress, then
10:48
you can individually no index the page by let me just open a page from here and here
10:55
let me just click on edit and here click on this rank math option and let me just click
11:01
on this and here you can set it to no index so that the search engine will not index this page
11:08
I hope you understand how to index or no index certain pages in both WordPress and blogger
11:14
So you don't need this meta tags, robot meta tags. So you can easily no index certain pages by following this method
11:22
So the next meta tag in our list is alt attribute. So when you upload an image to your website, the HTML code will look like this
11:32
So here in the image tag, you have to add the source attribute and here you have to
11:36
put the image URL and here in the alt attribute field, you have to set the alt attribute describing
11:43
about the image. So search engine and the browser will use this information later
11:50
So search engine use this alt tag to show relevant results in the search engine
11:55
So when someone search for a term like photo of a young boy or a young boy, then search
12:02
engine will use this alt attribute and show the image for that visitors and here you can
12:08
set the width and height attribute. So if you want to add alt text in blogger, then let me just shift to compose view and
12:17
here click on the image and click on setting and here in the alt text field, you have to
12:23
set the alt attribute and if you want to add the alt attribute in WordPress, then let me
12:29
just select the image, click on here and let me just click on settings and here you can
12:35
set the alt attribute in WordPress. So the next meta tags in our list is meta refresh
12:42
So you can use this meta tag to refresh the content after certain intervals
12:47
So here HTTP equivalent and the value will be refreshed and here in the content field
12:52
you have to add the number of seconds. So here I am setting to 30
12:57
So the page will automatically refresh after every 30 seconds or you can set it to 60 or 120
13:04
So let me just show you how it works. So let me just copy this code and let me just go to the blogger dashboard and here
13:13
click on theme section and let me just click on edit HTML and here in the below head tag
13:21
let me just add this code and here in the content field, I will set to five seconds
13:28
and let's save this. So in blogger, it will ask you to add a closing meta
13:34
So let's add this. Now let's save this. Now click on back and let's open this blog post. Okay
13:50
Now the website is fully loaded, so it will automatically refresh the page after five seconds
13:55
Here as you can see, the page is refreshing after every five seconds
13:59
So in this way you can set a refresh time and it will automatically refresh after that time
14:06
So this is helpful for website like that content will change every five to 10 seconds
14:13
Like when you open a site like Crickbotch that shows cricket score, so the content need
14:19
to be refreshed after certain interval. So you can easily set a refresh so that browser will refresh the page after certain interval
14:28
So you can also use the same meta tags for your website
14:32
Like if you are using AdSense, then you can set a refresh duration like 500 or 600 seconds
14:40
so that it will automatically refresh the browser and in the ad code
14:46
So you can get more impression in your AdSense ad. But remember that don't refresh below two minute to three minute
14:54
If you are using AdSense. Now you know how to use meta tags in your website
14:59
So let's summarize this. So the first meta tag is title tag and then meta description
15:06
And then you can add the meta character set or HTML encoding type
15:11
And you can set the keyword meta keywords and here you can add your different keywords
15:17
and then you can assign the author meta authors. And here you can set the meta viewport
15:24
You can also use a meta color attribute below the head tag
15:28
So let me just show you. So this is the meta content
15:32
So here we have to change the color code and paste it just below the head tag so that it
15:38
will change the URL bar when someone visiting your website from mobile devices
15:44
That's all for this video. And if this content is helpful, then make sure to hit the like button
15:49
And if you are new to this channel, then consider subscribing for more upcoming videos like
15:55
this. And if you have any doubt regarding meta tags, then you can ask me in the comment section
16:00
and don't forget to join our telegram group. Here we will discuss about blogging and SEO tips every day
16:07
Thank you
Web Services
Blogging Resources & Services
Search Engine Optimization & Marketing
Search Engines