网站优化之SEO开发标准

SEO对于一个独立站,类似于钢结构对于建筑的作用。
不紧包含前期的基础优化,也包含中后期的站外外链建设和内容营销。
今天来讲下SEO的开发标准,希望能对网站的建设者有些许帮助。

一. 开发标准

1.1. W3C标准

1.1.1. 什么是W3C标准

作为网站技术开发人员而言,往往是站在自己的开发角度来实施网站布署(读取数据及开发的方便性等等),而不是站在网站访问者与搜索引擎角度。因此大部分的网站在浏览方面不够直观或是方便,特别是现在w3c的规范,更是在大部分的网站开发人员脑里一片空白。何况百度 、google、msn、yahoo等专业搜索引擎更有自己的搜索规则及判断网页等级技术,所以网站要优化,优化的目的只有一个:符合标准,符合蜘蛛爬行的标准,更重要的是符合网站访问者浏览的方便及易用性。要知道W3C标准,有必要先弄清楚什么是W3C?W3C其实就是World Wide Web Consortium,全球万维网联盟的简称。W3C的主要职责就是确定未来万维网的发展方向,并且制定相关的推荐 (recommendation, 由于W3C是一个民间组织,没有约束性,因此只提供建议)。HTML4.01规范建议(HTML4.01 Specification Recommendation)就是由W3C所制定的。它还负责制定XML,MathML等其他网络语言规范。

1.1.2. 如何符合w3c规范?

确保所有的标签都使用小写字母确保所有的属性值都放在引号里确保所有成对标签出现的顺序、不成对的标签都用/>结束, ”/”和”>”之间不要有空格

1.1.3. 使用正确的文档类型

文档类型声明位于HTML文档的第一行:如果你想跟其他标签一样使用小写,可以使用以下代码:

1.1.4. 声明你的编码语言

直接在DOCTYPE声明后面添加如下代码:</p> <p>

1.1.5. 声明你的网站语言

直接在DOCTYPE声明后面添加如下代码:<html>其中en要使用多语言,如fr、es等</p> <p>

1.1.6. 使用小写元素名

HTML5 元素名可以使用大写和小写字母。推荐使用小写字母:混合了大小写的风格是非常糟糕的。不推荐:<SECTION> <p>这是一个段落。</p></SECTION>非常糟糕:<Section> <p>这是一个段落。</p></SECTION>推荐:<section> <p>这是一个段落。</p></section></p> <p>

1.1.7. 关闭所有 HTML 元素

在 HTML5 中, 可能没有关闭所有元素 (例如 <p> 元素)时,网页也显示正常,但我们建议每个元素都要添加关闭标签。不推荐:<section></p>

 <p>这是一个段落。
</section>  推荐:
<section>
  <p>这是一个段落。</p>
</section>

1.1.8. 使用小写属性名

HTML5 属性名允许使用大写和小写字母。但我们推荐统一使用小写字母属性名: 不推荐:

<div>
推荐:
<div>

1.1.9. 属性值

HTML5 属性值不用引号时,网页显示可能也正常,但属性值我们统一使用引号:

如果属性值含有空格需要使用引号。

混合风格不推荐的,建议统一风格。

属性值使用引号易于阅读。

以下实例属性值包含空格,没有使用引号,所以不能起作用:

<table striped>

以下使用了双引号,是正确的:

<table class="table striped">

1.1.10. 图片属性

图片,特别是主要的banner一定要添加alt属性,title属性可选:蜘蛛不认识图片上的内容,只能通过alt属性来判断,alt属性值应该是图片的的含义,如果没有这个数据,应该写网站的名称

<img src="domain/banner.jpg" alt="rosegal-Thanksgiving Sale">
<img src="domain/banner.jpg" alt="rosegal">

1.1.11. 空格和等号

等号前后使用空格时,网页显示可能也正常

<link rel = "stylesheet" href = "styles.css">

但我们推荐不要空格:

<link rel="stylesheet" href="styles.css">

1.1.12. 空行和缩进

不要无缘无故添加空行。

为每个逻辑功能块添加空行,这样更易于阅读。

缩进使用两个空格,不建议使用 TAB。

比较短的代码间不要使用不必要的空行和缩进。

不必要的空行和缩进:

<body>

  <h1>W3Cschool教程</h1>
  <h2>HTML</h2>
  <p>这是一行文案的文字</p>
  <p>这是一行文案的文字</p>
 
</body>

推荐:

<body>

<h1>W3Cschool教程</h1>

<h2></h2>

<p>这是一行文案的文字。这是一行文案的文字</p>

</body>

表格实例:

<table>

  <tr>

    <th>Name</th>

    <th>Description</th>

  </tr>

  <tr>

    <td>A</td>

    <td>Description of A</td>

  </tr>

</table>

列表实例:

<ol>

  <li>London</li>

  <li>Paris</li>

  <li>Tokyo</li>

</ol>

1.1.13. HTML 注释

注释可以写在:

<!-- 这是注释 -->

比较长的评论可以在 中分行写:

<!--

  这是一个较长评论。 这是 一个较长评论。这是一个较长评论。

  这是 一个较长评论 这是一个较长评论。 这是 一个较长评论。

-->

