Order of HTML meta tags
You are correct. The order of those tags do not matter for SEO. They just need to be present. Whomever said that is obviously clueless (and of course running an SEO business. Sigh).
While for the purposes of SEO, it may be true that the order is not significant, it is not true when considering other things like security, content (character) display, or loading speed. It is a good idea to order your page’s head roughly thus (presuming HTML5 for syntax):
<head>
So far in the document, you should not have used any non-ASCII characters, so character encoding is not an issue yet. But the likelihood of using non-ASCII characters goes up markedly once you open that head tag. Accordingly (and assuming that you are not declaring your character encoding programmatically or at the server level), you should make the next statement your character-encoding declaration. This also satisfies parsers/browsers/agents that would be sniffing for character encoding statements:
<meta charset="utf-8">
The following two (X-UA-Compatible and viewport) are recommended by the folks at Bootstrap (as recently as v3.3.4). While I am nearly positive that these recommendations are based on performance, most of what I would say would be speculative:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
If you are thinking about device-agnostic design/development (inclusive of smaller, non-desktop user agents), you should include the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
Finally, the title:
<title>Ingenious Page Title</title>
Next, you offer the CSS as soon after the title as possible (no ‘daylight’ between them):
<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-2.css">
If you are using page-level styles, they would go here. This is largely because of the ‘cascading’ nature of CSS: namely the last style declaration of identical levels of specificity (such as two statements that target a paragraph p). In order to make overriding external styles easier (i.e. without using greater specificity, or !important), you should put page-level styles after external styles (<link>s). Also, it is generally inadvisable to use the @import directive in page-level styles, because it will impede the concurrent downloading of other style assets:
<style>body{color:black;}</style>
This is the point where it seems most appropriate to put meta tags, favicons, and other cruft. It is arguable that favicons or similar assets (e.g. iOS app images) would be loaded before most meta tags, because it gets the downloading of those assets started marginally sooner.
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-icon.png">
<meta name="description" content="Some information that is descriptive of the content">
<meta name="generator" content="Microsoft FrontPage 2002">
Because it blocks/delays rendering, if you intend to require scripts, load them as late as is reasonable. If they must be in the head, you might load them before the close of the head (</head>). If you can load them later, put them before the close of the body tag (</body>).
<script src="script-1.js"></script>
<script src="script-2.js"></script>
</head>
It seems unimportant in most cases to pay much attention to the order of meta tags for SEO purposes, given that indexing bots (i.e. search engine spiders) are going to consume the whole page. Otherwise, how would they index a page’s content, or update that index later?
It is notable to me that for all that we think we know, and all the recommendations that we find on the web (even from places like Google and Bing Webmaster Tools, etc.), sites like Amazon, Google and other folks who clearly care about such minuscule performance gains don’t follow these rules.
From a functionality point of view the following from Bootstrap seems to be the better order of the meta tags:
1) <meta charset="utf-8">
2) <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
3) <title></title>
4) <meta name="description" content="">
5) <meta name="viewport" content="width=device-width, initial-scale=1">
According to the people at Google, what matters for SEO is
- being mobile friendly
- title and description
- unique and worthwhile content
If your site is not mobile friendly they do not even look at 2) or 3). If it is mobile friendly they may use the title and description when they list your site. No guarantees on that. They may decide to come up with their own description based on what they find on your site.
If your content is plagiarized or repetitious and if you try to stuff it full of keywords or use other 'BlackHat' techniques, those things will hurt you and possibly ban you.