SEO在网页中的应用

图片资源链接：https://pan.baidu.com/s/1q_VWJlImxcqvvumFd-YcEA 密码：sfwg

1、SEO简介：

SEO（Search Engine Optimization）搜索引擎优化，提高网站浏览量而做的优化手段

作用：提高权重和浏量；监测浏量

SEO vs SEM(Search Engine Marketing 搜索引擎营销)

SEM的方法包括搜索引擎优化(SEO)、付费排名、精准广告以及付费收录，意思是SEM包括SEO和竞价。SEO也是SEM的一种方式。

名词解释：

ip:独立ip访问用户，ip段

pv:页面浏览或点击量（刷新算一次）

uv：独立访客数

2、搜索引擎工作原理

蜘蛛爬行抓取，建立索引数据库，用户搜索，搜索引擎根据相关性和权重等排名算法，返回结果。

 

白帽SEO和黑猫SEO

（1）白帽SEO：其改良和规范网站设计的作用，是网站获取合理的流量；乱加关键字，乱加外链；

（2）黒帽SEO：这类行为利用搜索引擎政策缺陷来获取更多用户的访问量，属于欺骗搜索引擎的

3、如何做白帽SEO   

SEO优化最重要的三要素： 1.标题 2.关键词 3.描述

（1）对网站标题，关键字，描述精心设计，反映网站定位，让搜索引擎知道网站是做什么的；

                                关键词：

1.头脑风暴 

2.利用搜索引擎相关搜索

3.工具      百度指数，百度统计，大数据，中国站长联盟CNZZ 友盟+ ，数据专家，爱站网，站长工具

4.长尾关键词

（2）网站内容优化；（增加关键字密度，增加长尾关键字...）

                        内容: 

      复制搜索引擎不喜欢 

      伪原创（论文技巧），哈哈，有工具 

      原创，（每天一篇，蜘蛛养成习惯）

      百度有保护原创的代码

     内容质量：更新、质量、原创、关键词密度

（3）合理设置Robot.txt文件

（4）网站地图；

（5）增加外链； 链接（文字，图片） 内链至少一个，面包屑导航推荐  外链 

（6）网站结构优化；（前端攻城狮的分内事！）

（7）页面代码优化。（前端攻城狮的职责所在！）

  (8) 域名好坏： 域名有关键词 域名历史很重要  空间重要（对移动端排名影响大） 

        域名的选择：

1.后缀选择(.com、.net、.org)

2.短域名

3.域名语义

4.域名的使用历史查询

 建站前先定位网站（关键词归类） 站内不要2个页面重复关键词

 TDK优化（标题，描述，关键词） 不要挂羊头卖狗肉，标题不要重复（内部竞争）  网站结构优化  扁平结构关键词易向首页集中

a.结构布局优化：用扁平化结构（层次结构超过三层小蜘蛛就不愿意爬了）

控制首页链接数量（中小网站100以内，页面导航、底部导航、锚文字链接等）

扁平化的目录层次（小蜘蛛跳转3次可以到达网站内任何一个内页，网站的设计主页、栏目、内容页，不要用纵线性的结构）

导航seo优化（头部、底部、内容部分，主导航、副导航、分类导航，尽量用文字，面包屑导航，在每个网站上留下面包屑，使用户可以了解网站组织形式，放于正文的左上方）

导航采用文字 页码

首页 1 2 3 4 5 6 7 8 9 10 下拉列表（最好）   不要上一页,下一页

网站的加载速度会影响小蜘蛛的爬行，页面最好不要超过100k

内容页面的布局细节:

左面正文，右面热门文章、相关文章，下面是版权信息及链接，栏目排布：首页123456789下拉选择最赞）

网站的加载速度会影响小蜘蛛的爬行，页面最好不要超过100k

b.网页代码优化（语义化代码）

div和span是Html中最没有语义的标签，搜索蜘蛛看不懂

1.代码去冗余(减少冗余代码、代码精简化、模块化)

2.自动化(工具：grunt、gulp、webPack、tinyPNG...)

3.语义化(p、h、a...)

A、title标题：强调重点

B、meta keywords关键词：列举几个关键词/简洁高效词语

C、meta description网页描述：高度概括网页的内容

以上信息不要堆积、重复

有利搜索引擎

