The Ultimate Guide to Meta Tags in SEO

Meta Tags

Meta Tags provide information about the webpage in the HTML of the document. Usually at the “head” of the page, and so are only visible to search engines. The “meta” stands for “metadata”, it can be read by search engines and web crawlers.

Search engines such as Google use metadata from meta tags to understand additional information about the webpage. They can use this information for ranking purposes, to display snippets in search results, and sometimes they can ignore meta tags.

Without meta tags you can’t reach readers organically search. The Meta tags appear only in the page’s code and anyone can check them via source code (Ctrl+U).

The Most Important Meta Tags in SEO :

The 8 major Meta tags which can improve the optimization of your startup business or running website.

1) Title tag
2) Meta description
3) Canonical Tag
4) Alternative text (Alt) Tag
5) Robots meta tag
6) Social Media Meta Tags (Open graph meta tags and Twitter cards)
7) Header tags
8) Responsive Design Meta Tag

* Title tag :

The title tag is the first HTML element that specifies what your web page is about. Title tags are important for SEO and visitors because they appear in the search engine results page (SERP) and in browser tabs.

Syntax :

<head>
     <title>This is Title Sample (Title tag under 60 characters)</title>
</head>â€‹

* Meta description :

A meta description is an HTML element that sums up the content on your web page. Search engines typically show the meta description in search results below your title tag.

Syntax :

<head>
 <meta name=”description” content=”This is a meta description sample. We can add up to 160 characters.”>
</head>

* Canonical Tag :

The Canonical tag is an HTML link tag with “rel=canonical” attribute that is used if you have a single page URL that has the same content with other multiple page URLs.

A canonical tag Syntax :
<link rel=”canonical” href=”http://example.com/” />

* Alternative text (Alt) Tag :

The Alt tag is important for any images, as search engines cannot read them, so you need to add proper Alt text to the images so the search engine can consider them.

Syntax for Alt Text :

<img src="https://www.example.com/abc.jpg" alt="abc" />

Here are some tips for your alt text tags :

* All images should have informative filenames
* Alt text needs to be short clear and to the point
* Always use the original, right type of image, as this is an essential step towards success
* Create an image sitemap
* Use 50-55 characters (up to 16 words) in the alt text
* Use an optimal file size without degrading its quality for faster page loading speed

* Robots meta tag :

The Robots Meta tag is an HTML tag that provides instructions to web crawlers on whether to index or noindex a web page.

The Robots Meta tag has four main values for search engine crawlers:

FOLLOW – The search engine crawler will follow all the links in that web page
INDEX – The search engine crawler will index the whole web page
NOFOLLOW – The search engine crawler will NOT follow the page and any links in that web page
NOINDEX – The search engine crawler will NOT index that web page

Use the following syntax for your robots meta tag :

<meta name=”robots” content=”noindex, nofollow”> Means not to index or not to follow this webpage.
<meta name=”robots” content=”index, follow”> Means index and follow this webpage.

* Social Media Meta Tags (Open graph meta tags and Twitter cards) :

Open Graph Meta tags are designed to promote integration between Facebook, LinkedIn, Google and the website URLs that you shared on these platforms.

Open Graph tags :

<meta property=”og:type” content=”article” />
<meta property=”og:title” content=”TITLE OF YOUR POST OR PAGE” />
<meta property=”og:description” content=”DESCRIPTION OF PAGE CONTENT” />
<meta property=”og:image” content=”LINK TO THE IMAGE FILE” />
<meta property=”og:url” content=”PERMALINK” />
<meta property=”og:site_name” content=”SITE NAME” />â€‹

Twitter Cards:
Twitter cards work in a similar way to Open Graph, except you add these special Meta tags only for Twitter. Twitter will use these tags to enhance the display of your page when shared on their platform.

<meta name=”twitter:title” content=”TITLE OF POST OR PAGE”>
<meta name=”twitter:description” content=”DESCRIPTION OF PAGE CONTENT”>
<meta name=”twitter:image” content=”LINK TO IMAGE”>
<meta name=”twitter:site” content=”@USERNAME”>
<meta name=”twitter:creator” content=”@USERNAME”>â€‹

* Header tags :

You can use header tags to change font sizes and signify information hierarchy on a page.

The heading elements go from H1 to H6. H1 is the largest and most important level, and H6 is the smallest and least important.

Syntax :

<h1>Heading Tag 1</h1>
<h2>Heading Tag 2</h2>
<h3>Heading Tag 3</h3>
<h4>Heading Tag 4</h4>
<h5>Heading Tag 5</h5>
<h6>Heading Tag 6</h6>

* Responsive Design Meta Tag :

The responsive design meta tag, which is also called the viewport meta element. You can find the viewport element in the head section of your web page.

Use the following syntax to add a responsive design meta tag :

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

SEO TUTORIAL