学习了慕客网上的“SEO在网页制作中的应用‘’，下面来进行小小的学习总结，顺便梳理下知识。所谓学而不思则罔思而不学则殆。下面开始正文。

　　一、搜索引擎的工作原理

　　搜索引擎的基本工作原理包括如下三个过程：首先在互联网中发现、搜集网页信息；同时对信息进行提取和组织建立索引库；再由检索器根据用户输入的查询关键字，在索引库中快速检出文档，进行文档与查询的相关度评价，对将要输出的结果进行排序，并将查询结果返回给用户。

　　1、抓取网页。每个独立的搜索引擎都有自己的网页抓取程序爬虫（spider）。爬虫Spider顺着网页中的超链接，从这个网站爬到另一个网站，通过超链接分析连续访问抓取更多网页。被抓取的网页被称之为网页快照。由于互联网中超链接的应用很普遍，理论上，从一定范围的网页出发，就能搜集到绝大多数的网页。
　　2、处理网页。搜索引擎抓到网页后，还要做大量的预处理工作，才能提供检索服务。其中，最重要的就是提取关键词，建立索引库和索引。其他还包括去除重复网页、分词（中文）、判断网页类型、分析超链接、计算网页的重要度/丰富度等。
　　3、提供检索服务。用户输入关键词进行检索，搜索引擎从索引数据库中找到匹配该关键词的网页；为了用户便于判断，除了网页标题和URL外，还会提供一段来自网页的摘要以及其他信息。

　　二、SEO的概念

　　SEO（Search Engine Optimization）:汉译为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。SEO的目的是：为网站提供生态式的自我营销解决方案，让网站在行业内占据领先地位，从而获得品牌收益；SEO包含站外SEO和站内SEO两方面；SEO指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为；使网站更适合搜索引擎的索引原则又被称为对搜索引擎优化，对搜索引擎优化不仅能够提高SEO效果，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。

　　三、前端开发中如何优化seo

　　(1)网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。

　　一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬，“万一天黑迷路了怎么办”。并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：

　　1. 控制首页链接数量

　　网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。

　　因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

　　2.扁平化的目录层次，尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构，比如：“植物”--> "水果" --> "苹果"、“桔子”、“香蕉”，通过3级就能找到香蕉了。

　　3.导航优化

　　导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，<img>标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。

　　其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

　　4. 网站的结构布局--不可忽略的细节

　　页面头部：logo及主导航，以及用户的信息。

　　页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。

　　页面底部：版权信息和友情链接。

　　特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。

　　5.控制页面的大小，减少http请求，提高网站的加载速度。

　　一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。

　　

　(2)网页代码优化

　　1.<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。

　　2.<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。

　　3.<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。

　　4.<body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航的等。

　　5.<a>标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。

　　6.正文标题要用<h1>标签：“蜘蛛” 认为它最重要，若不喜欢<h1>的默认样式可以通过CSS设置。尽量做到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。

　　7.<br>标签：只用于文本内容的换行
　　8.表格应该使用<caption>表格标题标签

　  9.<img>应使用 "alt" 属性加以说明

　　10.<strong>、<em>标签 : 需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签。

　　11、文本缩进不要使用特殊符号 &nbsp; 应当使用CSS进行设置。版权符号不要使用特殊符号 &copy; 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。

　　12、巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。

　　13.重要内容不要用JS输出，因为“蜘蛛”不认识

　　14.尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容

　　15.谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。

　　16. 不断精简代码

　　17.js代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后。

seo在前端网页制作的应用的更多相关文章

  1. 《SEO在网页制作中的应用》视频笔记

    学习了慕课网<SEO在网页制作中的应用>视频,今天将里面的知识整理一下. 一.SEO介绍 1.  搜索引擎工作原理 搜索引擎现在主流有百度.谷歌.360,他们都有庞大的搜索引擎数据库,每个 ...

  2. 影响SEO 搜索引擎优化的网页制作细节

    1.将css与javascript全部用下边的方法分离到外部文件中去. [html]<link rel=”stylesheet” type=”text/css” href=”css/style. ...

  3. 转载：手机网页制作的认识（有关meta标签）

    下面是手机网页的一些认识: 一.<meta name="viewport" id="viewport" content="width=devic ...

  4. 学习网页制作中如何在正确选取和使用 CSS 单位

    在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...

  5. Dreamweaver CS5网页制作教程

    说到Dreamweaver这个网页制作神器,不由得想起在学校里上的选修课,那是的我们只知道 table 布局,只知道构建网站最方便的是使用“所见即所得”编辑器.回忆一下,真的是很怀旧啊! 虽说咱现在大 ...

  6. 一个基于React整套技术栈+Node.js的前端页面制作工具

    pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量.此项目创意来自网易乐得内部项目nfop中的pagemaker项目.原来项目的前 ...

  7. IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

    学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...

  8. （旧）子数涵数·DW——网页制作的流程

    PS:这是我很早以前的一个废掉的项目. 当时用的还是table排版,现在基本都是div了吧. 这个项目前段时间,我还抢救过一次,后来还是放弃了. 先行.网页制作的流程分为哪些呢? 一.网站策划(当时, ...

  9. 离线网页制作器（beta1.0）

    package hhuarongdao; /* *使用方法: 先选择保存路径,然后输入相应的网址, *然后会得到那个网页的离线版的 内容 * */ import java.awt.BorderLayo ...

随机推荐

  1. Robot Framework（五）使用测试库

    使用测试库 测试库包含那些最低级别的关键字,通常称为 库关键字,实际上与被测系统交互.所有测试用例总是使用某些库中的关键字,通常是通过更高级别的用户关键字.本节介绍如何使用测试库以及如何使用它们提供的 ...

  2. 如何查看系统的界面,比如费用申请单的序时簿界面引用的是哪一个ListUi.快捷键alt+shift+d 然后选中该ListUI大框框,就可以看到引用的是哪一个了.

    如何查看系统的界面,比如费用申请单的序时簿界面引用的是哪一个ListUi.快捷键alt+shift+d 然后选中该ListUI大框框,就可以看到引用的是哪一个了.

  3. nyoj113-字符串替换

    字符串替换 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 编写一个程序实现将字符串中的所有"you"替换成"we" 输入 输入包 ...

  4. idea整合eclipse后快捷键

  5. 使用Linux自带的命令logrotate对Nginx日志进行切割

    说明: Nginx安装目录:/usr/local/nginx/Nginx日志目录:/var/log/nginx/error/*.log /var/log/nginx/access/w1/*.log / ...

  6. python-pycharm windows安装

    pycharm_IDE安装 1. 首先先pycharm官网,或者直接输入网址:http://www.jetbrains.com/pycharm/download/#section=windows,下载 ...

  7. PAT 1079. Total Sales of Supply Chain

    A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyone invo ...

  8. 15.Hibernate一对多双向关联映射+分页

    1.创建如下数据库脚本 --创建用户信息表 --编号,用户名,密码,年龄,性别,昵称,手机,地址,管理员,图像地址 create table users ( id ) primary key, use ...

  9. BZOJ 1500 Luogu P2042 [NOI2005] 维护数列 (Splay)

    手动博客搬家: 本文发表于20180825 00:34:49, 原地址https://blog.csdn.net/suncongbo/article/details/82027387 题目链接: (l ...

  10. APP漏洞自动化扫描专业评测报告（下篇）

    上篇.中篇回顾:通过收费情况.样本测试后的扫描时间.漏洞项对比以及扫描能力这几个方面对阿里聚安全[1].360App漏洞扫描[2].腾讯金刚审计系统[3].百度移动云测试中心[4]以及AppRisk ...