1、a：访问外部链接时要加上 rel="nofollow"，告诉搜索引擎外部链接无需追踪，加上 title 说明

2、h1：搜索引擎外认为 h1 最重要，使用 css 调整，网页正文标题用 h1，副标题用 h2，其他不要乱用 h 标签

3、br 用于文本间的换行，用在 p 内，也可以用 <p><br/></p> 表示空行

4、caption：表格标题

5、img：使用 title、alt 说明

6、<strong><em>表示强调，<em>的权重仅次于<strong>,如果只想表示加粗斜体，建议使用<b><i>,表示强调则使用<strong><em>

7、重要内容 HTML 代码放在最前面（使用 css 改变布局）

8、重要内容不要用 JS 输出（搜索引擎看不懂 JS）

9、尽量少使用 iframe 框架（搜索引擎不喜欢）

10、谨慎使用 display:none（搜索引擎会过滤掉其内容，设置 z-index/text-index 代替）

11、精简代码  结构样式行为分离

12、其它手段：1.提升客户体验（易用性、UI优化） 2.内容形式多样（视频、奇思妙想）3.代码属性的优化（alt、title、logo等）4、相关搜索引擎产品协助（文库、问答）

小贴士：

1、重要内容的HTML代码放在最前面：搜索引擎从上而下、从左往右抓取HTML，可以使用float改变栏目展现位置。
2、重要内容不要用JS输出：搜索引擎看不懂JS。
3、尽量少使用iframe框架：搜索引擎讨厌iframe，一般不读取iframe中内容。
4、谨慎使用display:none：搜索引擎会过滤其中内容；如果需要隐藏又想被抓取，可以给元素设置z-index、text-indent为极大负值。
5、精简代码：能用一个标签解决的事，就不要用两个标签。

网站浏览量提升之话术设置：

原标题：前端开发，如何才能高新就业---------------修改话术后：一个菜鸟前端的百万年薪之路

服务器的选择：

1.响应速度快

2.稳定

HTTP状态码：

1. 200(2开头的表示网页响应成功)

2. 300(302、304重定向)

3. 404(网页不存在)

4. 500(5、6开头的表示服务器错误)

4、产品诞生流程     

    市场分析 需求   潜在用户 目标用户 技术，运维  竞争（市场报告 行业分析） 自身资源

    市场调研 brd商业需求文档  mrd市场需求文档 prd产品需求文档（UML）   团队协作，避免主观判断 

    用户体验设计（UED）用户体验分类

    交互设计 （人工 环境 系统） 

    产品宣讲 获得认可 

    产品打造

    运营 

    更新 改进（360）

产品经理

产品    有形  无形 不易理解，需要体验

web1.0 单向，主人创造    2.0用户创造，知乎，豆瓣    3.0社交 淘宝

移动互联网 地理位置 重力感应 语音

微信营销

移动营销 ：微博 微信 客户端

营销微信头像本人，正派，正能量    姓名真实  个性签名，关键字

多用微信支付，防止封号（tenxun公司喜欢）

营销热点（朋友多 ） 流量为王（对别人帮助，少个人秀，广告少发）

自媒体公众号（链接 标题党） 广告做到第二层（阅读原文里面）

图文消息加文字（最好）

营销是术 产品是道（个人用品，课程，其他）

营销手法 模仿就是创新，要快（榜热点） 加热点关键词

（节约DM单，不需要彩印，二维码就可以了）

经典--不忽悠营销核心思维

核心 有效流量（愿意购买，使用，分享）

用户调查 明确目标（非常重要）

什么产品 产品为谁  解决什么问题（核心卖点）

找到流量最多媒介来源或者渠道

找到最有价值客户来自哪里

测试用户最喜欢的点击

内容制作

别把功夫全放在内容制作上

最求没意义的数量，精不在多

投放渠道

数据反馈（分析）

调整优化

我要的是什么（创业，高管，技术，30,40以后出路） 定目标

哪些热门行业（充当什么角色）

有些什么职位（自己特长，地域）

健康是所有基础

家人是我奋斗源泉

智慧是物质的基础

支柱行业（能源，矿产，通信）

功能行业（基金，拍卖，法律，人力资源）

催生类行业（IT，网游，中介） 能者多得，发展最好

市场，运营是好的职位（没有天花板） 垂直领域，再其他衍生

