Beginners Guide to Meta Tags

A webpage has different components assembled together. The content what you see on the browser helps readers to understand the purpose of the webpage. However, it is not sufficient for the search engine bots to understand the page. Here comes the help of metadata that you can use to inform more details about the page. In HTML, you can use <meta> tags to define the metadata of a webpage to instruct search engines. These meta tags are powerful and contribute their part to the success of your SEO campaign.

SEO Offer: Optimize your site with Semrush Pro special 14 days free trial.

Let’s have a look at some of the meta tags that are commonly used and emphasize what they are used for. That way you can check whether you are focusing on what counts in your SEO strategy. In addition, browsers also use some of the meta tag values to decide the way to display the content.

Defining Meta Tags

Technically, meta tags form a part of the HTML code found in the webpage headers. Also known as HTML elements, meta tags are text codes, which assist search engines to understand your site content better. They are highlights of the actual content found on your site page.

Their main aim is to describe what is contained on the webpage, which is why they are located in the <head> part of the HTML page instead of the <body>. As meta tags are contained in the HTML code, you may be the one applying these tags. And users will not see the meta tags on the frontend of the browsers. Though they can view the tags by viewing HTML source of your webpage.

Below is an example of how you can define some of the meta tags in the header section of the webpage.

<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Explain short description of your page.">
<meta name="keywords" content="Few keywords on your page">
<meta name="author" content="Page author name">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
Here is the content for your page.
</body>
</html>

As you can see the general syntax of using meta tag is as follows:

Meta tag – name – content

You should define the name value, in order to define the content value.

Summary of Meta Tags

There are many meta tags you can use on the page. However, below are some of the useful tags from search engines perspective.

<meta name="description" content=short description"/>
<meta name="keywords" content="keywords on the page"/>
<meta name="subject" content="subject of the page">
<meta name="copyright"content="copyright holder">
<meta name="language" content="two character language code like EN">
<meta name="robots" content="index,follow, noindex or nofollow" />
<meta name="revised" content="date of last revision" />
<meta name="abstract" content="content abstract">
<meta name="topic" content="content topic">
<meta name="summary" content="content summary">
<meta name="classification" content="type like business">
<meta name="author" content="name of author">
<meta name="designer" content="name of designer">
<meta name="reply-to" content="email id">
<meta name="owner" content="content owner">
<meta name="url" content="page URL">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache">

Let us explain some of the most used meta tags.

1. Meta Description

This is the part of the HTML meta tag that contains the short page description. Even though meta description is invisible to the visitors, search engines will use it as a short piece of text below the title tag in SERPs. The length of the description should be less than 160 characters so that it can fit in the search results. Although meta description does not decide the search engine position it is vital to gain good amount of click through rate.

Points to note when writing a meta description include writing a very compelling copy and including a bit of call to action. The meta description is a way of advertising what is on your page to the searchers and inviting them to click on your page. Use a friendly marketing tone to describe your page in order to draw a high CTR.

2. Meta Robots Tag

This represents a code that informs the search engine if it should index a page or not. The tags are to be inputted in the head section of the page. There are four primary values a meta robot tag will provide for the search engine. They are index, noindex, follow, and nofollow.

The noindex tag will send out a signal to the search engine crawlers that a certain page on the website is not to be included in the search result. This serves to keep specific content on your website from being accessed from search results. However, this is not to be used for hiding confidential pages from search engines, instead you should setup appropriate authorizations and use robots.txt directives.

3. Viewport Meta Tag

Also known as a responsive design meta tag, it is used to switch the web page layout to adapt to the device’s width. This is useful to responsively change the layout on mobile devices.

4. Social Meta Tags (Open Graph and Twitter Cards)

These tags control the display of your webpage on social media when someone shares the page. It describes the page content like the description, image, and title on social media. The open graph is useful for platforms like Pinterest, Google, Facebook, and LinkedIn while Twitter cards are useful only on the Twitter platform. The social media tags are quite useful for boosting CTR through social media sites.

Avoid Misusing Meta Tags

Earlier days, meta keywords are most powerful to influence search engines. This led to a situation that Google discarded the use of meta keywords completely. It is also a black hat SEO practice to provide different meta description not related to the content of a page. Ensure to avoid misusing and provide the correct and relevant details in the metadata section.

There is also no need to use all these meta tags on a single page. Content management systems like WordPress offers different plugins to insert these meta tags easily on all page of your site.

Custom Meta Tags

You can also create custom meta tags and use for different purposes. For example, you can store the Google Analytics code like below and use in the JavaScript to load it on each page.

Conclusion

You will realize now that meta tags are of different kinds and we have some that are very vital and others that are not. However, they provide an easy way to insert metadata to have a great impact on search engines and social sites.

Beginners Guide to Meta Tags

Defining Meta Tags