长评论第一个字符缩进两个空格,更易于阅读。注释最好使用smarty或php的注释或者英文注释,不要使html注释中出现中文。

1.1.14. 样式表

样式表使用简洁的语法格式 ( type 属性不是必须的):

<link rel="stylesheet" href="styles.css">

短的规则可以写成一行:

p.into {font-family: Verdana; font-size: 16em;}

长的规则可以写成多行:

body {

  background-color: lightgrey;

  font-family: "Arial Black", Helvetica, sans-serif;

  font-size: 16em;

  color: black;

}

将左括号与选择器放在同一行。

左花括号与选择器间添加以空格。

使用两个空格来缩进。

冒号与属性值之间添加一个空格。

逗号和符号之后使用一个空格。

每个属性与值结尾都要使用符号。

只有属性值包含空格时才使用引号。

右括号放在新的一行。

1.1.15. 在 HTML 中载入 JavaScript

使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 ):

<script src="myscript.js"></script>

1.1.16. 避免空的src和href

空属性对爬虫不友好 ,尽量避免。 留意具有这两个属性的标签如link,script,img,iframe等

1.1.17. 使用合理的html5语义化标签

遵守W3C语义化规范,则避免单一的重复div/span等标签,例如我们要做一个导航

<!-- 不建议 -->

<div>

    <span>NEW</span>

    <span>CHRISTEMAS</span>

    <span>PLUS SIZE</span>

</div>

<!-- 建议 -->

<ul>

    <li>NEW</li>

    <li>CHRISTEMAS</li>

    <li>PLUS SIZE</li>

</ul>

h1正文标题要使用h1标签,且每个页面只能出现一次h1标签,副标题要使用h2。可以使用CSS样式进行显式风格的设置。切记:不重要的地方不要随便使用h1标签。

强调网页中的重要内容应该使用strong标签,避免使用b标签(对搜索引擎不友好),原则是使用新的html标签替换旧的标签,样式要使用css替代。

1.2. DOM结构优化

1.2.1. 网站结构布局优化

减少DOM元素数量,DOM嵌套不超过4层,尽量精简(图标、按钮等使用伪类元素可以有效的减少标签嵌套),提倡扁平化结构

<!-- 不建议 -->

<div>

    <span>

      <img src="...">

    </span>

</div>

<!-- 建议 -->

<div>

<img src="..."></div>

1.2.2. 统计网页元素数量

想知道你的网页中有多少元素,通过在浏览器中的一条简单命令就可以算出document.getElementsByTagName(‘*’).length这有利于我们多关注元素数量

1.2.3. 图标型元素

尽量使用button或者a元素, 且标签内不能为空很多前端人员在加图标、按钮的时候,直接使用一个空的标签,只是为了放一个图标,这完全可以写的更语义化一些,例如添加一个facebook图标

<!-- 不建议 -->

<a href="javascript:;"><i></i></a>

<!-- 建议,使用font-size使文字不可见,使用after或者before伪类添加图标  -->

<button>facebook</button>

<a href="javascript:;">facebook</a>

1.2.4. 最大限度减少DOM访问

缓存已经访问过的有关元素

线下更新完节点之后再将它们添加到文档树中

避免使用JS来修改页面布局

1.2.5. 显示完整的文案

如果文字长度过长,可以用样式截取,设置高度,超出的部分隐藏即可。这样做的好处是让文字完整呈现给搜索引擎,同时在表现上也保证了美观。

1.2.6. Iframe

尽少使用iframe框架,搜索引擎不会抓取iframe里面的内容,重要的内容不要放在iframe里

1.2.7 br

br标签不能用于布局(如隔开一个元素),这应该使用样式去替代

1.2.8 a标签

如果是确定不需要seo的标签,尽量给a标签加上rel=”nofollow”,告诉机器(爬虫)无需追踪目标页,减少垃圾链接对搜索引擎的影响;另外a标签中的href属性,在可能的情况下尽量使用绝对地址

1.3 前端页面性能

1.1.1. 为什么要关注页面性能

网页性能的直接表现就是打开速度,响应速度慢的,自然影响打开网站的速度。另外响应速度慢的,还会影响蜘蛛爬行的速度,蜘蛛提交访问请求,如果响应慢,爬行就会慢。从对网站的数据监控来看,蜘蛛在一个网站的总停留时间是相对稳定的,提升权重后才会增加总停留时间。总的来说,前端页面的性能最主要是减少资源大小、减少HTTP请求数量以及适当的异步加载。

1.1.2. 资源压缩

所有输出的CSS/JS/图片必须经过压缩,这可以在不降低网页体验的情况,提升页面的打开速度,降低服务器压力。考虑到添加压缩资源这一步骤会增加开发的工作量,尽量考虑使用gulp等自动化工具提升效率。图片压缩,可以参考压缩工具tinypng、ImageOptimCSS压缩,可以参考压缩工具clean-cssJS压缩,可以参考压缩工具 uglifyJS

About 跨境10年

跨境从业10年,独立站推广5年,亚马逊4年多,做过推广主管,运营主管,现任刚起步创业型公司亚马逊经理,接触无数服务商,了解亚马逊各种坑,打过爆款。对独立站SEO优化和推广,红人营销,亚马逊选品,运营和推广有自己独特见解!

View all posts by 跨境10年 →

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注