SEO Most Important Meta Tags Tutorial




SEO Most Important Meta Tags Tutorial

Hi Guys,

Today,I will explain most important meta tags in seo. We will show SEO Most usefull Meta Tags.Link building is especially often touted as the “single most important thing to optimize”.Part of that strategy includes using HTML meta tags – a crucial component for SEO success.

Here, I will give you full example for important seo meta tags bellow.

1: Title Tag

Title tag is your main and most important anchor.Title tag is typically appears as a clickable headline in the SERPs and also shows up on social networks and in browsers.


<title>SEO Most Important Meta Tags Tutorial</title>

This tag is placed in the <head> of your webpage and are meant to provide a clear and comprehensive idea of what the page is all about.The page’s title still is the first thing for a searcher to see in SERPs and decide if the page is likely to answer the search intent.

The simple experiment can also show that Google no longer needs your title tag to include an exact match keyword to know the topic the page covers.


->The titles up to 50-60 characters long (for them not to get truncated in the SERPs). Remember that long titles are shortened to about 600-700px on the SERP.

->Give each page a unique title that describes the page’s content concisely and accurately.

->Create use of your brand name in the title, even if it ends up not being shown on the SERPs, it’ll still make a difference for the search engine.

2: Meta Description Tag

The Meta description also resides in the of a webpage and is commonly (though definitely not always) displayed in a SERP snippet along with a title and page URL.

<meta name="description" content="NiceSnippets Blog provides you latest Code Tutorials on PHP, Laravel, Codeigniter, JQuery, Node js, React js, Vue js, PHP, and Javascript. Mobile technologies like Android, React Native, Ionic etc."/>

Description tag occupies the largest part of a SERP snippet and invites searchers to click on your site by promising a clear and comprehensive solution to their query.

This description tag is impacts the number of clicks you get, and may also improve CTR and decrease bounce rates if the pages’ content indeed fulfills the promises. That’s why the description must be as realistic as it is inviting and distinctly reflect the content.


->Cretae page a unique meta description that clearly reflects what value the page carries.

->Google’s snippets typically max out around 150-160 characters (including spaces).

->Description tag in use an eye-catchy call-to-action, a unique proposition you offer, or additional hints on what to expect ‘Purchase’,'Blog' constructions, etc.

3: Meta Keyword tag

The Meta keywords are types of meta tags in the HTML source code of a webpage. They describe the content of a website shortly and concisely, and are therefore important indicators of a website's content to search engines.

Meta keywords are generally written in lower case, and separated with a comma. Today, meta keywords are irrelevant for search engine optimization and don't have any ranking relevance.

<meta name="keywords" content="metatags, metakeywords" />


->Always use a unique,and never stuff your keyword in this tag.

->Google’s snippets typically max out around 150-160 keyword.

4: Image Alt Attributes

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The image alt attribute is added to an image tag to describe its contents.The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

<img src="img_car.jpg" alt="car image" width="500" height="600">

Google also says it outright: helping search engines understand what the images are about and how they go with the rest of the content may help them serve a page for suitable search queries.A thought-out image alt description, according to Mueller, is also vital if you want to rank in Google Images.

Search engines can’t read images, which are a crucial part of many websites. Alternative text (alt text) is a way around that issue.


->Always use a proper description, and never stuff your keyword in this tag

->Do your best to optimize the most prominent images (product images, infographics, or training images), images that are likely to be looked up in Google Images search.

->Use 50-55 characters (up to 16 words) in the alt text

->The alt text clear and descriptive enough, use your keywords reasonably, and make sure they fit naturally into the whole canvas of page’s content.

5: Open Graph Meta Tags and Twitter Cards

These tags make social media syncing easier.Open Graph was initially introduced by Facebook to let you control how a page would look when shared on social media.

Here is a sample of How Open Graph tags look like in standard HTML:


The og:title tag you put the title which you want to be displayed when your page is linked to.

<meta property="og:title" content="Title Of Page" />


your page’s description. Remember that Facebook will display only about 300 characters of description.

<meta property="og:description" content="Description Of Page Content" />


The og:image tag you can put the URL of an image you want to be shown when your page is linked to.

<meta property="og:image" content="Link to the image file" />


The og:image tag you can put the URL of an page.

<meta property="og:url" content="Permalink" />

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

Here is a sample of How Twitter card look like in standard HTML.


The twitter:title tag you put the title which you want to be displayed when your page is linked to.

<meta name="twitter:title" content="Title Of Page">


your page’s description. Remember that twitter will display only about 160 characters of description.

<meta property="twitter:description" content="Description Of Page Content" />


The twitter:image tag you can put the URL of an image you want to be shown when your page is linked to.

<meta property="twitter:image" content="Link to the image file" />

Use the specific social media meta tags in order to boost how your links look to your’s not a huge tweak, and it doesn’t influence your rankings on the search engines.however, by configuring how the links to your pages look, you can greatly boost your ctr and ux metrics.


->Make basic and relevant metadata using Open Graph protocol, and test the URLs to see how they will be displayed.

->Twitter cards and validate them once done.

6: Viewport Meta Tag

The final important meta tag is the responsive design meta tag, which is also called the viewport meta element.Viewport meta tag allows you to configure how a page would be scaled and displayed on any device.

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

Where “width=device-width” will make the page match the screen’s width in device-independent pixels, and “initial scale=1” will establish a 1:1 relationship between CSS pixels and device-independent pixels, taking screen orientation into account.Viewport meta tag has nothing to do with rankings directly but has a tone to do with the user experience.

It’s especially important considering the variety of devices that are being used nowadays and the noticeable shift to mobile browsing.As with many of the tags and tweaks we’ve discussed in this article, taking care of the viewport meta tag will be something your users appreciate.

7: Robots Meta Tag

The robots meta tag tells search engines to either index or non-index your web page. A page-level robots meta tag with content=“noindex” attribute instructs the search engines not to index any given page.

While these tags don’t correlate with rankings directly, in some cases they may have some impact on how your site looks in the eyes of search engines overall.

In some other cases, you may want certain pages to stay out of SERPs as they feature some kind of special deal that is supposed to be accessible by a direct link only (e.g., from a newsletter).you probably wouldn’t want such pages to be taken into account while evaluating the overall quality of your site.

Here the following syntax for your robots meta tag.

Means not to index or not to follow this webpage.

<meta name=”robots” content=”noindex, nofollow”>

Means index and follow this webpage.

<meta name=”robots” content=”index, follow”>


->Close pages that unreasonably waste crawl budget.

->Make sure carefully you don’t mistakenly restrict important pages from indexing.

->Close unnecessary/unfinished pages with thin content that have little value and no intent to appear in the SERPs.

It will help you.....