Up next in 10
A Beginners Guide to HTML Meta Tags for SEO
2K views
Jan 28, 2024
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.
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
#Blogging Resources & Services
#Search Engine Optimization & Marketing
#Search Engines
#Web Services