原文链接:http://www.lovejavascript.com/#!zone/blog/content.html?id=17
? ? ? ? 之前做SEO优化的项目都是多页应用,从这个界面的某个链接打开一个新的页面,该页面的head或body中的友好信息即会自动被百度爬虫捕获,一切都是那么的顺。当界面转变为单页应用后。标志性的锚点做法并不被百度和谷歌收录,谷歌虽然不收录以#为特性的锚点,但是收录以#!为特性的锚点,因为这个缘固谷歌做SEO优化就简易了很多。然而百度你懂得,那么做为一个前端开发人员,我们该做些什么。
? ? ? ? 当把一个单页应用的代码敲完,开心的看着快速的响应和无等待的数据刷新时,内心上对单页应用是很喜爱的。如果这个应用只是做为一个管理平台来说,那么工作已经完成,KPI已达成。那如果网站类型是面向用户的信息展示或者是我等用于刷存在感的个人博客,看着site:**.com的收录结果,那么这将只是开始。毕竟酒香不怕巷子深只是一个传说,在这个互联网时代,做着互联网的行业,却不能在互联网的搜索引擎上展现,酒或许香溢,却也难免无人问津。
? ? ? ? ?我从14年开始,做了两件事,一件事是开发基于jquery的表格插件,另一个是开发运维自已的个人博客。当博客上线后,并没有感觉什么,便秘似的产出几个博文后,发现在百度上无影无踪,多少有些伤感,site:lovejavascript.com后仅有一个首页的链接。
?
接下来,以个人博客的开发经验来对单页应用的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>
<div class="seo-area">
? ? <h1 title="拭目以待的博客">拭目以待的博客</h1>
? ? <h2 title="博文列表">
? ? ? ? <a href="/seo/index.html" title="博文列表">博文列表</a>
? ? </h2>
</div>
<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>
<!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>
<h1 class="seo-h1">
<img src="http://lovejavascript.com/images/logo121-75.png" alt="loveJavaScript">
欢迎来到拭目以待的空间。前端技术日新月异,有人曾说过:"技术不进则死";你是否感受到了来自这方面的压力? 前端交流群:452781895
</h1>
(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);
})();
原文:http://baukh.iteye.com/blog/2298583