SEO技术在XHTML+CSS网页制作中的应用

陆俊

（江阴职业技术学院，江苏无锡 214400）

SEO技术在XHTML+CSS网页制作中的应用

陆俊

（江阴职业技术学院，江苏无锡 214400）

搜索引擎是获取流量的重要工具，可以为企业发现大量的潜在用户。网站建设分为前端网页设计和网站功能开发两个环节。该文在分析搜索引擎优化方法的基础上，以前端网页设计为重点，分析SEO技术运用于网页设计的方法。

搜索引擎；优化；结构；文本；识别

0 引言

SEO是英文Search Engine Optimization的简称，是搜索引擎优化的意思。通过SEO技术，利用搜索规则，能提高目标网站在相关搜索引擎内的排名，让网站在行业内占据领先地位，从而提高商品品牌的知名度。通过SEO技术，还能够为网站提供生态式的自我营销解决方案。

随着WEB2.0设计标准的普及，人们越来越关注XHTML+CSS的标准化设计，它对搜索引擎优化起到明显的作用。本文重点分析如何把SEO引入XHTML+CSS网页设计中，以优化网页结构。

1 搜索引擎优化的作用

据中国互联网网络信息中心（CNNIC）统计，截止2015年末，我国搜索引擎用户规模达5.66亿人，与2014年末相比，增加了4 400万人，增长率为8.4%。用户必须通过搜索引擎才能方便地获取需要的信息。有关研究表明，用户在搜索信息时，绝大部分用户只关注目标网站首页的信息，尤其是网站首页的前三条信息。搜索引擎优化的根本目的是提高营销网站在搜索目标网页中的名次，以提高用户对营销网站的关注度和暴光率，也方便用户检索企业和企业商品的信息，方便企业与用户交流和沟通，从而扩大客户规模，拓展网络营销业务，降低企业营销成本。搜索引擎优化具有很高的商业价值。

2 搜索引擎优化方式

虽然利用SEO技术优化搜索引擎，优化方法和策略很多，但主要是站外优化和站内优化两种方式。

SEO搜索引擎的外部优化是通过反向链接，把目标网站与用户感兴趣的网站链接，并在网站中的友情链接交换、博客发布、文章投稿、分类目录、广告购买、论坛等栏目或板块中发布目标网站链接信息，使用户方便链接目标网站。

站内优化的核心是将网站中的关键词合理地分配到网站的各个页面，以增加网页中关键词的密度，使搜索引擎更容易识别网页的核心内容。在设计网页时，不仅要美化网页页面，更要注意提炼关键词和在页面的布局，因为它是目标网站能否被用户搜索出来的关键。一般把关键词布局在页面标题 TITLE标签、META标签 keywords属性、META标签属性、主次导航处等位置，并通过网站内链接串联相关页面，方便用户调用相关页面的内容，以提高页面关键词的粘度。

由于网站是由若干网页组成，网页设计是网站建设的基础，必须通过SEO技术设计网页，以提高搜索引擎的优化效果。

3 SEO在网页设计中的应用

随着互联网技术的发展，网页设计技术发生了巨大的变化，从原始的“记事本”式网页设计，到table表格网页设计，再到XHTML+CSS网页设计，以及HTML5的自适应网页设计。本文主要分析利用SEO技术进行XHTML+CSS网页设计的方法。

3.1 XHTML+CSS应用

按照网页结构化标准设计的要求，把网站页面内容文件与其呈现格式文件相分离，简单地说就是用XHTML+CSS格式写所有字体、样式等文件，并把 CSS和 Javascript置于单独的文件中。 用HTML格式写文字内容文件，不使用CSS代码，直接调用外部文件。通过这种方式，能够精简HTML文件代码，降低文件容量；搜索引擎能够更好地索引和识别网站信息，并准确地抓取页面内容。

通过XHTML+CSS网页设计，不仅会使网页容量小、页面载入速度快，而且会使网页结构清晰、界面友好。把文字或图片信息的样式文件置于CSS中，搜索爬虫只采集 HTML中的信息，能够提高搜索效率；网页的关键词更集中、密度更大。SEO技术更符合W3C标准网页设计的要求。

