HTML <head> 最佳做法[关闭]

StackOverflow https://stackoverflow.com/questions/275631

  •  07-07-2019
  •  | 
  •  

题

还有 <meta> 标签和其他的东西，你可以放置在 <head> 你HTML文档。什么样的 <meta> 标签等。和最好的实践做你使用的你HTML文档，以使其更方便、可搜索、优化等。

有帮助吗？

解决方案

在我的情况：

  • 标题(应该做[部分的名称，网站的名称]更好的搜索引擎优化)
  • 元的标签 Content-type, description, ， keywords
  • 链接到的样式表中(s)(不要忘记指定的 media="").
  • <script> 标签，链接到外部javascript文件。

所有标记应按照W3C的标准。W3C的网站有更多的技术和详细 部分 有关HTML <head> 部分。

其他提示

让您的用户受宠，并让他们的IE引擎切换到Chrome。 noreferrer“> Chrome框架已安装：）

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

您需要在BODY元素关闭之前将SCRIPT元素放在页面的末尾。请参见 http://developer.yahoo.com/performance/rules.html#js_bottom详情。

除了通常的文档类型，标题等之外，我会尝试为您提供一些我学到并实施的可能对您有所帮助的内容。

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

Stack Overflow - HTML head best practices

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

现在，如果您打开了5个Stackoverflow标签（我经常这样做：P），那么用户将如何知道哪个是哪个？

还要注意CSS的级联性质......所以这些顺序很重要。与Javascript相同，必须允许对其他外部站点的任何依赖。我把我的脑袋放在头上，并没有发现性能下降。我把它们放在那里因为它对我来说看起来更整洁和合乎逻辑。虽然其他人会建议在＆lt; / body＆gt; 之前放置＆lt; script src =＆quot;＆quot;＆gt; 链接，这样浏览器就不会暂时停止...只需使用最适合您网站的任何内容。

同时使用'general'让'Net Filtering'软件对'评级'的Meta标签知道您的网站对所有年龄段的观众都是安全的（当然，只要是这样！）

我也用.. 

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

让浏览器知道我网站的主页在哪里。对于任何浏览器预取系统，虽然我认为这些尚未由浏览器在没有插件帮助的情况下实现。

如果您的网页符合各种排序，请考虑“下一页”和“上一页”＆lt; link rel =＆quot;＆quot;＆gt; 。

首先，确保＆lt; ！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>

我没有看到这提到：＆lt; base＆gt; 标记，如果指定，应该是＆lt; head＆gt; 中的第一个元素。 （如果未指定，则假定文档的基URI为。。）

恕我直言，＆lt; head＆gt; 的两个最重要的子标记是＆lt; title＆gt; 和内容类型元标记。搜索引擎会主动查看＆lt; title＆gt; 。而其他元标记经常被忽略。作为一个多语言的网络用户 - 我不能再强调添加内容类型标签的重要性，因为没有它，浏览器需要自动检测网页的字符集，这种操作通常是不稳定的。结果最终导致各种字符无法正确呈现给用户，有时甚至根本不呈现日文或中文。

以下是我当前项目中某些标题代码的摘录：

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

有一个相关问题此处可能有助于增加一些关于标签的顺序。

通常我的网页包含以下内容：

<!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，而Language适用于浏览器（如果支持它）。

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

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

然而，获取页面标题是非常重要的。

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

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

我想补充一点：如果你正在使用 IE的 meta X-UA-Compatible 标签用于切换Interet Explorer的渲染模式，您必须将其作为HEAD中的第一项插入：

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Page title</title>
  ...etc
</head>

除上述答案外，我还使用都柏林核心倡议元标记。

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

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

等

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top