无锡企业网站制作：正确编码其页面的20条提示和技巧

顾名思义，HTML 5是HTML 4的继任者。HTML 5的工作始于一组独立的工作，该工作组倡导务实的方法WhatWG，而W3C则将所有精力都集中在XHTML 2上。设计原则很明确：简化HTML的使用，形式化当前做法并确保最大程度的向后兼容性。

以下是20个技巧的清单，这些技巧可用于在HTML5中正确编码页面。所有这些技巧加在一起，将改善您的SEO，满足某些W3C标准或改善兼容性……

随着HTML5的到来，Doctype焕然一新。代码行变得简洁明了，所有代码都相同，并且无需添加url。满足标准的简单有效方法。

2.总是想着关闭标签

您已经听说过，但始终记得正确关闭标签。某些显示错误有时是由于这种缺乏。无锡企业网站制作：例如，由DIV表示的图层不会浮动到右侧，因为它包含在以前可能很近的另一图层中。有些标签是通过监督关闭的-大多数标签都是这种类型的标签，例如P标签-其他一些则单独关闭，例如META标签或IMG图像标签。在这种情况下，我们可以在其名称之后立即在标记中添加反斜杠，如下所示：

3.指明规范网址以防止内容重复

一次可通过不同地址访问页面的原因有很多。对于动态站点而言，这是一个问题，该站点有时可以在不同的情况下（会话，类别…）显示相同的内容。为了避免出现重复内容的问题并受到Google的制裁，您应指明页面的规范URL。

4.设置缓存以加快导航速度

尽管还有其他更完整的解决方案，但是您仍然可以调整访问者的缓存浏览器的某些方面。浏览器缓存是什么？当您查看网页时，浏览器会下载页面（HTML），但不仅限于此。它还下载样式表，相关文件（例如JavaScript）和图像以显示。无锡企业网站制作：根据您的情况，最好定义缓存。不需要静态站点即可重新下载站点不同页面之间的所有内容。页眉或顶部和页脚，甚至菜单和侧栏都相同。您的访客的浏览速度将提高十倍。但是，例如，如果您的站点可以定期访问数据库以保持其更新，则缓存将无法工作。使用下面的meta标签：

5.定义JavaScript的位置

通常，但有时会错误地将脚本本身或指向的链接放置在HEAD标记之间。但是，浏览器会在下载并解释其所在文件时显示您的网站。为了理解，让我们以Google Analytics（分析）的JavaScript中的脚本为例。

如果我们将此脚本放在页面的开头，例如在HEAD标记之间，那么当访问者访问您的网站时，浏览器将开始下载并解释相关文件。并且在显示带有BODY标记的网站内容之前，它将与Google Analytics（分析）进行交互。

但是，如果将其放置在页面的末尾，即在关闭BODY标记之前，则浏览器将首先显示内容，并在其末尾向Google Analytics（分析）发送请求。您的网站将以这种方式更快地显示给您的访客。注意，因为此技术不适用于所有脚本。根据其功能和动作，将由您决定其最佳位置。

6.尊重语义

尊重语义对于良好的SEO至关重要。根据情况使用标签是合适的。为了澄清这一点，请理解，如果标签存在，则说明它具有用途。

绝对不要根据布局来选择HTML标签。它必须与描述的内容相对应。例如，如果您写一个缩写，则首选ABBR标签而不是诸如I或EM这样的布局斜体标签。您的SEO将从中受益。

7.尊重标题层次

对于SEO，标签标题更为突出。该H1标签具有逻辑作为在搜索引擎索引的重要性最高速度。该页面的关键字应不惜一切代价被包括在内，然后按重要性的重要性进行分类。H2，H3…

无需全部使用这六个。H1并且H2是最重要的。

8.通过附加某些关键词来影响SEO

如前所述，HTML标签在您的SEO中起着至关重要的作用。您页面的主要关键字或词组将受到一些非常具体的指导。粗体字对读者更易理解，对于搜索引擎而言也是如此。例如，用STRONG标记括起来的单词在索引页面时将以较高的系数突出显示。

尽管STRONG标记可能比某些标记多一点，但其他标记将占据相同的位置。放在项目的HEADER标签之间的关键字比在FOOTER标签之间的关键字更重要。

9.选择文本链接

链接的重要性在于PageRank的传输。因此，它在链接指向的所有页面的链接数之间传输分数划分。连接站点的页面很重要。但是，除了PageRank之外，链接还传输其中包含的关键字的值。

如果您的链接采用以下形式：单击，则它将仅共享其页面的PageRank。但是，如果您锚定了关键字，则会影响您在这些特定关键字上在搜索引擎中的排名。

良好的反向链接不仅限于页面的PageRank，而且还包括该链接中输出链接的数量和关键字的质量。您还可以添加title属性，还有更多SEO…。