3.2 网页模块分析

网站首页是网站的脸面，绝大多数用户都从网站首页开始浏览网站。因此，应加强网站首页设计。在设计网页时，应遵循“以用户为中心”和“4W”原则。“4W”的第一个W是“what”，明确网页放什么内容；第二个W是“why”，明确网页所放内容的理由；第三个W是“whom”，明确谁看网页内容；第四个W指“what effect”，明确网页布局达到什么效果。企业网站页面一般包括网站logo和banner模块、导航条模块、网站幻灯模块、产品列表模块、成功案例模块、公司介绍模块等，其结构如图1所示。

图1 网页模块结构图

表1 常用CSS命名规则

由于SEO技术优化搜索引擎的目的是方便用户通过关键词检索目标网站，因此，必须按照用户对网页各模块关心程度的强弱，布局页面模块。

1）“企业头部”和“导航模块”，是网页的基本模块，是用户检索目标网站和搜索引擎识别网页面的核心；

2）“网站幻灯图”模块，展示企业核心产品的图片，强化用户的视觉感，突显产品特点，提高广告宣传效果；

3）“产品分类”模块，是用户关心的核心内容。商品分类目录置于页面的左侧，企业推荐产品模块置于右侧，方便用户访问；

4）“成功案例”模块，将企业积累的以往客户名录置于网页，以增强用户的信任；

5）“公司介绍”模块，着重展示企业形象。

3.3 网页CSS样式命名规范

按照CSS命名规则命名，不仅方便网站维护和修改CSS代码，而且还能加强搜索引擎的优化和方便记忆。网页的CSS命名规则如表1所示。

网页中常用名的CSS代码如下：

按照规则命名和编写标准代码，不仅能保证网页结构清晰、命名规范，而且便于识别和后期修改。

3.4 非文本信息的处理

搜索引擎通过名为“spider”的小程序抓取网页。因此，在网站设计过程中，必须重视spider抓取网页的能力。spider仅能读取页面的文本内容，无法选取和处理Flash、图片等非文本信息，也无法识别和处理flash、图片中的文字信息。然而，在网页制作过程中，不可避免使用图片，以增强用户的视觉体验。因此，必须解决spider不能识别和处理非文本信息的问题。采用图文混排方式，并对图片进行SEO技术处理，可以解决这个问题。在< img>标记中，加入ALT属性，属性内容为图片中的文字内容。例如，在中，alt的内容就是图片中的文字信息，这样搜索引擎就可以识别和处理图片中的信息，以便于抓取。虽然flash可以使页面更加生动，但是一般尽量不要在网页中使用flash。如果必须使用flash，在flash页面创建供搜索引擎抓取的文本索引页面，并创建超级链接索引到文本页面。由于搜索引擎不能识别js文件，重要的内容不要使用js文件输出，并且尽量不使用iframe框架编写文件。

3.5 XHMTL标记语义化

XHMTL标记语义化就是对内容结构化。选择合适的标签，以实现代码语义化，便于开发者阅读和写出更好的代码，方便浏览器爬虫更好地解析内容。通过XHMTL标记语义化和SEO技术，与搜索引擎建立良好的联系，有助于spider抓取更多的有效信息。由于spider依靠标签确定上下文和关键字的权重，应把标题置于权重较大的标签之中。例如，在每个页面只能出现一次H1标签，可以多次出现H2标签，但是H1标签的权重高于H2标签，仅次于title的权重，应把标题置于H1标签而不是H2标签。

[1]张磊.SEO技术研究与应用 [J].电脑开发与应用, 2010(3).

[2]李淑晓.基于SEO的XHTML+CSS网页布局与美化[J]电脑知识与技术,2011(5).

[3]昝辉Zac(作者).SEO实战密码:60天网站流量提高20倍[M].北京：电子工业出版社，2011.

责任编辑 仇大勇

TP393

A

1674－5787（2016）06－0147－03

10.13887/j.cnki.jccee.2016（6）.43

2016-10-17

陆俊(1982—)，男，江苏省淮安市人，硕士，江阴职业技术学院管理系电子商务专业，讲师，研究方向：数据分析、网络营销。