Meta tags are located in the <head> section of a HTML document and they provide information about the actual webpage, mostly for search engines. However it’s important to note that they don’t affect rankings in search results noticeably. Probably search engines are rather looking for abuse in these tags and penalise it in some way. So use them wisely!
Basic, must-have meta tags
The following meta tags should be on every page, no matter what:
Content type and character encoding
It declares
character set which impacts how your page renders in the browser. UTF-8
encoding is recommended because this unicode-based encoding can support
many languages.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta charset="UTF-8" />
The contents of this tag are generally shown as the title in search results. Make it unique and keyword-relevant in 70 characters.
<title>Page title</title>
Description
This text will appear below your title in Google search results. Describe the actual webpage in maximum 155 characters.
<meta name="description" content="A description of the page" />
Viewport
Controls the layout on mobile browsers. The width=device-width part tells the webpage to be as wide as the screen of the device. The initial-scale=1 part sets initial zoom level when visiting the page. 1 means no zoom. More detailed information about this tag can be found here.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Make sure that every page of your website has a unique title and description relevant to the content. According to Google’s guidelines these tags are understood by Google bots.
Social Meta Tags
Social meta tags are important for social media sharing. With their help you can decide how your content should appear when it’s being shared. You can mark different type of contents on a page like image, video, etc.
Facebook Open Graph meta tags
Open Graph has become very popular, so most social networks default to Open Graph if no other meta tags are present.
Link: http://ogp.me/
Twitter cards meta tags
With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website.
Link: https://dev.twitter.com/cards/overview
Schema.org (Schema)
Schema.org was developed by Google, Microsoft, Yahoo and Yandex with the aim of creating a universal markup vocabulary that search engines can understand. Schema microdata can be added directly to the HTML code to define contents of a web page. This way search engines like Google can pull out relevant parts in the form of rich snippets, making the results page more informative, e.g.: displaying article image, ratings, opening hours, etc. Besides, it helps you to stand out in search results which means probably more people will click on your site. Here you can learn everything about Schema: http://schema.org/docs/gs.html
Dublin Core initiative
Dublin Core is also a metadata standard that can be used to describe resources on the web (images, video, web pages, etc.) and also physical resources like books, DVDs and objects like artworks.
Since Dublin Core documentation is a little bit dry, here is a nice Dublin Core metadata generator to generate meta tags for your website.
There are several other, less important meta tags which I didn’t list here. You can find a complete list of recommended/unrecommended meta tags and other things that could go in the HTML <head> here.