10.每个图像标签的ALT属性

IMG标签的ALT属性-图像-并非仅在不显示该图像的情况下有助于理解。我们建议您将此属性加倍，因为如前所述，它允许所有人访问，但同时也可以改善您的SEO。

当机器人将您的网站编入索引并考虑到该属性具有的不同关键字时，ALT属性将取代Google的眼睛。Google的搜索引擎也可能包含“图片搜索”组件，即使有时访问量较少，对您来说也很重要。考虑将关键字合并到IMG标签的ALT属性中。

11.没有遵循属性以避免稀释PageRank

PageRank是一个索引，其中包括确定您在搜索引擎上的查询中的位置。自然可以将您最好的页面的PageRank重新分配给其他人。但是，知道此索引的传输除以该页面上传出链接的数量，而不是限制链接，可以放置一个属性，以便其引擎知道不应遵循该属性，因此不会退款PageRank。

12.指定图像大小

当访问者访问您的站点时，它的浏览器会下载多个文件和图像进行显示。为了减少查询和显示在网站上的时间，建议您指定每个图像的大小。因此，浏览器将不会下载1500×1500像素的图像，以在最终的CSS尺寸中显示120×120 px。将WIDTH和HEIGHT属性添加到每个IMG标签：

13.实时<time>标签对于SEO的重要性

信息不会等待，Google索引会更快……如果您发布博客或网站并为文章定日期，您可能会注意到，在Google将其编入索引之后，在页面标题下，就在描述开始之前，在结果页面中，显示文章的发布日期（而非索引）。

通过将其标记为TIME标签来简化索引发布日期：

14.限制<div>的数量

我们建议您尽可能避免创建以DIV标签表示的多个图层。为了清楚和尊重语义，请使用新的HTML5标签来简化网站的体系结构。您将在其中找到定义某些区域的诸如HEADER，FOOTER或ASIDE之类的标签，以及将嵌套在先前区域中的诸如NAV或ARTICLE之类的标签。一切都是为了减少不必要的DIV标签使用。

15.首选CSS样式表，而不要使用STYLE属性

为了使Google机器人或其他搜索引擎最好地了解您的网页并为您的网页建立索引，建议对标签使用尽可能少的STYLE属性。从CSS定义样式元素会更好，更方便。因此，您的HTML页面将更加清晰和轻松地建立索引。

16.使用ID属性作为样式表的选择器

如果通过CSS进行的布局看起来过于笼统，并且您想为单个项目添加有效的样式，则建议您使用ID属性作为标记。因此，您可以从样式表中精确选择此元素，而无需更改其他元素的样式。

HTML：

CSS：

17.限制和合并相同类型的文件

只要有可能，最好将同一类型的所有文件附加到一个文件中。如果每个页面都有自己的样式表，则不会出现问题。但是，假设您是两年前使用其样式表创建的网站。去年，您添加了不同的元素，要实现这些元素，需要新的样式表。与其下载这两张纸，不如将它们组合成一张。您将节省显示页面的时间。

使用CMS（wordpress…）时，许多样式表CSS的情况很常见。每个插件通常都有其样式表，这极大地增加了显示时间，尤其是如果我们安装了多个样式表。

JavaScript文件也是如此。

18.限制到其他区域的连接数

正如限制和合并相同类型的文件很重要一样，我们建议您限制外部连接的地址。例如，当您在站点上安装按钮“ like” box-like或Facebook时，您会根据小部件创建一个或多个外部连接。的确，当访问者到达您的站点时，除了将文件下载到需要在您的站点上显示的域中之外，浏览器还应连接到其他区域。在我们的示例中，它必须连接到Facebook。

安装窗口小部件（Twitter按钮，Like Button，ShareThis…）时通常是这种情况。限制到其他区域的连接数可以增加显示时间（尤其是当它们的服务器在某些时间饱和时）。

19. Internet Explorer和HTML5

如果现在所有浏览器都不了解所有新的HTML5标签，它们将显示InLine或“ online”类型。我们可以将此显示与简单的SPAN标签进行比较。为了正确使用它，它将应用CSS样式对应项。例如标题标签：

问题经常来自Internet Explorer。不熟悉这些新标签，它将不会显示。不过，可以使用一些JavaScript来实现兼容性。您将开始将此脚本连接到HEAD标记之间的页面。它将合并一个hack或解决方法，以使脚本仅对IE可读：

20.始终在不同的浏览器上测试最终渲染

花时间总是在不同的浏览器上测试最终渲染。在线解决方案使您可以查看不同的版本和平台。

始终记住将标记的样式设置为“零”，以便所有浏览器的显示更加相似。例如，根据显示的浏览器，某些元素的内部页边距或填充不相同。