漫谈前端开发中的SEO

新博客地址：http://baiyuming.top/

什么是SEO

SEO全称是搜索引擎优化，是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的排名的方式。SEO为了从搜索引擎获得更多的免费流量，从网站结构、内容建设方案、用户活动传播、页面结构等进行合理规划，使网站更适合搜索引擎检索。
SEO相关的HTML标签

title

<title>页面的标题</title>，必须有的东西，非常之重要
keyrowds

<meta name="keywords" content="keyWord1,keyWord2"/>，定义为搜索引擎提供的关键字列表，页面的呃主关键词都可以列举在这里
description

<meta name="description" content="页面描述">。这一部分告诉搜索引擎当前网页的主要内容，对有些搜索引擎的排名影响不大（如百度）但是对用户体验方面还是很有用的
robots

<meta name="Robots" content="nofollow"/>，告诉搜索引擎哪些页面需要索引，哪些页面则不需要，它对页面上的所有标签生效，包括站内站外。比如nofollow属性，如果在a标签上加上了nofollow，如<a
rel="external nofollow" href="">锚文本</a>，搜索引擎将不会抓取这个连接，这样可以防止权重分散到一些无关页面。

content中的参数可以设定为all,none,index,noindex,follow,nofollow，默认为all。
H1

<h1>标题</h1>，告诉搜索引擎一段文字的标题，h1标题的权重较大，而h2、h3、h4对搜索引擎没有多大价值，加上可以增加用户体验
alt和title

尽量在img标签中加入alt属性如<img src="" alt="这里加上关键词"/>，alt会影响搜索排名

而a标签中的title也是一样，虽然效果微弱
语义化HTML

在HTML5中新增了很多语义化的HTML5元素，如<header>,<section>,<footer>,<article>,<aside>,<nav>等等，这些语义化元素能帮助搜索引擎快速过滤掉不重要的信息，而从中快速提取出网页的主题内容，同时语义化的HTML也能够有较强的可访问性
对搜索引擎不友好的示例

网页中大量采用图片或者Flash等富媒体形式，没有可以检索的文本信息

网页没有标题，或者标题中不包含有效关键字

正文中有效关键词比较少（小于文章的2%~8%）

网站导航系统让搜索引擎看不懂

大量动态网页让搜索引擎无法检索

没有被其他已经被搜索引擎收录的网站所链接

网站中充值大量欺骗搜索引擎的垃圾信息，如过渡页，桥页、颜色与背景色相同的文字

网站中缺少原创内容，完全照搬别人的内容

一些好的建议

保持文章原创性

保持文章的原创性才不会被网络蜘蛛所唾弃，由于搜索引擎中已经保存了大量的数据，经过比对后，如果当前页面与已存在搜索引擎中的页面的相似度过高，将降低当前页面的权重。所以我们需要保持网页内文章的原创性。一般情况下至少要保持与其他文章的30%的不同
关键字的堆砌

众所周知，在网页中的meta标签中定义keywors对搜索引擎来说非常重要。而搜索中的关键词也应当堆砌在标题和正文中。其中标题由于字数有限，应当尽可能的出现较多的关键词，而正文中关键词也应当占有一定比重（2%~8%）。另外在文章中应当保持关键词的统一性，一个名称有多种叫法的时候尽量只是用其中的一种。同时出现在正文中的关键词应当加粗或家斜体来进行区分，让搜索引擎优先考虑
标题

标题不应当太长，最好不超过15个汉字，其中尽量多的堆砌关键词，同时保证标题新颖，符合用户的搜索习惯。尽量将主关键词放在标题的前半部分
文章摘要

在文章摘要中必须包含关键词，尽可能的重复页面的关键词，但是不要堆积，一般来说重复三遍没有问题。同时文章摘要的文字没有严格的字数要求，但一般以80-100字为宜
正文内容

正文内容需要保持原创性，同时在前100字中（或是首段）最好能出现关键词。同时需要保持文章的长度，如果文章过长，应当采用分页的方式，一般一页的长度在1000字以下。短的文章有助于搜索引擎提取和分析。在正文中需要一定的关键词堆叠（2%~8%）
AJAX和FLASH

在开发中经常会使用Flash创建绚丽的导航，但实际上Flash导航中的链接是无法被网络蜘蛛抓取到的。而AJAX也是一样，因为AJAX是动态加载的，所以它不易被搜索引擎所抓取。所以尽量避免过度使用AJAX和FLASH，尤其不要将重要的内容通过AJAX和FLASH加载。如果网站有较多AJAX加载的内容话，可以提供一个非AJAX加载的静态替代网页
图片和链接

我们可以把网络蜘蛛看做一个基于文字的浏览器，它无法获取到图片内部的信息。因此，如果需要通过图片传达比较重要的信息的话，需要将信息写在alt属性中，传达给搜索引擎。链接也可以通过类似的title属性来添加相应的说明。在alt和title中给与精确的描述，并尽可能的输入关键词，这样能告诉搜索引擎图片和链接是做什么的