Order of HTML meta tags

seo html meta-tags

9,087

Solution 1

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).

Solution 2

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.

Solution 3

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.

9,087

Kaivosukeltaja

Web Developer since 2000, currently using PHP, MySQL, Symfony, Drupal

Updated on September 18, 2022

Comments

Kaivosukeltaja over 1 year

A SEO company suggested we change the order of our HTML meta tags so that <title> and <meta name="description"> are the first two. They say this is to ensure search engines can utilize these two tags. I've been under the impression that the order of tags inside the document's head is not significant. Have I been wrong? Are there really search engines that assume that the first two tags are always title and description and give up looking for them if they aren't?
- Admin about 6 years
  
  See also on Stack Overflow: Can the order in which adding link and meta tags on head of a webpage have any adverse effect?
s_hewitt about 13 years

Can you provide a source or case study?
Ciaran about 13 years

Just opinion based on experience. Here's a SearchEngineWatch discussion on the topic - order doesn't matter: forums.searchenginewatch.com/showthread.php?t=16452
David Eldridge almost 9 years

While X-UA-Compatible, viewport and Apple touch icons were still (relatively) new in 2010, all were in use. HTML5 only affected the charset declaration's length. CSS, JS and image pipelining was a concern back then, as well as the (re-)rendering of pages subsequent to the application of CSS and JS. Notwithstanding that, I couldn’t find this information in one place (outside of the heads of html documents), and after stumbling across this question, it seemed good to do it here.
Brendan Vogt over 7 years

Good answer @DavidEldridge. But would you mind updating your answer to include application/ld+json scripts for structured data? For speed purposes. Where would it be best to put it? Should we treat it as external JavaScript files?
Bangkokian over 3 years

All CSS in the header is no longer a best practice for CWV.
David Eldridge over 3 years

@Bangkokian are you talking about style using the <style> tag (as opposed to the <link> tag)? I am not advocating the use of the <style> tag. I am talking about optimal order in cases where these things are used.
Eric Mutta over 2 years

+1 this video from Google confirms much of what you said.