时间:2020-02-11
编辑:网站制作公司
5092
0
顾名思义,HTML 5是HTML 4的继任者。HTML 5的工作始于一组独立的工作,该工作组倡导务实的方法WhatWG,而W3C则将所有精力都集中在XHTML 2上。设计原则很明确:简化HTML的使用,形式化当前做法并确保最大程度的向后兼容性。
以下是20个技巧的清单,这些技巧可用于在HTML5中正确编码页面。所有这些技巧加在一起,将改善您的SEO,满足某些W3C标准或改善兼容性……
随着HTML5的到来,Doctype焕然一新。代码行变得简洁明了,所有代码都相同,并且无需添加url。满足标准的简单有效方法。
1 | <! DOCTYPE html> |
您已经听说过,但始终记得正确关闭标签。某些显示错误有时是由于这种缺乏。无锡企业网站制作:例如,由DIV表示的图层不会浮动到右侧,因为它包含在以前可能很近的另一图层中。有些标签是通过监督关闭的-大多数标签都是这种类型的标签,例如P标签-其他一些则单独关闭,例如META标签或IMG图像标签。在这种情况下,我们可以在其名称之后立即在标记中添加反斜杠,如下所示:
1 | < meta description = "..." /> |
一次可通过不同地址访问页面的原因有很多。对于动态站点而言,这是一个问题,该站点有时可以在不同的情况下(会话,类别…)显示相同的内容。为了避免出现重复内容的问题并受到Google的制裁,您应指明页面的规范URL。
1 | < link rel = "canonical" href = "http://my-website.fr/index.html" /> |
尽管还有其他更完整的解决方案,但是您仍然可以调整访问者的缓存浏览器的某些方面。浏览器缓存是什么?当您查看网页时,浏览器会下载页面(HTML),但不仅限于此。它还下载样式表,相关文件(例如JavaScript)和图像以显示。无锡企业网站制作:根据您的情况,最好定义缓存。不需要静态站点即可重新下载站点不同页面之间的所有内容。页眉或顶部和页脚,甚至菜单和侧栏都相同。您的访客的浏览速度将提高十倍。但是,例如,如果您的站点可以定期访问数据库以保持其更新,则缓存将无法工作。使用下面的meta标签:
1 | < META HTTP-EQUIV = "personal" CONTENT = "NO-CACHE" > |
通常,但有时会错误地将脚本本身或指向的链接放置在HEAD标记之间。但是,浏览器会在下载并解释其所在文件时显示您的网站。为了理解,让我们以Google Analytics(分析)的JavaScript中的脚本为例。
如果我们将此脚本放在页面的开头,例如在HEAD标记之间,那么当访问者访问您的网站时,浏览器将开始下载并解释相关文件。并且在显示带有BODY标记的网站内容之前,它将与Google Analytics(分析)进行交互。
但是,如果将其放置在页面的末尾,即在关闭BODY标记之前,则浏览器将首先显示内容,并在其末尾向Google Analytics(分析)发送请求。您的网站将以这种方式更快地显示给您的访客。注意,因为此技术不适用于所有脚本。根据其功能和动作,将由您决定其最佳位置。
尊重语义对于良好的SEO至关重要。根据情况使用标签是合适的。为了澄清这一点,请理解,如果标签存在,则说明它具有用途。
绝对不要根据布局来选择HTML标签。它必须与描述的内容相对应。例如,如果您写一个缩写,则首选ABBR标签而不是诸如I或EM这样的布局斜体标签。您的SEO将从中受益。
对于SEO,标签标题更为突出。该H1
标签具有逻辑作为在搜索引擎索引的重要性最高速度。该页面的关键字应不惜一切代价被包括在内,然后按重要性的重要性进行分类。H2
,H3
…
无需全部使用这六个。H1
并且H2
是最重要的。
如前所述,HTML标签在您的SEO中起着至关重要的作用。您页面的主要关键字或词组将受到一些非常具体的指导。粗体字对读者更易理解,对于搜索引擎而言也是如此。例如,用STRONG标记括起来的单词在索引页面时将以较高的系数突出显示。
尽管STRONG标记可能比某些标记多一点,但其他标记将占据相同的位置。放在项目的HEADER标签之间的关键字比在FOOTER标签之间的关键字更重要。
链接的重要性在于PageRank的传输。因此,它在链接指向的所有页面的链接数之间传输分数划分。连接站点的页面很重要。但是,除了PageRank之外,链接还传输其中包含的关键字的值。
如果您的链接采用以下形式:单击,则它将仅共享其页面的PageRank。但是,如果您锚定了关键字,则会影响您在这些特定关键字上在搜索引擎中的排名。
良好的反向链接不仅限于页面的PageRank,而且还包括该链接中输出链接的数量和关键字的质量。您还可以添加title属性,还有更多SEO…。
IMG标签的ALT属性-图像-并非仅在不显示该图像的情况下有助于理解。我们建议您将此属性加倍,因为如前所述,它允许所有人访问,但同时也可以改善您的SEO。
当机器人将您的网站编入索引并考虑到该属性具有的不同关键字时,ALT属性将取代Google的眼睛。Google的搜索引擎也可能包含“图片搜索”组件,即使有时访问量较少,对您来说也很重要。考虑将关键字合并到IMG标签的ALT属性中。
1 | < img src = "img/arena.png" alt = "our father" /> |
PageRank是一个索引,其中包括确定您在搜索引擎上的查询中的位置。自然可以将您最好的页面的PageRank重新分配给其他人。但是,知道此索引的传输除以该页面上传出链接的数量,而不是限制链接,可以放置一个属性,以便其引擎知道不应遵循该属性,因此不会退款PageRank。
1 | < a href = "#" rel = "nofollow" >Do Not Re-distribute PageRank</ a > |
当访问者访问您的站点时,它的浏览器会下载多个文件和图像进行显示。为了减少查询和显示在网站上的时间,建议您指定每个图像的大小。因此,浏览器将不会下载1500×1500像素的图像,以在最终的CSS尺寸中显示120×120 px。将WIDTH和HEIGHT属性添加到每个IMG标签:
1 | < img src = "img/pag.jpg" width = "81" height = "61" alt = "trombister" /> |
信息不会等待,Google索引会更快……如果您发布博客或网站并为文章定日期,您可能会注意到,在Google将其编入索引之后,在页面标题下,就在描述开始之前,在结果页面中,显示文章的发布日期(而非索引)。
通过将其标记为TIME标签来简化索引发布日期:
1 | Posted < time pubdate datetime = "2013-01-19" >3 days ago</ time >. |
我们建议您尽可能避免创建以DIV标签表示的多个图层。为了清楚和尊重语义,请使用新的HTML5标签来简化网站的体系结构。您将在其中找到定义某些区域的诸如HEADER,FOOTER或ASIDE之类的标签,以及将嵌套在先前区域中的诸如NAV或ARTICLE之类的标签。一切都是为了减少不必要的DIV标签使用。
为了使Google机器人或其他搜索引擎最好地了解您的网页并为您的网页建立索引,建议对标签使用尽可能少的STYLE属性。从CSS定义样式元素会更好,更方便。因此,您的HTML页面将更加清晰和轻松地建立索引。
如果通过CSS进行的布局看起来过于笼统,并且您想为单个项目添加有效的样式,则建议您使用ID属性作为标记。因此,您可以从样式表中精确选择此元素,而无需更改其他元素的样式。
HTML:
1 | < ul id = "listone" > |
2 | < li >Item 01</ li > |
3 | < li >Item 02</ li > |
4 | < li >Item 03</ li > |
5 | < li id = "component1" >Item 04</ li > |
6 | </ ul > |
CSS:
1 | ul#listone li#component 1 { |
2 | font-size : 26px ; color : #333 ; |
3 | } |
只要有可能,最好将同一类型的所有文件附加到一个文件中。如果每个页面都有自己的样式表,则不会出现问题。但是,假设您是两年前使用其样式表创建的网站。去年,您添加了不同的元素,要实现这些元素,需要新的样式表。与其下载这两张纸,不如将它们组合成一张。您将节省显示页面的时间。
使用CMS(wordpress…)时,许多样式表CSS的情况很常见。每个插件通常都有其样式表,这极大地增加了显示时间,尤其是如果我们安装了多个样式表。
JavaScript文件也是如此。
正如限制和合并相同类型的文件很重要一样,我们建议您限制外部连接的地址。例如,当您在站点上安装按钮“ like” box-like或Facebook时,您会根据小部件创建一个或多个外部连接。的确,当访问者到达您的站点时,除了将文件下载到需要在您的站点上显示的域中之外,浏览器还应连接到其他区域。在我们的示例中,它必须连接到Facebook。
安装窗口小部件(Twitter按钮,Like Button,ShareThis…)时通常是这种情况。限制到其他区域的连接数可以增加显示时间(尤其是当它们的服务器在某些时间饱和时)。
如果现在所有浏览器都不了解所有新的HTML5标签,它们将显示InLine或“ online”类型。我们可以将此显示与简单的SPAN标签进行比较。为了正确使用它,它将应用CSS样式对应项。例如标题标签:
1 | header { |
2 | display: block; |
3 | } |
问题经常来自Internet Explorer。不熟悉这些新标签,它将不会显示。不过,可以使用一些JavaScript来实现兼容性。您将开始将此脚本连接到HEAD标记之间的页面。它将合并一个hack或解决方法,以使脚本仅对IE可读:
1 | <! - [if IE]> < script src = "js/index.js" > </ script > <! [endif] -> |
2 |
3 | The script itself that creates the tags for IE: |
4 | document.createElement ("header"); |
5 | document.createElement ("footer"); |
6 | document.createElement ("section"); |
7 | document.createElement ("aside"); |
8 | document.createElement ("nav"); |
9 | document.createElement ("item"); |
10 | document.createElement ("figure"); |
11 | document.createElement ("figcaption"); |
12 | document.createElement ("hgroup"); |
13 | document.createElement ("time"); |
花时间总是在不同的浏览器上测试最终渲染。在线解决方案使您可以查看不同的版本和平台。
始终记住将标记的样式设置为“零”,以便所有浏览器的显示更加相似。例如,根据显示的浏览器,某些元素的内部页边距或填充不相同。
3
s后返回登录3
s后返回登录