单页应用SEO优化

之前做SEO优化的项目都是多页应用，从这个界面的某个链接打开一个新的页面，该页面的head或body中的友好信息即会自动被百度爬虫捕获，一切都是那么的顺。

单页应用SEO不被百度收录

当界面转变为单页应用后。标志性的锚点做法并不被百度和谷歌收录，谷歌虽然不收录以#为特性的锚点，但是收录以#!为特性的锚点，因为这个缘固谷歌做SEO优化就简易了很多。然而百度你懂得，那么做为一个前端开发人员，我们该做些什么。

当把一个单页应用的代码敲完，开心的看着快速的响应和无等待的数据刷新时，内心上对单页应用是很喜爱的。

如果这个应用只是做为一个管理平台来说，那么工作已经完成，KPI已达成。那如果网站类型是面向用户的信息展示或者是我等用于刷存在感的个人博客，看着site:**.com的收录结果，那么这将只是开始。

毕竟酒香不怕巷子深只是一个传说，在这个互联网时代，做着互联网的行业，却不能在互联网的搜索引擎上展现，酒或许香溢，却也难免无人问津。

我从14年开始，做了两件事，一件事是开发跨框架的表格插件，另一个是开发运维自已的个人博客。当博客上线后，并没有感觉什么，便秘似的产出几个博文后，发现在百度上无影无踪，多少有些伤感，site:lovejavascript.com后仅有一个首页的链接。

SEO优化步骤

接下来，以个人博客的开发经验来对单页应用的SEO优化做一个总结。当然我们看一下所在的区域，谷歌暂时不去探讨，以下都是针对于百度的处理方法。

做出来后，觉着其实很简单。

首先，在首页增加了一个隐藏的区域，将一些博文链接嵌入至这个区域。

<div class="seo-area">
    <h1 title="拭目以待的博客">拭目以待的博客</h1>
    <h2 title="博文列表">
        <a href="http://www.lovejavascript.com/seo/content.html?id=6" title="前端国际化">前端国际化</a>
    </h2>
</div>

这个页面需要通过后端服务进行返回，而非通过异步加载。

经过一周左右的时间，通过site:lovejavascript.com，即可在百度上看到这些链接已被收录。点击查看效果

下一步，将这个区域更换为境像博文入口。

<div class="seo-area">
    <h1 title="拭目以待的博客">拭目以待的博客</h1>
    <h2 title="博文列表">
        <a href="/seo/index.html" title="</