SEO前端篇（一）页面布局

由于工作需要，在此对seo的一些相关知识做一个总结。

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

一、SEO定义

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

二、搜索引擎的工作原理　

　　当我们在输入框中输入关键词，点击搜索或查询时，然后得到结果。深究其背后的故事，搜索引擎做了很多事情。

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

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

　　因此可以得出结论，需要优化体现的部分尽量不用flash和js来加载，用HTML直接方式加载。

有了上面的了解，那么我们只需要了解“蜘蛛”爬取的规则即可。当然百度和谷歌等搜索引擎大佬也没有公示其相应的爬取收录规则，因此这里只能对自己实际的应用和网上的一些资料做一个整合。

三、蜘蛛的规则

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

一些人认为网站建好后首先到各大搜索引擎免费登录你的网站。其实这个真是多此一举，360已经做过相应测试（他们新建一个网站发布然后通过百度访问，第二天该关键词的网站显示在了首页）。所以这个搜索引擎会自动做的工作，我们就不要在这里长篇大论，盲人瞎马了。只要发布了，有人访问蜘蛛就会自己来。

2、留住蜘蛛

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

　　网页的静态化

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

　　网页的三层结构

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

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

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

标题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" 和不加完全是两个概念，你加了直接在另一个页面打开，不加在自身页面打开，别人一般还会跳回来。这就是友情链接的艺术之一。