HTML最佳实践

时间：2008-11-09 05:07:31

标签： html meta-tags

您可以在HTML文档的<meta>中放置<head>个标记和其他内容。您在HTML文档中使用了哪些<meta>标记等以及最佳做法，以使其更易于访问，搜索，优化等。

12 个答案:

答案 0 :(得分：17)

就我而言：

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

所有标签都应遵循W3C的标准。关于HTML <head>部分，W3C网站提供了更加技术性和详细的section。

答案 1 :(得分：8)

在安装Chrome Frame时，帮助您的用户并将其IE引擎切换到Chrome浏览器：）

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

答案 2 :(得分：5)

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

答案 3 :(得分：5)

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

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

Stack Overflow - HTML head best practices

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

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

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

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

我也用.. 

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

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

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

答案 4 :(得分：4)

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

答案 5 :(得分：2)

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

答案 6 :(得分：2)

恕我直言，<head>最重要的两个子标记是<title>和内容类型元标记。搜索引擎会主动查看<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>

答案 7 :(得分：1)

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

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

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

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

答案 8 :(得分：1)

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

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

答案 9 :(得分：0)

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

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

答案 10 :(得分：0)

我想添加一个重要说明：如果您使用IE's meta X-UA-Compatible tag to switch rendering modes进行Internet Explorer，则必须将其作为HEAD中的第一项插入：

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

答案 11 :(得分：0)

除了上面的答案，我使用the Dublin Core initiative meta-tags。

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

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

等

相关问题
最新问题