Mefth Loader Gif

HTML Meta tags you have never seen before

Last Updated: 5 months ago
HTML meta tags

What is an HTML Meta Tag, And how can It benefits to your website?

In today's world of web development, it is important to understand the power of HTML meta tags. HTML meta tags allow you to provide vital information about your website, which can greatly improve its visibility, credibility, and ranking. In this article we'll discuss what an HTML meta tag is and how it can benefit your website.

What is an HTML meta tag?

An HTML meta tag is an element that provides information about a web page. Meta tags are not visible to users and only appear in the code of a web page. Meta tags are used by search engines to help index and categorize a web page.

Meta tags can be used to provide information such as the author of a web page, a description of a web page, keywords for a web page, and the last time a web page was updated. Meta tags can also be used to redirect users to another web page.

Benefits of using HTML meta tags

HTML meta tags are snippets of code that provide information about a web page. They are used by search engines to help index and rank a website. Meta tags can also be used to provide social media platforms with information about a website.

Some common benefits of using HTML meta tags include:

  • Helping search engines understand your website's content
  • Improving the visibility of your website in search engine results pages (SERPs)
  • Attracting social media users to your website
  • Increasing the click-through rate (CTR) of your website

Types of meta tags

There are five primary types of HTML meta tags:

  • 1) Meta tag that can help you to make the web page responsive on all devices.
  • 2) Meta tags that provide information about the page itself. These include the title tag, which contains the title of the page, and the meta description tag, which contains a brief description of the page.
  • 3) Meta tags that specify how the page should be indexed by search engines. These include the meta robots tag and the noindex tag.
  • 4) Meta tags that control how social media sites display information about your page when it is shared on their platform. These include the Open Graph protocol and Twitter Cards.
  • 5) Meta tags that provide website owners with additional information that can be used to improve their website. These include Google Analytics tracking code and Bing Webmaster Tools verification code.

How to add meta tags to your Website

If you want your website to be successful, you need to make sure it is properly optimized for search engines. One of the most important things you can do to optimize your site is to add meta tags.

The types of Meta tag codes

1)Here are the meta tags for web page encoding & responsive

<meta name="viewport" content="width=device-width, initial-scale=1" />  <!-- USES TO SET THE WIDTH AND SCALING OF THE VIEWPORT SO THAT IT'S CORRECTLY SIZED ON ALL DEVICES, PARTICULARLY MOBILE DEVICES. -->  

2)Here are the meta tags for Title, keyword and description that helps you in your SEO

<meta name="title" content="TITLE OF THE CONTENT" />    
<meta name="Keywords" content="KEYWORDS OF THE CONTENT" />    
<meta name="description" content="DESCRIPTION OF THE CONTENT" /> <!-- USE 150-160 CHARACTERS -->     

3) These are used to how the page should be indexed by search engines

<meta name="copyright" content="COMPANY NAME" />    
<meta name="distribution" content="global" />    
<meta name="rating" content="general" />    
<meta name="robots" content="index, follow" /> <!-- FOLLOW | INDEX | NOFOLLOW | NOINDEX  -->    
<meta name="audience" content="all" />    
<meta name="rating" content="5" />    
<meta property="article:published_time" content="2022-07-10T11:41:12+00:00" /> <!-- PUBLISHED DATE -->    
<meta property="article:modified_time" content="2022-07-11T00:00:00+00:00" /> <!-- MODIFIED DATE -->    

4) The open graph protocol and Twitter cards.

