鹏博科技5年专注手机APP软件开发,微信公众号开发,国内领先的APP定制开发公司,您身边最实在的软件服务商
当前位置: 手机app开发公司 > ios资讯
 
 
QQ在线咨询
售前咨询热线
400-0110-567
售后咨询热线
15124669933

网站制作前端代码里的优化原则

16 2017-05
编辑:鹏博科技 2017-05-16 13:09:26   来源:哈尔滨APP开发公司    阅读:
    随着 WEB2.0 设计标准的普及,人们越来越关注 XHTML+CSS 的标准化设计,它对搜索引擎优化起到明显的作用。本文重点分析如何把 SEO 引入HTML+CSS 网页设计中,以优化网页结构。哈尔滨网站建设
 
用SEO思维来优化页面结构
  搜索引擎优化的根本目的是提高营销网站在搜索目标网页中的名次,以提高用户对营销网站的关注度和暴光率, 也方便用户检索企业和企业商品的信息,方便企业与用户交流和沟通,从而扩大客户规模,拓展网络营销业务,降低企业营销成本。 搜索引擎优化具有很高的商业价值。
 
  搜索引擎优化方式虽然利用 SEO 技术优化搜索引擎,优化方法和策略很多,但主要是站外优化和站内优化两种方式。SEO 搜索引擎的外部优化是通过反向链接,把目标网站与用户感兴趣的网站链接,并在网站中的友情链接交换、博客发布、文章投稿、分类目录、广告购买、论坛等栏目或板块中发布目标网站链接信息,使用户方便链接目标网站。
 
  站内优化的核心是将网站中的关键词合理地分配到网站的各个页面,以增加网页中关键词的密度,使搜索引擎更容易识别网页的核心内容。在设计网页时,不仅要美化网页页面,更要注意提炼关键词和在页面的布局因为它是目标网站能否被用户搜索出来的关键。一般把关键词布局在页面标 题 TITLE 标 签 、 META 标 签 keywords 属 性 、META 标签属性、主次导航处等位置,并通过网站内链接串联相关页面,方便用户调用相关页面的内容,以提高页面关键词的粘度。
 
  由于网站是由若干网页组成,网页设计是网站建设的基础, 必须通过 SEO 技术设计网页,以提高搜索引擎的优化效果。
 
  SEO 在网页设计中的应用
 
  随着互联网技术的发展,网页设计技术发生了巨大的变化,从原始的“记事本”式网页设计,到table 表格网页设计,再到 XHTML+CSS 网页设计,以及 HTML5 的自适应网页设计。本文主要分析利用 SEO 技术进行 XHTML+CSS 网页设计的方法。
 
  XHTML+CSS 应用
 
  按照网页结构化标准设计的要求,把网站页面内容文件与其呈现格式文件相分离,简单地说就是用 XHTML+CSS 格式写所有字体、样式等文件,并把 CSS 和 Javascript 置 于 单 独 的 文 件 中 。 用HTML 格式写文字内容文件,不使用 CSS 代码,直接调用外部文件。 通过这种方式,能够精简 HTML文件代码,降低文件容量;搜索引擎能够更好地索引和识别网站信息,并准确地抓取页面内容。
 
  通过 XHTML+CSS 网页设计,不仅会使网页容量小、页面载入速度快,而且会使网页结构清晰、界面友好。 把文字或图片信息的样式文件置于CSS 中,搜索爬虫只采集 HTML 中的信息,能够提高搜索效率;网页的关键词更集中、密度更大。SEO 技术更符合 W3C 标准网页设计的要求。
 
  网页模块分析
 
  网站首页是网站的脸面,绝大多数用户都从网站首页开始浏览网站。 因此,应加强网站首页设计。 在设计网页时,应遵循“以用户为中心”和“ 4W ”原则。
 
  “ 4W ”的第一个 W 是“ what ”,明确网页放什么内容
 
  第二个 W 是“ why ”,明确网页所放内容的理由
 
  第三个 W 是“ whom ”,明确谁看网页内容
 
  第四个 W 指“ what effect ”,明确网页布局达到什么效果。
 
  企业网站页面一般包括网站 logo和 banner 模块、导航条模块、网站幻灯模块、产品列表模块、成功案例模块、公司介绍模块等,由于SEO 技术优化搜索引擎的目的是方便用户通过关键词检索目标网站,因此,必须按照用户对网页各模块关心程度的强弱,布局页面模块。
 
  1 )“企业头部”和“导航模块”,是网页的基本模块,是用户检索目标网站和搜索引擎识别网页面的核心
 
  2 )“网站幻灯图”模块,展示企业核心产品的图片,强化用户的视觉感,突显产品特点,提高广告宣传效果
 
  3 )“产品分类”模块,是用户关心的核心内容。商品分类目录置于页面的左侧,企业推荐产品模块置于右侧,方便用户访问;
 
  4 )“成功案例”模块,将企业积累的以往客户名录置于网页,以增强用户的信任;
 
  5 )“公司介绍”模块,着重展示企业形象。
 
  网页 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"></div>
<! -- 尾部结束 -->
</body>
 
  按照规则命名和编写标准代码,不仅能保证网页结构清晰、命名规范,而且便于识别和后期修改。
 
  非文本信息的处理
 
  搜索引擎通过名为“ spider ”的小程序抓取网页。 因此,在网站设计过程中,必须重视 spider 抓取网页的能力。 spider 仅能读取页面的文本内容,无法选取和处理 Flash 、图片等非文本信息,也无法识别和处理 flash 、图片中的文字信息。 然而,在网页制作过程中,不可避免使用图片,以增强用户的视觉体验。 因此,必须解决 spider 不能识别和处理非文本信息的问题。 采用图文混排方式,并对图片进行 SEO 技术处理,可以解决这个问题。在  标记中,加入 ALT 属性,属性内容为图片中的文字内容。 例如,在  中, alt 的内容就是图片中的文字信息,这样搜索引擎就可以识别和处理图片中的信息,以便于抓取。 虽然 flash 可以使页面更加生动,但是一般尽量不要在网页中使用 flash 。 如果必须使用 flash , 在 flash 页面创建供搜索引擎抓取的文本索引页面,并创建超级链接索引到文本页面。 由于搜索引擎不能识别 js 文件, 重要的内容不要使用 js 文件输出, 并且尽量不使用 iframe框架编写文件。
 
  HMTL5 标记语义化
 
  HMTL 5标记语义化就是对内容结构化。 选择合适的标签,以实现代码语义化,便于开发者阅读和写出更好的代码,方便浏览器爬虫更好地解析内容。 通过 HMTL 5标记语义化和 SEO 技术,与搜索引擎建立良好的联系,有助于 spider 抓取更多的有效信息。 由于 spider 依靠标签确定上下文和关键字的权重,应把标题置于权重较大的标签之中。 例如,在每个页面只能出现一次 H1 标签,可以多次出现 H2 标签,但是 H1 标签的权重高于 H2 标签,仅次于 title 的权重,应把标题置于H1 标签而不是 H2 标签。(出自:长春57SEO)