logo标签列表

HTML <head>最佳实践

htmlmeta-tags
26

在您的HTML文档的<head>中，有<meta>标签和其他可以放置的内容。为使HTML文档更具可访问性、可搜索性、优化等方面，您可以使用哪些<meta>标签等最佳实践呢？

1
根据andyk的建议，我也总是在meta部分添加以下内容：<meta http-equiv="imagetoolbar" content="no"> 这将禁用IE图像工具栏，该工具栏会在鼠标悬停在大于200x200像素的图像上时出现，非常无用。 - Marco Demaio
12个回答
18

在我的情况下：

  • 标题（为了更好的SEO，应该使用[Section Name - Site Name]格式）
  • Content-type、description和keywords元标签
  • 链接到样式表文件（不要忘记指定media=""属性）
  • <script>标签来链接外部Javascript文件

所有标签都应遵循W3C的标准。W3C网站有一个更具技术性和详细的关于HTML <head>部分的章节。

1
标题（如[章节名 - 网站名]）与SEO无关。元标记“关键词”几乎没有用处。 - datasn.io
@Marco Demaio：指定文档在不同媒体上的呈现方式：屏幕（主要使用此选项），纸张（打印版本），语音合成器，盲文设备等。更多信息请参见：http://www.w3.org/TR/CSS2/media.html - andyk
9

为了让您的用户更方便，当安装了Chrome Frame时，请将其IE引擎切换到Chrome引擎 :)

<meta http-equiv="X-UA-Compatible" content="chrome=1">
5
5

除了通常的doctype、title等，我将尝试提供一些我学到并实现过的东西，可能对你有所帮助。

首先，记住为了最佳用户体验，标题应该首先包含最相关的子标题。这是因为它通常显示在标题栏/标签列表/书签名称中。考虑这个页面标题...

Stack Overflow - HTML head best practices

成为Stack Overflow...（为了节省标签栏/书签列表的空间而缩短）

现在如果您打开了5个Stackoverflow选项卡（像我经常做的那样 :P），那么用户怎么知道哪一个是哪一个呢？

还要注意CSS的级联性质...所以这些的顺序很重要。同样适用于Javascript，必须允许任何对其他外部站点的依赖。我把我的放在头部，没有注意到性能下降。我把它们放在那里，因为对我来说看起来更整洁和合乎逻辑。虽然有些人会建议将<script src="">链接放在</body>之前，这样浏览器就不会暂时停顿...只需使用最适合您网站的方法即可。

此外，具有“评级”和“一般”元标记可以让网络过滤软件知道您的网站对所有年龄段的观众都是安全的（当然，只要确实如此！）

我也使用...

<link rel="start" href="/" title="Home" />

让浏览器知道我的网站的主页在哪里，以及对于任何浏览器预取系统，尽管我相信这些系统尚未由没有插件的浏览器实现。

如果您的页面是一系列的，请考虑使用“下一页”和“上一页”的<link rel="">标签。

我喜欢下一个，上一个和开始链接。有一个适用于Firefox的工具栏可以使用它们。 - TRiG
我相信Opera使用下一个和上一个的元标签。 - Nico Burns
4

首先，请确保文档中的 <!DOCTYPE 是第一个元素，即没有空格、制表符或被破坏的BOM标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- declare all page rendering and programmatic related tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- Care about IE ? -->
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!-- globalise scripting and styling content language  -->
    <meta name="Content-Type-Script" content="text/javascript" />
    <meta name="Content-Type-Style" content="text/css" />
    <!-- title tag is MANDATORY -->
    <title>Short and relevant, about 64 characters/spaces</title>
    <!-- declare all CACHE controll -->
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
    <meta name="revisit-after" content="7 days" />

    <!-- declare all content description tags -->
    <meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1))'>
    <!-- language specific keywords -->
    <meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" />
    <!-- For french example -->
    <meta name="keywords" lang="fr" content="vacances, Grèce, soleil" />
    <meta name="description" content="about 255 characters/spaces WORDS relevant to the content of the actual page" />
    <meta name="Abstract" content="about 96 characters/spaces PARAGRAPH describing the actual page content within your site" />

    <!-- declare all situationnal and external relativity related tags -->
    <link rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt" />
    <link rel="start" href="/" title="Home" />
    <link rel="prev" href="../" title="Parent section" />

    <!-- declare all page rendering cascading style sheets in order of incidence -->
    <link rel="stylesheet" type="text/css" href="globaly-used.css" />
    <link rel="stylesheet" type="text/css" href="specificly-used.css" />
    <!-- declare all page rendering specific cascading style i.e. IE only, hacks etc -->
    <link rel="stylesheet" type="text/css" href="more-specificly-used.css" />
    <link rel="stylesheet" type="text/css" href="i-love-ie.css" />

    <!-- not relevent to subject, declare all javascripts AFTER css linking -->

</head>
<body>
</body>
</html>
2
我没有看到这个提到过：如果指定了<base>标签，则应该将其放在<head>中的第一个元素。（如果未指定，则假定文档的基本URI为。。）
1
嗯，为什么有人要踩这个？它绝对是正确的。 - eyelidlessness
2

在我看来，<head> 的两个最重要的子标签是 <title> 和内容类型（Content Type）元标签。搜索引擎会积极查看 <title>，而其他元标签通常会被忽略。作为一名多语言网页用户，我强调添加内容类型标签的重要性，因为没有它，浏览器需要自动检测网页的字符集，而这个操作经常出现问题。结果就是各种字符无法正确呈现给用户，或者在日文或中文等情况下根本不呈现。

这是我的一个当前项目的头部代码片段：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Reports Blah Blah</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
...
</head>
描述是在大多数搜索引擎中出现在您的列表中的内容 - 如果没有它，搜索引擎通常会猜测页面内的片段；最好不要让这个留给机会。关键字META标签仍然被某些搜索引擎使用，尽管它只有边缘权重。然而，我也发现将其填充很有用，只是作为提醒哪些关键字最重要，哪些关键字需要在页面内容中强调。 - CJM
1
据我所知，大多数搜索引擎会忽略任何“关键词”或“描述”元标记，而更喜欢阅读文档的内容。
然而，正确设置页面标题非常重要。
他们经常忽略关键字，但是不会忽视描述。 - kangax
1
上次我检查时，Google完全忽略了关键词和描述。这可能已经改变，但似乎不太可能。基本问题在于它们没有为页面内容添加任何东西，并且经常被垃圾邮件发送者用来加载不准确的关键词或描述，从而降低搜索的准确性。因此，Google忽略了它们。 - MarkR
1
他们仍然使用描述（当然不是关键字）- http://www.youtube.com/watch?v=jK7IPbnmvVU&feature=player_embedded - kangax
1

这里有一个相关问题这里，它可能有助于增加一些有关标签顺序的信息。

通常我的页面包括以下内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>...</title>
    <meta name="Description" ...>
    <meta name="Keywords" ...>
    <meta name="Copyright" ...>
    <meta name="Author" ...>
    <meta name="Language" ...>
    <style type="text/css" ...>

DocType对于浏览器强制执行严格的渲染（无怪异模式）非常重要。只要有一个，您可能希望改用XHTML。我添加版权和作者纯粹是因为我为其他公司设计和创建页面。描述用于SEO，语言用于浏览器（如果支持）。

我不认为哪个元标记排在前面或标题是否应该在上面会有太大的区别。在大多数情况下，最重要的是它存在于页面上，并具有正确的内容。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接