单页应用SEO优化

baukh789

浏览: 27929 次
性别:
来自: 西安

最近访客更多访客>>

huang879819875

kiss_zhen

lzn-boy

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

经验总结

搜索引擎 html

原文链接：http://www.lovejavascript.com/#!zone/blog/content.html?id=17

之前做SEO优化的项目都是多页应用，从这个界面的某个链接打开一个新的页面，该页面的head或body中的友好信息即会自动被百度爬虫捕获，一切都是那么的顺。当界面转变为单页应用后。标志性的锚点做法并不被百度和谷歌收录，谷歌虽然不收录以#为特性的锚点，但是收录以#!为特性的锚点，因为这个缘固谷歌做SEO优化就简易了很多。然而百度你懂得，那么做为一个前端开发人员，我们该做些什么。
当把一个单页应用的代码敲完，开心的看着快速的响应和无等待的数据刷新时，内心上对单页应用是很喜爱的。如果这个应用只是做为一个管理平台来说，那么工作已经完成，KPI已达成。那如果网站类型是面向用户的信息展示或者是我等用于刷存在感的个人博客，看着site:**.com的收录结果，那么这将只是开始。毕竟酒香不怕巷子深只是一个传说，在这个互联网时代，做着互联网的行业，却不能在互联网的搜索引擎上展现，酒或许香溢，却也难免无人问津。
我从14年开始，做了两件事，一件事是开发基于jquery的表格插件，另一个是开发运维自已的个人博客。当博客上线后，并没有感觉什么，便秘似的产出几个博文后，发现在百度上无影无踪，多少有些伤感，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="博文列表">博文列表</a>
    </h2>
</div>

这个/seo/index.html指向的地址，是一个同步生成的博文列表，这个列表不需要样式也不对外公开。

生成列表页界面示例：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>拭目以待的博客</title>
</head>
<body>
    <h1>拭目以待的博客</h1>
    <ul>
        <li><a href="/seo/content.html?id=16">node乱码解决方法</a></li>
        <li><a href="/seo/content.html?id=15">悦跑圈——属于跑者的圈子</a></li>
        <li><a href="/seo/content.html?id=13">same-和而不同</a></li>
        <li><a href="/seo/content.html?id=11">querySelector</a></li>
        <li><a href="/seo/content.html?id=10">面试阿里失败总结</a></li>
        <li><a href="/seo/content.html?id=9">listManager使用详解</a></li>
        <li><a href="/seo/content.html?id=8">margin-top 外边距合并</a></li>
        <li><a href="/seo/content.html?id=7">JSON.stringify()执行出错</a></li>
        <li><a href="/seo/content.html?id=6">前端国际化</a></li>
        <li><a href="/seo/content.html?id=4">UEdit 使用总结</a></li>
        <li><a href="/seo/content.html?id=5">自定义表单、流程、菜单开发总结</a></li>
    </ul>
</body>
</html>

百度爬虫会根据首页中的博文列表链接对该页面中的博文信息进行获取，而我们要做的就是将这些生成的链接真实的指向一个详情页境像地址,这些详情页同样也是不需要样式支持，但是需要存在一些必要的SEO友好信息。如title,h1等。

生成详情页界面示例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="{{seo-title}}" />
<meta name="description" content="{{seo-title}}">
<meta name="author" content="{{seo-author}}">
<title>前端国际化</title>
</head>
<body>
<div class="content-warp">
<header class="content-header">
    <h2 class="content-title">前端国际化</h2>
        <div class="top-bar">
        <span class="author">拭目以待</span>
            发布于
            <time class="createDate">2016-02-24</time>
        </div>
    </header>
    <div class="content-main">
    博文详情
    </div>
</div>
</body>
</html>

通过site:**.com查看结果一般都需要等待一周左右，当然大站可能会更快些。seo优化是一个测试的过程，每次代码变更后都需要这么一个时间段，似乎太过于被动。

在这里提一个可以快速查看效果的方法，使用百度站长工具->网页抓取->抓取诊断可以实时的查看优化效果。虽然会有差异，但是总体上与结果相符。

到这里似乎已经结束，但是优化永无止静。再粘几个博客首页上需要注意的几点。

1、在首页body后紧根增加一个隐藏的H1标签，用于填写博客的简介及logo。

<h1 class="seo-h1">
<img src="http://lovejavascript.com/images/logo121-75.png" alt="loveJavaScript">
欢迎来到拭目以待的空间。前端技术日新月异，有人曾说过:"技术不进则死";你是否感受到了来自这方面的压力? 前端交流群：452781895
</h1>

2、在每个详情页增加百度主动推送代码，具体的站点可以到百度站长工具中根据站点进行获取。

(function(){
    var bp = document.createElement('script');
    bp.src = '//push.zhanzhang.baidu.com/push.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();

3、增加外链，到各大站点进行博文转发，增加原文链接。

如果觉着这个博文有所帮助，请帮助完成第三条，多谢。

0
顶

0
踩

分享到：

这个绝对做不出来 | node乱码解决方法

2016-05-16 20:23
浏览 1753
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论