学会算账，算未来价值

职业规划

职业天花板，找前辈建议

文案

吸引注意力，介绍用户关心的事（特点，优点，利益） 大公司学习

微博：什么产品 产品为谁  解决什么问题（核心卖点） 有效流量为王

微信：创作内容好  淘宝优惠宣传（微博，网站，线下渠道，微信互推，社交平台，活动推广）

知识营销，容易获得转发  你妈逼你结婚了吗（参与感） 接近生活

充分利用工具

Yahoo军规

css单独写和外部区别

雅虎军规    ------如何提高网站速度的一些知识，被称为YAHOO军规

1. 尽可能减少HTTP请求数  每次有请求

2.使用CDN      最近地方放服务器，最快，最便捷

3.添加Expire/Cache-Control头  

4.启用Gzip压缩

5.将CSS放在页面最上方，防止重新渲染

6.将Script放在页面最下方   eg：死循环防止等太久

7.避免在CSS中使用Expressions（表达式）   性能不高

8.把Javascript和CSS都放在外部文件中

9.减少DNS查询  

多域：不同资源放在不同的ip

单域：所有资源放在一个IP

 

10.压缩JavaScript和CSS

1、去除不必要的空白符、格式符、注释符。

2、简写方法名、参数名，压缩JS脚本。

使用工具压缩 JavaScript 和 CSS

 

11.避免重定向                     重定向：重新请求下载资源，增加了http请求

12.移除重复的脚本  2次引用可以减少文件的大小，另外，就是可以避免出现未知的问题！

13.配置实体标签（ETAG）

entity tag(实体标签)

属于HTTP协议

受web服务支持

使用特殊的字符串来标识某个请求的资源版本

14.使AJAX缓存

post:每次都执行，不被缓存

get:同一地址不重复执行，可以被缓存

 

css和js写在页面的情况：

1.只应用于一个页面

2.不经常被访问

3.脚本和样式很少（少于20行）

 

·如何优化请求：文字，图片合并，js合并，css合并；

 

2 使用CDN内容分发网络

介绍：在离你最近的地方放置一台副本服务器，使你能够以最近的距离，最快的速度获取内容。

方法：添加副本服务器，都是钱啊

 

4：使用Gzip压缩

将资源在服务端口先进行压缩处理减小体积，然后在浏览器上在解压缩解释执行！

·把文件先压缩，再传输

·流程：原始79--本地压缩--服务器端对已经压缩的再压缩-

·优点：提升文件传输速度；（在服务器端配置）

将css放到head，防止出现网速慢的时候页面一片空白以减少重画 或者慢慢加载时的闪烁问题。

减少Javascript和css体积

 

 

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

1、AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2、Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

3、XHR的作用就是对Ajax请求进行监听。

4、XHR:XML HTTP REQUEST 输入字符就会有请求参数，包含关键字参数，返回结果是下列的html代码

当页面向服务器发送get或post请求是，它会监听这些请求，并在firebug下罗列起来。其中参数就是我们请求的字符或者名字（键值对）。响应是从服务器中回复的信息。

 

console.dir();显示对象的所有方法。

控制台日志和信息分组console.group;console.log().... console.groupEnd();

在代码中向控制台输入一下代码，可以获得从控制台输出的相关信息。

console.log();    console.info();    console.debug();    console.warn();    console.error();

4种占位符：%d %f %s %o;

console.info（）/debug（）/warn（）/error（） //信息/调试/警告/错误

console.group（）、console.groupEnd（） //输出信息分组

console.dir（） //显示所有对象的属性和方法

console.time（）/console.timeEnd（） //时间跟踪,记录代码运行时间 

 

进阶提示

1)不要放过所有可以点击的地方

2)不断地点击右键，收获惊喜

3)通过点击下拉菜单，发现有趣的功能

4)小甲虫所在的主菜单，扩展就在里面

chrome：控制台（更多的性能信息，更多的资源信息，时间线信息）；。。。最好的方式，是各种资源结合，使用它们最擅长最优秀的功能来助力web开发。

手机摄影技巧

火车 游轮 靠窗座位  桥 水晶球道具（倒影美丽）  夜景模糊处理

绿皮火车  道具重要（借助手势）

感觉写的好乱，现在没法改了。