Meta Tags
Meta tags are part of the HTML tags that help search engines and visitors to describe your page content. They are added between the <head> section of the HTML page but they are not visible to the front of the site for the visitors. These Meta tags are only visible at code part of the website and can be view in page code. If you want to check and see the details of Meta tags, you have to check the “Source code” of the page. Just do right click on the opened website (any white or blank space) and choose the option “View Page Source” or you can use the short cut key Ctrl + U of your browser.
So, we can say that Meta tags are the key part of the webpage for all search engines that is available to the HTML code of the webpage and tell the search engines that what the page is about.
Do Meta Tags only important for SEO?
Well, I can say, no. You don’t need to rely only on Meta Tags. If you wish that your webpage rank good on Google, you have to highly work on good-quality of page contents. If you get success to connect your users with your content that boosts your ranking automatically. But if you have an only good setup of Meta tags but your content not able to attract or failed to engage your customer, that won’t work at all.
Which Meta Tags I have to use on my website?
There are number of Meta Tags that can be used on your website. Here I am going to share some of Meta Tags which will be good to have on your site.
1) Title Tag
The title tag is the first HTML element of your webpage and the second important part after the content. You can find the below code of any webpage to find the title. Google allows up to 60 characters as a title.
This tag is supported by all browsers and you can see it as your browser tab’s title like the below image.
Also, when you search to search engines, this title is displayed to search result:
There are certain key points and tips to get a good rank on search engine with your Title by using the word like Top 10, Best, Easy, Buy, Tips, etc. You have to add the main and targeted keyword of your content in the title tag but not all. Also, keep the Unique title for each page otherwise it considers as duplicate and creates a bad impression on search engines.
2) Meta Description
The Meta Description is also an HTML element that gives an overview of your page contents to the search engines. This description also shows the search engine search result page.
While working on a description, please keep the following things in your mind before add.
- Please don’t add any special characters and other HTML tags within the description.
- Use your target keywords in your description must.
- Make the description attractive which attracts the user to click on your site.
- You can add a promotional offer, discounts, etc within your description to attract customers.
If your page is providing a solution to any problem, please mention it.
3) Canonical Tag
The canonical tag is an HTML tag that has attribute “rel=canonical”. It might be possible that you have the same page to a different category and the URL of each page will be different. In that case search engine consider the duplicate content to multiple pages and it’ll create a problem for your site. So, in this case, you have to use the Canonical Tag. This tag has the URL of the main page even it is run on different URLs. Confused?? Let me explain to you here with a simple example:
Let’s assume that you are selling smartphones. So the same mobile can be listed in different categories and on different URLs. Like a mobile is listed under the price range like Smart Phones below 10,000 (https://www.yourdomain.com/under10000/mobilex.html) and also the same mobile listed to Mobile Brand category (https://www.yourdomain.com/brand/mobilex.html). So in this situation, mobile content and details will be the same as the only difference in the URL where they are listed.
Syntax:
<link rel=”canonical” href=”https://learn-and-share.in/” />
So, in this case, you have to use Canonical Tag and set the main URL of the mobile there (i.e. https://www.yourdomain.com/brand/mobilex.html) and ask to search engine that considers the given URL is main URL mobile and avoid other URL to indexing.
4) Robots meta tag
The Robots meta tag gives instructions to the search engine that the page needs to index or not to the crawler. You can use multiple values and also use multiple tags for different purposes.
Syntax:
<meta name=”robots” content=”noindex, follow” />
<meta name=”robots” content= “index, nofollow” />
<meta name=”robots” content= ” noindex , nofollow ” />
This tag has the following main values for the search engine.
- NOFOLLOW: This value tells search engines to not follow the links of this webpage.
- NOINDEX: This value tells search engines to not show this page in search results.
You can refer the following Google link for a complete guide on Robots Meta Tags with additional options and attributes:
https://developers.google.com/search/reference/robots_meta_tag
5) Social Media Tags (Open Graph & Twitter Cards)
Open Graph
These Tags are used to promote webpage to Google, Facebook, Linked In. It allows the developer to allow the content to be shown to social media partners when connected to the webpage. Generally, it’s used when user wants to share your website to their social page, it allows sharing the certain details of the content to share.
Syntax:
<meta property=”og:url” content=”URL OF THE WEBPAGE” />
<meta property=”og:type” content=”website” />
<meta property=”og:title” content=”TITLE OF THE PAGE OR PRODUCT” />
<meta property=”og:description” content=”DESCRIPTION OF THE PAGE” />
<meta property=”og:image” content=”IMAGE URL OF THE PAGE OR PRODUCT” />
Twitter Cards
Twitter Cards are similar to the Open Graph tag but it’s only used to share or link the content to Twitter only.
Syntax:
<meta name=”twitter:title” content=” TITLE OF THE PAGE OR PRODUCT”>
<meta name=”twitter:description” content=” DESCRIPTION OF THE PAGE”>
<meta name=”twitter:image” content=” IMAGE URL OF THE PAGE OR PRODUCT”>
<meta name=”twitter:site” content=”@UserName”>
<meta name=”twitter:creator” content=”@UserName”>
For the developer, it’s easy to use Twitter Cart because he has to copy the Open Graph code and need to change the tag names only. The dynamic data can be call with the same variable.
6) Schema Tags (schema.org)
Schema tags (semantic vocabulary) are the code that helps search engines to provide more informative results to your customers. By using the Schemas, you can maintain and promote your website data on the website in a proper manner. For humans, it’s easy to understand the content of your website but for search engines, it’s hard to completely understand about the page is related to. Different types of schema help search engines to understand the content of the page.
You can get more details of the scheme with the example from the official website: https://schema.org/docs/gs.html
Many of you get surprised to not find the meta tag of “Keywords”, right? But yes, it’s true that Google does not use the keywords meta tag in web ranking. In Sept 2009, Google officially announced the same. You can find more details and clear your doubts about this announcement from Google’s official site:
https://webmasters.googleblog.com/2009/09/google-does-not-use-keywords-meta-tag.html
Other than the above Meta Tag, it’s also important to use the following tags for your webpage contents.
7) Image ALT Tag
The ALT tag is a very important tag for Image. The search engine can’t read the content of your image. So to tell the search engine about the image, you have to use the ALT tag. You have to provide proper text to the Alt tag to consider it in search engines.
Syntax:
<img src=”http://www.yourdomain.com/20-per-off-banner.jpg” alt=”GET 20% Off on all purchase – offer valid up to 31 Dec”/>
Things you have to keep in mind while using Image Tag.
- Give the image name proper and meaningful. As you can see in the above example, the image name is 20-per-off-banner.jpg. So it’s more relevant to the image type.
- Don’t use too long text for the ALT tag.
- Don’t include any other HTML tags or characters like double quotes within.
- If you wish to image to be searchable, also generate the image sitemap too.
- Keep the image size optimized. So, it loads fast to the browser.
Tips: While creating an image you can also select the option of “Progressive”. In this way when a user has a slow connection, it will start to show blurry image and after that, it’ll start to show a clear image.
8) The Heading Tags
The HTML headings are only use for headings. it’s also important to use the different types of heading tags to your webpage. These tags will be visible to your visitor and help to understand the importance of the contents with different types of heading tags.
There are mainly 6 heading types of tags that are there and they are naming with h1,h2,h3,h4,h5, and h6.
Syntax:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
The tag number indicates the importance of the contents. Here H1 is considered as most important and h6 is considered as the lowest important.