Meta tags for SEO- Beginners guide: Dj Techblog

Q: What is meta viewport tag?

what is viewport? A viewport is users visible area of a webpage. It varies with the device, and will be smaller on a mobile or tablet than on a computer screen. Earlier webapges used to meant for larger screens only. But with increased mobile users responsive and dynamic webpages are must which can adjust screen automatically.

Meta tags provides search engine and browsers additional meta information to better understand your websites. This leads to increase page rank in SERP, drive more traffic from social media, and improves on page seo.

What is html meta tags?

Meta tags are metadata about a html document or a webpage. It provides some additional meta information about the html document to the search engine bots and the browsers. Meta tags always reside in the <head> section of the webpage. Contents of meta tags are not shown in the page itself because it is not for the viewers. It is for the browsers that uses this meta information provided by the meta tags to render the webpage.

Though a browser will not show any kind of error if it does not find any meta tags, but it is always advised to use for better view experience to users across various devices. Search engine crawlers also uses this extra piece of meta infomation to decide what this page is all about, like what keywords has been used, what these keywords mean and what content it delivers.

Why html meta tags are important for SEO?

Here, we will see a list of meta tags. We will discuss, how useful they are to increase overall performance of the website across various devices as well as in search engine result pages(SERP). We will also see, how to increase site impression in search engines and click through rate. When you add meta tags in html source code, make sure that meta tags matches with site contents, because a perfectly alligned content and meta tags, can drive huge traffic towards any website. With facebook and twitter getting popuplar, these are being seen as important platforms to drive more users and traffic into a website. So, it has become very important to optimize your website for social media also. Social media optimization starts with contrroling what contents should appear, when someone shares url of your website in the social media.

So, lets start.

1.What is meta keywords tag?

It mentions the keywords for which you want your website to rank in SERP. However, it has become obsolete, we need not use this meta tag. Even if we use it, we should refrain from keyword stuffing.

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

2.What is meta description tag?

In this tag, you should give a brief description of your page title in within 160 characters. Any thing more than that will be discarded by the search engine crawlers, so keep it short and simple. Do not use keyword stuffing, instead write simple sentences. Meta description tag is read by the web crawlers to get a overview of the webpage content. Any missmatch in the description and content can hamper your on page seo.

<meta name="description" content="5 Meta tags that provides search engine extra information to increase site visibility in SERP, drive more traffic from social media, and improve on page seo." />

3.What is meta viewport tag?

First, what is viewport? A viewport is users visible area of a webpage. It varies with the device, and will be smaller on a mobile or tablet than on a computer screen. Earlier webapges used to meant for larger screens only. But with increased mobile users responsive and dynamic webpages are must which can adjust screen automatically.

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

The width=device-width tells the browser to set the viewport according to device. The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. As, we can see viewport meta tag makes a webpage dynamic and responsive in nature by adjusting the screen automatically.

Responsive nature of a website makes it mobile friendly. With daily number mobile users growing rapidly it is impossible to rank in search engines without mobile friendly webpages. So, viewport is one of important meta tag to not miss.

4. What is open graphics(og) meta tag

Webpages are shared in the facebook as a url. To control the content that appears in facebook when someone shares your url in the facebbok, we need to use og tag. Facebook crawler read these social media meta tags included in the webpages to determine what should appear in the facebook feed. Let's see how to implement social media tags in webpages.

<meta property="og:url" content="http://www.example.com/index.html" />

<meta property="og:type" content="article" />

<meta property="og:title" content="5 Meta tags you should not forget to add in your website for SEO- A beginners guide" />

<meta property="og:description" content="5 Meta tags that provides search engine extra information to increase site visibility in SERP, drive more traffic from social media, and improve on page seo." />

<meta property="og:image" content="http://example.com/image.jpg" />

The og:url defines the canonical URL of the webpage, that is being shared in the facebook.

The og:type defines the type of the webpage content. The default type is website.

The og:title defines the title of the content that you wanted to be appear in the facebook.

The og:description here you provide a brief description of the content has been shared.

The og:image defines the URL of the image that appears when someone shares the content to Facebook.

For more, visit The Open Graph protocol .

5.What is twitter meta tag

There are a definite set of twitter tags as well to control the content that appears in the twitter when someones shares your webpage url. Your webapge can be anything a website, blog or news article. Twitter tags are also very similar to og tags and it is quite easy to implement them in your webpages. Lets's see how to add twitter meta tags in webpages.

<meta property="twitter:title" content="5 Meta tags you should not forget to add in your website for SEO- A beginners guide: Dj Techblog" />

<meta name="twitter:site" content="@DebabrattaJena" />

<meta property="twitter:creator" content="@DebabrattaJena" />

<meta property="twitter:image" content="https://www.example.com/image/meta-tags-for-seo.jpg" />

<meta property="twitter:card" content="summary_large_image" />

<meta property="twitter:description" content="5 Meta tags that provides search engine extra information to increase site visibility in SERP, drive more traffic from social media, and improve on page seo." />

The twitter:title defines the title of the shared content in the twitter. It is same as the og:title.

The twitter:site defines the username of the website in the twitter if any.

The twitter:creator defines the username of the content creator in the twitter. For personal websites or blogs twitter:site and twitter:creator generally remains same, if you have not created a separate twitter account for the webiste or blog.

The twitter:image defines the URL of the image that you wanted to be appear when someone tweets your web content is in the twitter. The minimum image dimension is 300X157. For details about image dimension, go to Twitter cards.

The twitter cards are helps you attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a Card added to the Tweet that's visible to their followers.

The different twitter cards which you can add to your meta tags are summary card summary card with large image player card app card. For detailed explaination, go to Twitter cards.

The last one is twitter:description which is same as og:description. It defines a brief description about the content tweeted on the twitter.

Note: Always provide absolute url of the sources in meta tag. Because these URL are used by facebook and twitter crawlers to gather information about your content.\ Relative URL dont work here in meta tags.

Dj Techblog