What Is Meta Tags?
Meta Tags are tags used in HTML and XHTML documents to provide structured metadata about a Web Page. This is what Wikipedia says about Meta tags but according to me and all the developers out there Meta tags are one of the most important parts of a website which helps us to communicate with search engines and other social media about the content on our web pages and websites. If you have the basic knowledge of coding you will know that a website contains lots of pages. These pages are known as Web pages. These web pages together make up a website. For example I'm taking Bhommali.com so that you will know who a website from outside and also from inside.
This is how a web page or a website looks. We have entered bhommali.com and we say that we have reached a website but actually it is not a website that we have reached. We have reached a web page which is the main page of the website. This page is known as home page or developers say it as index page. It is known as index because when we create a website it will contain a lot of pages and it is your wish what to name those pages but there is a page which you should name as “index”` or “index.html” This pages helps the browsers, search engines and all other technologies to index our website. You may know how the browsers work. So if you don’t have a index page then when a user enters htpp://www.bhommali.com the browser will be confused where to take the user and what to show but if you have a index page in the root folder of your website then the browsers can easily understand that it is your homepage and take the users to the right place. So it is important to have a page named index which has your homepage content.
As I said whatever we see on the home page or the index page of the bhommali.com is an overview of what their website contains. You may see many links on the website, some of those will be to their own website but some others will be to other websites. For example link of an article will be to a web page of their website. But some social sharing like or some social links will be forwarded to that Social Medias which is out of this website. If you check the website you will see there are 100s of links like this. However, mostly 90% of them will be to the same website. When coming to web pages the first web page is that we see when we enter bhommali.com then there are many pages which are linked from this page you can easily find all of them. The main web pages are the categories. This site has 8 items in the category.
Now, we have seen the working of this website, how web pages are linked. Not only web pages all the websites in the web have a direct or indirect relationship, maybe that is the reason for the success of the web. But we haven’t noticed Meta Tags anywhere. We have been talking that Meta Tags helps search engines and the Social Medias. Actually Meta Tags keeps the web more interesting. At the end of this article you will come to know how important Meta Tags are. Now that we have understood that we will not be able to see Meta Tags but let’s know how Meta tags works and helps the search engines.
How Meta Tags Works?
Before we go so complicated we will check out how the Meta tags looks. I think you will know the basic structure of a web page. If you don’t then let me help you, every web page is written in a computer language known as HTML (There are many how writes it PHP or some other languages. However, finally the output will be in HTML so we will take HTML as the base). The basic structure of HTML is displayed in the image below.
The DOCTYPE tag is to mention which language you are writing or to notify browsers that the content of this page is HTML. And then the opening and closing html tag contains all the functionality of the website or the web page. Whatever a web page contains, all of that will go inside this tag. The next tag is head tag. Head tag will provide some vital information for the working of the website. This is where most of the information of the web page is in. This part of the webpage is not seen by the visitors. The website that we visited has all this in it but is not displayed in to us. If you want to make sure just take the screenshot which I posted above and look out for head tag or DOCTYPE. It doesn’t matter how hard you search you won’t e able to see this until the developer make some mistake in his code. The next part of a website is body. This is the section which is visible to us. You will be able to see whatever they write in this section. All the videos, images, songs, or whatever it you can see will be done here. Now, you have got an idea on how a website looks. So, what you think? Where will our Meta tags go? Will it go under html tag or head tag or maybe in the body tag? I’m sure that you got it right! Yes, it goes inside head tag. Ok now what head tag contains? Actually the head tag contains much more than just these Meta tags. The main content that goes inside a head tag is title tag. The title tag is what displays the name of the website in the browser’s tab. The head tag also contains a lot more information. It contains style, base, link, script and a lot more. You may have seen different fonts for different websites or you may have seen scrolling effects in some web pages and missing in some other web page of the same website. All this is done with different languages but is done in a same tag that is head tag. There are many things like this which is done in head tag. Now, we will have a look at the basic Meta tags. The basic Meta Tag looks like
<meta name="description" content="Free Web tutorials">
It starts with a less than sign followed by the word Meta then a space and name equal to what this Meta tag says. In this case it is description and after that it will have a content section where we will enter a description of the page. There are many other Meta tags which every website will use. I will mention some of them below.
The very first one in almost all website will be charset:
Charset Meta tag is one of the basic Meta tag. Charset specifies character encoding of an html document. It is usually written as:
This is only used in HTML5 and is one of the simplest forms of defining charset. UTF stands for Unicode Transformation Format. The '8' means it uses 8-bit blocks to represent a character. If you want to read more about UTF-8 visit the HTML Unicode (UTF-8) Reference article by w3schools. In the previous version of HTML that is in HTML 4.01 the same charset was written as:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
However, I’m the follower of HTML5. I always stand with the latest versions of this the softwares and programs that I use. And I also recommend you guys to follow the same method. It is always better to get updated with the best tools so that you can do a bit more than your competitors.
The next most used Meta content is viewport:
I exactly don’t know whether it is mostly used in all website but the think I know is viewport is one of the most important Meta tag for our website to work the best. There are many who avoid using viewport Meta tag but I strongly support it because if we do not set the viewport then our website will look same in desktop and also in mobile. In mobile our mobile will be zoomed out and will loss it’s beautiful looks. This is why I said you should always use this two Meta tags whenever you can. This will really help you to make your website easy for search engines and browsers to read and understand. Your users will only receive the best from them only if you give sufficient information to them. You will not only have to use these two but these are the main ones. The perfect documentation for viewport is given by Google.
The viewport Meta tag looks a bit difficult to understand. It has some advanced features that only developers touch and non-coders should stay away from those.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
So now we have talked about two of the most important ones we will jump to some others which is used widely. The first one is description:
When I said the example of Meta tags I just wrote this. Description Meta tag is used to give a small description about what the page contains. I just want to show how this work in a Wordpress blog.
This is how it looks to add a description Meta tag in Wordpress. You will see this kind of box that says, Modify your meta description by editing it right here... In that box you can add whatever you like. Whatever you add will be displayed in Google and other search engines.
In Google, every search result is displayed with three main things.
You will be surely familiar with titles. Every blog post will have a title that attracts the visitors. But whether it is a blog post or a home page, the page will have a title. If it is a homepage or category page then the text that we entered inside the title tag of head section is displayed in the search result. Whatever it is title tag is one of the most important things that a search engine checks in a web page.
Slug is the URL of the web page. This is also displayed in the Google results (I am taking Google for every example because I use it more often and loves it than any of the search engines). Slug is the second thing displayed in a search results after title. In Wordpress we can easily change the slug by adding the required slug in the slug box. But in HTML, adding slug is a bit difficult, you will have to Google it for an answer. According to many bloggers you should always you a great slug to get yourself ranked well. I will give you some tips for good slugs.
Trust me if you are not optimizing your post slugs from the very first post then finally you will come to a hard home work. Don’t think that you can easily change the slug after reaching 100 or 1000 posts. It will turn to a bit complicated one.
Description is the best place to talk to the users indirectly. The users should feel that they will get what they wanted from our website. You have to make the description the best, it may not help a lot with the SEO but trust me as a visitor I will always read the description and then enter the site. Almost 50 – 60 percent of the internet users do the same. Mostly if they are blog readers they will surely check the description before they enter your site. If your description helps them in one or the other way then they will surely visit your article read it and may also get an ad click or a purchase with that visit.
For example imagine that I have searched for the best social medias. At first I will be surely looking at the title but then I will be looking at the description.
The first result had a good title but the description was not good. The image above shows the best description that I have noticed in the first page of Google’s result. The description of this webpage attracts me because they have mentioned “-local search and discovery based social based social media platform that enables you to find the ideal places to go to with friends and loved ones. It also gives appropriate search results for the best food outlets....” These words felt great for me, it doesn’t mean that I have heard something un heard. These can be done in many of the social medias but this description gives me a curiosity on which social media will it be? Whether it is one that I use or is it a new one! This is what a blog or an article really needs. It should keep its readers interested. I like to compare these descriptions to the movies trailers. Both do the same thing keeps the users or the viewers interested.
Now you may have got some more information on how important these things are! So we will have a look at how description meta tag looks.
<meta name="description" content="Free Meta tags Generator Tool">
You can keep this such simple or you can add some vital information, so that user gets a bit interested to use your tool.
<meta name="description" content="Free Meta tags generator tool which will help you to generate simple meta tags and also complex og tags or twitter cards for your social appearance.">
However, always remember to keep it simple but interesting. I suggest not entering more that 140 characters for your site description. Remember these tips when you write your next Meta tag:
Meta Description tag is a bit tricky one for those who are new in blogging. if you are new in blogging try to start from first and then try the most advanced options. You may join for some courses to study SEO or you may also study it easily by the online articles which are written by oldest bloggers out there.
Not only descriptions have Meta tags but keywords also have Meta tags. Next is keywords Meta tag:
Structure of every Meta tag is the same but content changes a bit which delivers a great change in the output. We have told that sites like Wordpress and some other blogging platforms give much importance to keywords. Keywords are just small phrases which users search. We find out those phrases and set it as our focus keyword. Means we target those who search for that particular keyword. Do you remember our search for best social media sites? Those who appeared in the first position were just focusing on us. We should visit their site, that’s what they want. So they targeted the keyword “best social media sites”. Few years back setting a focus keyword was very important for those who want their site to rank first but today search engines have become smarter than ever; they can now automatically detect keywords of a page and arrange them. So remember that whether you set a keyword or not they are watching you and your site.
Before we end this section I would like to introduce you SEMrush, a great SEO tool which almost free. Actually it is not free 30% – 40% of them are free but other 60% of them is not free.
The above image displays how a free SEMrush homepage or dashboard looks like. You will have to take one of their plans to get all their features unlocked. The smallest upgrade is PRO upgrade which costs around $99.95. I suggest you to play around with the free version and then carry own exploring what free version offers. Then when your site or blog grows you can upgrade it as your wish. If you wish to have it now then you can have it. However, without knowing SEO there is no use of any softwares or sites like this.
The very next and probably the last tag is author Meta tag:
Author Meta tag is used to credit the author or the creator of this website. This tag is mostly avoided by the developers because there is no effect for this tag on any search engines. Like all other Meta tags this tag won’t help in search engine rankings. This is one of the tags that you can avoid. I usually avoid this all the time but it is your preference.
There will always be a different and advanced version of any invention or any creation. The same follows here. OG tags were created by Facebook in 2010. In 2010 it was only used by Facebook to make a link or a page shared via Facebook look more stylish and also to transfer more information. Normal Meta tags were not enough for Facebook to transfer every required information which leads to creation of OG tags.
OG tags are pretty similar to our normal Meta tags:
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
This is the title tag of OG tags. The formats of OG tags are similar to normal tags. In normal tags we write meta property =”description” but in OG tag we write meta property=”og:description”. The only difference is that we add og: in front of the description. As I said it was first used by Facebook only but now it is used by many social medias. All most all social medias like Twitter, Google, LinkedIn uses the same OG tag to get the best.
Og tags can do a lot more than you can expect. OG tag can set a different title, description, image and a lot more.
og:url is a tag for social medias to understand to which URL this content is linked to. In this tag you just need to enter the URL of your post or your web page.
<meta property="og:url" content="http://www.example.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
This should be our first tag so that Facebook or any other Social Media can that all other tag as the information of this URL.
<meta property="og:type" content="article" />
Type og tag is one another tag which you can avoid if you wish too. The type says what your page has whether it is an article or a gallery or something else.
Title tag helps to change the title of the page or article displayed in social media.
Here in the above image you can see the title and description. Both this can be set by meta tags but not the image. So we will use OG tag to display and image and OG tag is also used to give different title and description in social medias while keeping the real name and description via meta tags to the search engines.
og:description is same as our common Meta description tag. You will have to just enter the description that you want in your social exposure. You can change it according to your wish. You can keep something that interests your social media fans but make sure that you don’t cheat your social fans. If you do so then you are not going to leave much longer in the web. You should keep it in a medium length. Facebook suggest keeping it in between 2 to 4 sentences.
<meta property="og:description" content="How much does culture influence creative thinking?" />
You should mention the URL of the image that should appear when some share your link. According to Facebook there are some guides to make a perfect image for sharing. Facebook says that your image should be at least 1200 x 630 pixels for the best display on high resolution devices. However, you may also use any images above 600 x 315 pixels to display link page posts with larger images. And the images can be in a size up to 8 mb any image more than that is not accepted by Facebook.
However, there is also a option to use small sized images in Facebook. If you want your shared links to look good with small images you can link to small images but Facebook says any image which is smaller than 600 x 315 pixel will be displayed as a side image.
The minimum size of an image is 200 x 200. If you use any image smaller than that you will probably get a error when you debug your URL via Facebook’s Sharing Debugger.
Now what is Sharing Debugger, you may heard of debugging in mobile apps or may be in some of the videos. This is the same method. You can use Facebook’s Sharing Debugger or Facebook crawler to see the information that is used when your website content is shared on Facebook, Messenger and other places.
Follow some simple steps to test your web page:
You will see a page which is pretty similar to this. Some changes may occur according to the device or the screen size of the device which you are using but still the basic styles are the same.
And then you will have to click on the Debug button.
After click Debug button there are two possible outcomes. First one is to get a error message actually it not a error message but still know as a error message which any new blogs or website will or may get.
The error says that “The URL hasn’t been shared on Facebook before” followed by a “Fetch New Information” button. You are displayed with this message because no one has ever shared this URL in Facebook. Facebook will have details of one URL if it is already shared in Facebook. Maybe this will be one of your new blog post which no users have shared, so how you are going to get out of this? I know that you have got the solution. You just need to click that button. Facebook has crawlers like search engines have so Facebook will crawl that URL for OG tags if it is not shared on Facebook already.
Then after you click that button you will provided with a new page which contains a lot of information.
This page has a link preview section where you can see how your article or web page looks on Facebook and also contains a lot of information.
As you have seen it pretty difficult to create meta tags. You will have to first create simple Meta tags and then you will have to create OG tags and maybe for more powerful working you will also have to create Twitter Cards (I haven’t talked about twitter tags because it is not used commonly. Even twitter uses OG tags. However, you can check it out if you want.).
So creating all this with much knowledge of coding is really risky or may be time consuming. Even a small mistake can break your appearance in social medias. So something is needed for non-coders to get these things in their website too. Almost all blogging platforms and site builders come with this technology still you will need to edit or change it according to your wish. Our meta tag generator will help you to do it so well.
Our Meta tag Generator will help you to create new mete tags for your website, blog and any content.
The very first thing you need to do is to visit our Meta tag Generator. After visiting our Metatag generator you will need to give your site details to our meta tag generator so that our meta tag generator can give you outputs in code. Our Metatag Generator first asks you about your site name. It needs the name you want to display or in our language it is title of our article or the web page. Our Metatag generator also gives you a warning that you should enter a site title under 70 characters.
The second box is for description, here also our metatag generator will gives a suggestion to keep it below 150 words. I have already said that you should keep it between 135 and 160 characters. Our metatag generator doesn’t like to go way to down or up. It keeps in the perfect place so that all your contains will display in the Google search or any other search engines without any obstacle. It won’t be cropped or won’t look bad.
The next thing that you need to add is keywords. Our meta tag generator says that you should add keywords separated with commas. Think that your keywords are “Social Medias”, “Best Social Media Sites”, “New And Trending Social Media Sites” so when you add it in our meta tag generator you will need to add it as:
Social Medias, Best Social Media Sites, New And Trending Social Media Sites
Then you have some dropdown to fill up. The first one asks you whether to allow robots to index your website? It means that whether you should allow crawlers to index this page. If you select no then this page won’t be displayed in searches. The second one is whether to allow robots or crawlers to follow the links in the page or no-follow the links of the page. The next option is about the version of HTML which we talked before. And then the next question asks which your site language is. Then there are two optional ones. The first one is about how often does search engines look for changes in your page. I like to un-tick it. And then the next box is for author. After completing all the steps just fill the image Verification and then click Generate Metatags to get the required Metatags. You can copy that to your site’s HTML.
That’s All! We will end it for now and will join you with a another crazy article.