SEO前端篇（一）页面布局

因为工做须要，在此对seo的一些相关知识作一个总结。

首先要了解必要的基础知识，什么是SEO以及搜索引擎的工做原理。这样才能继续下面的话题。

1、SEO定义

　　SEO全称：Search English Optimization，搜索引擎优化。自从有了搜索引擎，SEO便诞生了。为了提高网页在搜索引擎天然搜索结果中的收录数量以及排序位置而作的优化行为。简言之，就是但愿百度等搜索引擎能多多咱们收录精心制做后的网站，而且在别人访问时网站能排在前面。

 

2、搜索引擎的工做原理　

　　当咱们在输入框中输入关键词，点击搜索或查询时，而后获得结果。深究其背后的故事，搜索引擎作了不少事情。

　　在搜索引擎网站，好比百度，在其后台有一个很是庞大的数据库，里面存储了海量的关键词，而每一个关键词又对应着不少网址，这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的，这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”天天在互联网上爬行，从一个连接到另外一个连接，下载其中的内容，进行分析提炼，找到其中的关键词，若是“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据库。反之，若是“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。

　　一个关键词对用多个网址，所以就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程当中，就存在一个问题：“蜘蛛”可否看懂。若是网站内容是flash和js，那么它是看不懂的，会犯迷糊，即便关键字再贴切也没用。相应的，若是网站内容是它的语言，那么它便能看懂，它的语言即SEO。

　　所以能够得出结论，须要优化体现的部分尽可能不用flash和js来加载，用HTML直接方式加载。

 

有了上面的了解，那么咱们只须要了解“蜘蛛”爬取的规则便可。固然百度和谷歌等搜索引擎大佬也没有公示其相应的爬取收录规则，所以这里只能对本身实际的应用和网上的一些资料作一个整合。

3、蜘蛛的规则

一、让蜘蛛知道你的网站。

一些人认为网站建好后首先到各大搜索引擎免费登陆你的网站。其实这个真是画蛇添足，360已经作过相应测试（他们新建一个网站发布而后经过百度访问，次日该关键词的网站显示在了首页）。因此这个搜索引擎会自动作的工做，咱们就不要在这里长篇大论，盲人瞎马了。只要发布了，有人访问蜘蛛就会本身来。

二、留住蜘蛛

蜘蛛来了也会走，蜘蛛跟人工访问网页同样。这里着重看了将下网页静态化和三层结构。

　　网页的静态化

　　网页实现静态化，重要的信息经过HTML直观的展示。同时实现网页文字与图片等其余信息的分离，图片要有专门的图片服务器，大的资源文件分离到文件服务器。作到尽可能减小应用网页的大小，最好控制在120KB以内，能作到秒加载。一些加载太慢的网页，用户会走，同时蜘蛛也会走，没时间等你。舞台只留给准备好的人。

　　网页的三层结构

　　曾今在网上看到有人说能让蜘蛛迷路，我不觉感到可笑。纵然能，也是暂时的，蜘蛛是会进化的，不要拿你一我的的智商去挑战一个优秀的团队。一个程序陷入无限的死循环那是程序员的无知无能，但凤毛菱角。通常来说，你想要展现的部分好比商品最好是三层结构以内，好比：手机 —> 华为 —> HUAWEI P30 就能看到一个详细的SPU。太繁琐别人找得烦，蜘蛛也闲烦，结构太深蜘蛛不是迷路跟着你的套路走而是直接跳出，不是蜘蛛over而是你over。

三、蜘蛛爬取的关键部分——标签。

固然网上有一些总结的比较细的，仅供参考。

标题title	10 分	我的认为这个权重高，应该是10分
内部链接	10分
域名	7分
<h1>和<h2>	5分
页面第一个段落的开始部分	5分
类似关键词	4分
路径和文件名	4分
<b>和<strong>	1分
内容	1分
img等的Title属性	1分
img等的alt属性	0.5分
description	0.5分	我的认为这个权重更高，应该是10分
keywords	0.05分	我的认为这个权重更高，应该是10分
每一个句子的开始部分	1.5 分

 

 

 

　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 个人理解是首先蜘蛛是爬取 title、description、keywords三个标签通过第一轮过滤，再在这里面分析有价值的数据。否则即便大数据也会累死，并且不排序搜索引擎对一些中小型网站带有色眼镜。如今更是有商业元素的加成，所以上面的这些尽可能作到人无我有，人有我优。

下面是三大电商网站三个标签的一个对比

	天猫	淘宝	京东	拼多多
title	<title>天猫tmall.com--理想生活上天猫</title>	<title>淘宝网 - 淘！我喜欢</title>	<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>	<title class="next-head">拼多多 新电商开创者</title>
keywords	<meta name="keywords" content="商城,网上购物,网购,进口食品,美容护理,母婴玩具,家用电器,手机数码,家居生活,服饰内衣,养分保健,钟表珠宝,饰品箱包,汽车生活,图书音像,礼品卡">	<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">	<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">	<meta name="keywords" content="拼多多 拼多多商城 pinduoduo 拼 拼团 团购 团购app 购物 零食 划算 好货" class="next-head">
description	<meta name="description" content="天猫，中国线上购物的地标网站，亚洲超大的综合性购物平台，拥有10万多品牌商家。每日发布大量国内外商品！正品网购，上天猫！天猫千万大牌正品,品类全，一站购，支付安全，退换无忧！理想生活上天猫!">	<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各种服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">	<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通信、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">	<meta name="description" content="拼多多做为新电商开创者，致力于将娱乐社交的元素融入电商运营中，经过“社交+电商”的模式，让更多的用户带着乐趣分享实惠，享受全新的共享式购物体验。" class="next-head">

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 能够看到淘宝用了最多的关键词28个，其中Keywords的权重可想而知。所以单个页面（特别是首页）30个以内的关键词，我想蜘蛛是接受的。

description描述，那就好好描述。有好多用关键词代替的，蜘蛛会不会认为这是没用的描述呢？因此这里仍是跟风吧，跟着大佬们走。好好描述一件事情，好好说明一件事情，用别人听得懂的大白话。

网站标题title。网站标题就是代码中的title标签里面的内容，不要堆砌关键词，合理分布，通常是3-5个关键词，关键词之间用_（下划线）链接,关键词越往前权重越高。注意写好关键词后不会频繁修改，常常修改排名确定会掉。

作好了上面的三个标签，尽可能把页面多放点有用的内容，而后按着上面罗列的14个标签套，用的到的就好好用格式规范完整。

固然前端技术也是博大精深，就拿一个a标签来讲吧。你一个外链加 target="_blank" 和不加彻底是两个概念，你加了直接在另外一个页面打开，不加在自身页面打开，别人通常还会跳回来。这就是友情连接的艺术之一。