<meta property="og:url"content="WEB PAGE URL" />    
<meta property="og:type"content="CONTENT TYPE" />    
<meta property="og:title"content="TITLE OF THE CONTENT" />    
<meta property="og:description" content="DESCRIPTION OF THE CONTENT" />    
<meta property="og:image" content="URL OF THE THUMBNAIL IMAGE" />    
<meta property="og:image:alt" content="IMAGE ALT TAG" />    
<meta property="og:site_name" content="WEBSITE NAME" />    
<meta property="article:author" content="AUTHOR NAME" />    
<!-- GOOGLE+ META TAGS -->    
<meta itemprop="name" content="TITLE OF THE CONTENT">    
<meta itemprop="description" content="DESCRIPTION OF THE CONTENT">    
<meta itemprop="image" content="URL OF THE THUMBNAIL IMAGE">    
<!-- TWITTER META TAGS -->    
<meta name="twitter:card" content="summary_large_image" />    
<meta property="og:site_name" content="WEBSITE NAME" />    
<meta name="twitter:site" content="TWITTER USERNAME" />    
<meta name="twitter:creator" content="CREATOR TWITTER USERNAME" />    
<meta name="twitter:title" content="TITLE OF THE CONTENT" />    
<meta name="twitter:description" content="DESCRIPTION OF THE CONTENT" />    
<meta name="twitter:image" content="URL OF THE THUMBNAIL IMAGE">    
<!-- MAIN INFO META TAGS -->    
<meta property='og:email' content=''>    
<meta property='og:phone_number' content='750-143-7461'>    
<meta property='og:fax_number' content='+1-140-174-2451'>    
<meta property='og:latitude' content='35.213404'>    
<meta property='og:longitude' content='-115.4857156'>    
<meta property='og:street-address' content='5428 S California Ave'>    
<meta property='og:locality' content='Palo Alto'>    
<meta property='og:region' content='CA'>    
<meta property='og:postal-code' content='51487'>    
<meta property='og:country-name' content='USA'>    

5) Third party sites verification meta tags.

<meta name="google-analytics" content="TMNtSu0kv18ONeqM0I=">    
<meta name="google-site-verification" content="1jksjg883487374520">    

Here are another Meta tags thats that you may have never seen before.

<meta name='language' content='ES'>    
<meta name='HandheldFriendly' content='True'>     

Meta tags are HTML code that provide information about your website to search engines. When you add meta tags to your site, you are essentially telling search engines what your site is about, which can help them index your site correctly and improve your ranking in search results.

Adding meta tags to your website is relatively easy. If you are using a content management system like WordPress, there are usually plugins or modules that allow you to easily add meta tags to your site. Alternatively, you can directly edit the HTML code of your web pages and insert the meta tags yourself.

When adding meta tags to your website, there are a few things you need to keep in mind. First, make sure that each page on your site has its own unique set of meta tags. Second, don’t stuff your meta tags with too many keywords; this will likely result in search engines penalizing your site. Finally, remember to constantly update and tweak your meta tags as needed – as your website changes over time, so should your meta tags.

Tips for writing effective meta tag descriptions

An HTML meta tag is an element that provides information about a website. Meta tags are not visible to users, but they can be read by search engines and other web crawlers. Meta tags can be used to provide information such as the author of a website, a description of a website, or keywords that are associated with a website.

When writing meta tag descriptions, it is important to remember that these descriptions should be concise, accurate, and informative. In addition, meta tag descriptions should be written in such a way that they will be appealing to both search engines and users.

Examples of Good and Bad meta tags practices

When it comes to HTML meta tags, there are good practices and bad practices. Here are some examples of each:

Good practices:

  • Use relevant and keyword rich titles
  • Include a Meta description that accurately describes the page content
  • Use proper grammar and punctuation
  • Make sure your meta tags are up to date

Bad practices:

  • Using the same title and meta description for every page on your website
  • Stuffing keywords into your title and Meta description
  • Creating long, drawn out titles and descriptions
  • Not including a title or Meta description


HTML meta tags can be a great way to help improve the visibility of your website on search engine results pages. When used correctly, they can provide search engines with additional information about your page content and make it easier for users to find what they are looking for. In addition, HTML meta tags are simple to implement, so you should definitely consider using them if you want to give your website an SEO boost.

That's it for today. Hope it helps. Happy coding 😊
Writer Image Kifle Tesfay

Full stack Web developer, Founder of Mefth and Userparser.

Report for Comment or Reply

Mefth Loader gif

Login to Write... comment.

You must Login to write Comment.


Get Notified through your email for new Blogs.

You may like these posts