DEV Community

Cover image for Meta Tags for SEO: A Simple Guide
Chaitanya Chaturvedi
Chaitanya Chaturvedi

Posted on

Meta Tags for SEO: A Simple Guide

So what are meta tags? Meta tags are basically tags that enclose meta data that are used in the HTML of a webpage. As i said it is basically a meta data so that means what ever you enclose within a meta tag will not appear on the webpage itself but will be used by the search engines and social medias like a meta data for the webpage. Why are they Important for SEO? They are very important for SEO because the data enclosed within different types of these meta tags determine your webpage's rank in the search engines. Well definitely there are other factors that counts in the SEO of a webpage like the content itself and then the page speed, security, Domain age, URL, Links, etc. But as a developer your part in the improvement of SEO would be to be give perfect and proper meta tags. So today i bring to you these essential meta tags that you should know and use in order to improve the SEO of your webpage. Lets see:

1) <meta charset="character_set"/>

You may be using different types fonts, smileys, symbols and emojis in your webpage which may be using one or more special characters which would be defined in a particular character encoding but not in the other you are using. And that may lead to the unsuitable display of desired contents in the webpage. So it is always a good idea to define a character encoding at the top of a webpage and that too which covers majority of characters so as to ensure your desired content is displayed properly. Generally UTF-8 is preferred as it covers almost all character encoding and almost all the browsers supports it.
<meta charset="UTF-8">

2) <meta name="viewport" content="width=device-width, initial-scale=1.0">

From HTML5 developers got the control over the viewport of a webpage. The viewport meta tag basically lets you decide the dimension and scaling of your webpage when it opens up in a browser. width=device-width tells the browser to follow the screen width of the device where the page is displayed. initial-scale=1.0 tell the browser to display the page with the following initial zoom level.

3) <meta name="title" content="title of the page">

The title tag as it sounds is basically used to define the title of a webpage. The more brief, better and accurate the title, the better the chance of high page rank.

4) <meta name="description" content="description of the webpage content">

The description tag as it sounds is basically used to describe the content of a webpage. The more brief and better the description, the better the chance of high page rank.

5) <meta name="keywords" content="HTML, CSS, JavaScript">

Again, the keyword tag as it sounds is basically used to provide keywords to the the search engines so that your webpage would be listed to the results whenever there will be a search that has the following keywords.

6) <meta name="author" content="John Doe">

Again, the author tag as it sounds is basically used to provide the search engine with name of the author of the webpage. Useful in case if the page tile and author both are same have the same name.

Also in case if your website is shared in social medias, there also you would want your website to have all the essential contents being displayed in the shared post. Again there are a lot of meta tags the let you control what to display in the shared post of your webpage but i will i will show you the following four important meta tags.

1) <meta property="og:title" content="John Doe Agency">

2) <meta property="og:description" content="Providing SEO solutions">

3) <meta property="og:image" content="http://johndoe.com/thumbnail.jpg">

4) <meta property="og:url" content="http://johndoe.com/index.html">

The og or open graph protocol is basically used by facebook while twitter has its own meta tags that just has 'twitter' prefixed instead of og

1)<meta name="twitter:title" content="John Doe Agency">

2)meta name="twitter:description" content=" Providing SEO solutions">

3)<meta name="twitter:image" content=" http://johndoe.com/thumbnail.jpg">

4)<meta name="twitter:card" content="summary_large_image">

Top comments (0)