25

您可以在HTML 文档中<meta>放置标签和其他内容。<head>您在 HTML 文档中使用了哪些<meta>标签等和最佳实践，以使其更易于访问、可搜索、优化等。

4

12 回答 12

18

就我而言：

  • 标题（应该做 [Section Name - Site Name] 以获得更好的 SEO）
  • Content-type、description和的元标记keywords
  • 链接到样式表（不要忘记指定media=""）。
  • <script>链接到外部 javascript 文件的标记。

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

于 2008-11-09T06:02:52.813 回答
9

帮您的用户一个忙，并在安装Chrome Frame时让他们的 IE 引擎切换到 Chrome 引擎:)

<meta http-equiv="X-UA-Compatible" content="chrome=1">
于 2009-09-26T20:41:06.770 回答
5

您需要将 SCRIPT 元素放在页面末尾，然后再关闭 BODY 元素。有关详细信息，请参阅http://developer.yahoo.com/performance/rules.html#js_bottom。

于 2008-11-09T06:41:58.930 回答
5

除了通常的文档类型、标题等，我将尝试为您提供一些我学到和实施的可能对您有所帮助的东西。

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

Stack Overflow - HTML head best practices

变成 Stack Overflow...（咀嚼以节省标签栏/书签列表中的空间）

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

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

还有一个带有“一般”的“评级”元标记，让网络过滤软件知道您的网站对所有年龄段的观众都是安全的（当然，只要它是安全的！）

我也用..

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

让浏览器知道我网站的主页在哪里。对于任何浏览器预取系统，尽管我相信在没有插件帮助的情况下这些还没有被浏览器实现。

<link rel="">如果您的页面处于排序序列中，还要考虑“下一个”和“上一个”。

于 2008-11-09T13:10:42.077 回答
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>
于 2012-01-06T18:32:20.093 回答
2

我没有看到提到这一点：<base>标签（如果指定）应该是<head>. （假定文档的基本 URI 在.之前/如果未指定。）

于 2008-11-09T06:18:15.920 回答
2

恕我直言，两个最重要的子标签<head>are<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>
于 2008-11-09T10:26:34.170 回答
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，语言用于浏览器（如果支持）。

我不相信哪个元标记首先出现，或者标题是否应该在上面有很大的不同。在大多数情况下，重要的是它存在于页面上，并且具有正确的内容。

于 2008-11-09T08:37:38.477 回答
1

据我所知，大多数搜索引擎会忽略任何“关键字”或“描述”元标记，而是更喜欢阅读文档的内容。

然而，获得正确的页面标题是极其重要的。

于 2008-11-09T11:27:40.413 回答
0

标题、关键字的元标记、内容类型（如果 Web 服务器未明确设置）以及要应用于页面的任何 CSS。

预先声明 CSS 可以让浏览器更有效地布局页面（参见http://developer.yahoo.com/performance/rules.html#css_top）。

于 2008-11-09T05:18:16.803 回答
0

我要添加一个重要说明：如果您使用IE 的meta X-UA-Compatible标签来切换Internet Explorer 的呈现模式，则必须将其作为 HEAD 中的第一项插入：

<头部>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>页面标题</title>
  ...ETC
</head>
于 2008-11-09T10:36:31.140 回答
0

除了上面的答案，我还使用Dublin Core 倡议 meta-tags。

它们对于实际内容/论文等非常有用。

<meta name="DC.abstract" content="Document abstract" />
<meta name="DC.audience" content="Target audience" />

等等

于 2008-11-09T11:33:15.033 回答