企业动态 技术分享 行业动态

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

2018-01-11分享
搜索引擎是获取流量的重要工具,可以为企业发现大量的潜在用户。网站建设分为前端网 页设计和网站功能开发两个环节。该文在分析搜索引擎优化方法的基础上,以前端网页设计为重点,分析SEO技术运用于网页设计的方法。
引言
SE0 是英文 Search Engine Optimization 的简 称,是搜索引擎优化的意思。通过SEO技术,利用 搜索规则,能提高目标网站在相关搜索引擎内的 排名,让网站在行业内占据领先地位,从而提高 商品品牌的知名度。通过SE0技术,还能够为网 站提供生态式的自我营销解决方案。
随着WEB2.0设计标准的普及,人们越来越关 注XHTML+CSS的标准化设计,它对搜索引擎优化 起到明显的作用。本文重点分析如何把SE0引入 XHTML+CSS网页设计中,以优化网页结构。
1.搜索引擎优化的作用
据中国互联网网络信息中心(CNNIC :)统计, 截止2015年末,我国搜索引擎用户规模达5.66亿 人,与2014年末相比,增加了 4 400万人,增长率 为8.4%。用户必须通过搜索引擎才能方便地获取 需要的信息。有关研究表明,用户在搜索信息时, 绝大部分用户只关注目标网站首页的信息,尤其 是网站首页的前三条信息。搜索引擎优化的根本 目的是提高营销网站在搜索目标网页中的名次, 以提高用户对营销网站的关注度和暴光率,也方 便用户检索企业和企业苘品的信息,方便企业与用户交流和沟通,从而扩大客户规模,拓展网络 营销业务,降低企业营销成本。搜索引擎优化具 有很高的商业价值。
2.搜索引擎优化方式
虽然利用SE0技术优化搜索引擎,优化方法 和策略很多,但主要是站外优化和站内优化两种 方式。
SE0搜索引擎的外部优化是通过反向链接, 把目标网站与用户感兴趣的网站链接,并在网站 中的友情链接交换、博客发布、文章投稿、分类目 录、广告购买、论坛等栏目或板块中发布目标网 站链接信息,使用户方便链接目标网站。
站内优化的核心是将网站中的关键词合理 地分配到网站的各个页面,以增加网页中关键词 的密度,使搜索引擎更容易识别网页的核心内容。 在设计网页时,不仅要美化网页页面,更要注意提 炼关键词和在页面的布局,因为它是目标网站能否 被用户搜索出来的关键。一般把关键词布局在页面 标题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 文件代码,降低文件容量;搜索引擎能够更好地索 弓I和识别网站信息,并准确地抓取页面内容。
通过XHTML+CSS网页设计,不仅会使网页容 量小、页面载人速度快,而且会使网页结构清晰、 界面友好。把文字或图片信息的样式文件置于 CSS中,搜索爬虫只采集HTML中的信息,能够 提高搜索效率;网页的关键词更集中、密度更大。 SEO技术更符合W3C标准网页设计的要求。
3.2网页模块分析
网站首页是网站的脸面,绝大多数用户都从 网站首页开始浏览网站。因此,应加强网站首页 设计。在设计网页时,应遵循“以用户为中心”和 “4W”原则。“4W”的第一个W是“what”,明确网 页放什么内容;第二个W是“why”,明确网页所 放内容的理由;第三个W是“whom”,明确谁看网 页内容;第四个W指“what effect”,明确网页布局 达到什么效果。企业网站页面一般包括网站logo 和banner模块、导航条模块、网站幻灯模块、产品 列表模块、成功案例模块、公司介绍模块等,其结 构如图1所示。

由于SEO技术优化搜索引擎的目的是方便 用户通过关键词检索目标网站,因此,必须按照用 户对网页各模块关心程度的强弱,布局页面模块。
1)“企业头部”和“导航模块”,是网页的基本 模块,是用户检索目标网站和搜索引擎识别网页 面的核心;
2)“网站幻灯图”模块,展示企业核心产品的 图片,强化用户的视觉感,突显产品特点,提高广 告宣传效果;
3)“产品分类”模块,是用户关心的核心内容。 商品分类目录置于页面的左侧,企业推荐产品模 块置于右侧,方便用户访问;
4)“成功案例”模块,将企业积累的以往客户 名录置于网页,以增强用户的信任;
5)“公司介绍”模块,着重展示企业形象。
3.3网页CSS样式命名规范
按照CSS命名规则命名,不仅方便网站维护 和修改CSS代码,而且还能加强搜索引擎的优化 和方便记忆。网页的CSS命名规则如表1所示。

网页中常用名的CSS代码如下:
<body>
<!—头部开始—>
<div class="header">
<div class="logo"></div>
<div class= "banner"></div>
</div>
<!—头部结束—>
<!--导航开始-->
<div class=" nav" ></div>
<!—导航结束—>
<!—幻灯开始-->
<div class="img"></div>
<!--幻灯结束-->
<!—产品开始—>
<div class="list">
<div class="list_left"></div>
<div class二"list_right"></div>
</div>
<!--产品结束一>
<!--案例开始-->
<div class="success"></div>
<!―案例结束-->
<!--企业介绍开始-->
<div class="info"></div>
<!--企业介绍结束-->
<!--尾部开始-->
<div class="footer"x/div>
<!—尾部结束—>
</body>
按照规则命名和编写标准代码,不仅能保证 网页结构清晰、命名规范,而且便于识别和后期 修改。
3.4非文本信息的处理
搜索引擎通过名为“spider”的小程序抓取网 页。因此,在网站设计过程中,必须重视spider抓 取网页的能力。spider仅能读取页面的文本内容, 无法选取和处理Flash、图片等非文本信息,也无 法识别和处理flash、图片中的文字信息。然而,在 网页制作过程中,不可避免使用图片,以增强用 户的视觉体验。因此,必须解决spider不能识别和 处理非文本信息的问题。采用图文混排方式,并对 图片进行SEO技术处理,可以解决这个问题。在< img>标记中,加人ALT属性,属性内容为图片中 的文字内容。例如,在<img src=”l.jpg” alt=”起重 机产品图片”/>中,alt的内容就是图片中的文字 信息,这样搜索引擎就可以识别和处理图片中的 信息,以便于抓取。虽然flash可以使页面更加生 动,但是一般尽量不要在网页中使用flash。如果 必须使用flash,在flash页面创建供搜索引擎抓 取的文本索引页面,并创建超级链接索引到文本 页面。由于搜索引擎不能识别js文件,重要的内 容不要使用js文件输出,并且尽量不使用iframe 框架编写文件。
3.5 XHMTL标记语义化
XHMTL标记语义化就是对内容结构化。选 择合适的标签,以实现代码语义化,便于开发者 阅读和写出更好的代码,方便浏览器爬虫更好地 解析内容。通过XHMTL标记语义化和SEO技 术,与搜索引擎建立良好的联系,有助于spider抓 取更多的有效信息。由于spider依靠标签确定上 下文和关键字的权重,应把标题置于权重较大的 标签之中。例如,在每个页面只能出现一次H1标 签,可以多次出现H2标签,但是H1标签的权重 高于H2标签,仅次于title的权重,应把标题置于 H1标签而不是H2标签。
在线咨询
上海园丁鸟网络科技有限公司 备案号:沪ICP备17046445号-1 友情链接:网站优化公司 SEO教程 大连SEO 响应式织梦模板 织梦主机 织梦模板   
在线客服
热线电话

扫一扫 加我微信