HTML元标记的顺序


16

搜索引擎优化公司建议我们改变我们的HTML meta标签的顺序,以便<title><meta name="description">是第2位。他们说这是为了确保搜索引擎可以利用这两个标签。我一直觉得文档头内部的标签顺序并不重要。我错了吗?真的有搜索引擎会假设前两个标签始终存在titledescription并放弃搜索它们吗?


Answers:



7

尽管出于SEO的目的,顺序可能并不重要,但在考虑其他方面(例如安全性,内容(字符)显示或加载速度)时,事实并非如此。最好这样大致安排页面的头部(假定HTML5为语法):

<head>

到目前为止,在文档中,您不应使用任何非ASCII字符,因此字符编码尚未成为问题。但是,一旦打开该head标签,使用非ASCII字符的可能性就会明显增加。因此(假设您没有以编程方式或在服务器级别上声明字符编码),则应将下一条语句作为字符编码声明。这也满足了将嗅探字符编码语句的解析器/浏览器/代理:

  <meta charset="utf-8">

以下两个(X-UA-Compatibleviewport)被Bootstrap的人们推荐(最新版本为v3.3.4)。尽管我几乎肯定这些建议是基于性能的,但我要说的大多数都是推测性的:

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

如果您在考虑与设备无关的设计/开发(包括较小的非桌面用户代理),则应包括以下内容:

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

最后,标题:

  <title>Ingenious Page Title</title>

接下来,在标题之后尽快提供CSS(它们之间没有“ daylight”):

  <link rel="stylesheet" href="stylesheet-1.css">
  <link rel="stylesheet" href="stylesheet-2.css">

如果您使用的是页面级样式,则应在此处进行。这主要是由于CSS的“级联”性质:即具有相同程度的特异性的最后一个样式声明(例如,两个针对一个段落的语句p)。为了使覆盖外部样式更容易(即,无需使用更大的特殊性,!important),您应该在外部样式(<link>)之后放置页面级样式。另外,通常不建议在页面级样式中使用@import指令,因为这将阻止同时下载其他样式资产:

  <style>body{color:black;}</style>

这是放置元标记,网站图标和其他内容的最合适的地方。有争议的是,将在大多数元标记之前加载网站图标或类似资产(例如iOS应用程序图像),因为它可以更快地开始下载这些资产。

  <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">

因为它会阻止/延迟渲染,所以如果您打算要求脚本,请在合理的时候延迟加载它们。如果它们必须位于中head,则可以在head</head>)关闭之前加载它们。如果以后可以加载它们,请将其放在body标签(</body>)的关闭之前。

  <script src="script-1.js"></script>
  <script src="script-2.js"></script>
</head>

考虑到索引机器人(即搜索引擎蜘蛛)将占用整个页面,在大多数情况下,为SEO目的而特别注意元标记的顺序似乎并不重要。否则,他们将如何为页面的内容编制索引,或者稍后再更新该索引?

对我而言,值得注意的是,对于我们认为知道的所有信息以及我们在网络上找到的所有建议(甚至来自诸如Google和Bing网站管理员工具之类的地方),亚马逊,谷歌等网站以及其他显然关心的人如此微不足道的性能提升不遵循这些规则。


虽然X-UA-Compatibleviewport和苹果触摸图标仍然是(相对)新在2010年,所有的人都在使用。HTML5仅影响字符集声明的长度。当时,CSS,JS和图像流水线以及在应用CSS和JS之后重新(重新渲染)页面都是一个问题。尽管如此,我在一个地方(不在headhtml文档中)找不到此信息,并且在遇到这个问题后,在这里做起来似乎很好。
戴维·埃尔德里奇

好的答案@DavidEldridge。但是,您介意更新答案以包含application/ld+json结构化数据的脚本吗?为了提高速度。最好放在哪里?我们应该将其视为外部的吗JavaScript文件吗?
布伦丹·沃格特

2

从功能的角度来看,Bootstrap中的以下内容似乎是meta标签的更好顺序:

    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">

根据Google员工的说法,对SEO来说重要的是

  1. 移动友好
  2. 标题和说明
  3. 独特而有价值的内容

如果您的网站不适合移动设备,则他们甚至不会查看2)或3)。如果它适合移动设备,则他们在列出您的网站时可能会使用标题和描述。没有任何保证。他们可能会根据在您的网站上找到的内容决定提出自己的描述。

如果您的内容被窃或重复,并且尝试将其塞满关键字或使用其他“黑帽”技术,那么这些事情将会伤害您并可能禁止您。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.