以前的SEO优化项目都是多页面应用。如果您从该界面中的链接打开一个新页面，页面头部或正文中的友好信息将被百度爬虫自动捕获，一切都会顺利进行。
单页应用SEO不被百度收录
当界面转变为单页面应用程序时。标志性的锚点方法没有被百度和谷歌收录。虽然 不包括以 # 为特征的锚点，但它确实包括以 #! 为特征的锚点。正因为如此，谷歌做SEO优化就容易多了。但是你知道百度，那么作为前端开发者，我们应该做什么。
当我敲完单页应用程序的代码并高兴地看着快速响应和无等待的数据刷新时，我心里真的很喜欢单页应用程序。
如果这个应用只是作为一个管理平台，那么工作就已经完成了，KPI也已经达到了。如果网站类型是面向用户的信息展示或者个人博客来提升我们的存在感，看看site:**.com的收录结果，那么这还只是一个开始。
酒香不怕巷子深，毕竟只是传说。在这个互联网时代，如果你从事互联网行业，是无法在互联网搜索引擎上显示出来的。酒虽香，却难免无人问津。
从2014年开始，我做了两件事，一是开发，二是开发运维。博客上线的时候，我并没有什么感觉。出了几篇便秘之类的博文后，发现百度上没有任何踪迹。心里有些难过。 site: 之后只有一个到主页的链接。
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:看到这些链接已经被百度收录了。
接下来，将此区域替换为图片博客入口。
<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">querySelectora>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 友好信息。例如标题、h1等。
生成详情页界面示例：
<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-24time>
div>
header>
<div class="content-main">
博文详情
div>
div>
body>
html>
当然，您不想从搜索引擎导入到此镜像详细信息页面，因此添加 URL 重定向可以解决问题。
一般需要一周左右时间通过site:**.com查看结果。当然，对于较大的站点来说可能会更快。 SEO优化是一个测试过程。每次改代码都要花这么一段时间，显得太被动了。这里有一个快速检查效果的方法。使用百度站长工具->网页抓取->抓取诊断实时检查优化效果。虽然存在差异，但与结果总体一致。
看似到这里就结束了，但优化却从未停止。这里再介绍一下博客首页需要注意的几点。
在主页正文之后添加一个隐藏的H1标签，用于填写博客的介绍和标志。
<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);
})();
增加外部链接
去各大网站转发博文并添加原文链接。
最后推荐一个表格组件：
扫一扫在手机端查看
-
Tags : 前端优化性能面试题_单页应用SEO不被百度收录
- 上一篇：怎么优化网站seo_网站速度优化实战教程
- 下一篇：_seo建站需要注意哪些
我们凭借多年的网站建设经验，坚持以“帮助中小企业实现网络营销化”为宗旨，累计为4000多家客户提供品质建站服务，得到了客户的一致好评。如果您有网站建设、网站改版、域名注册、主机空间、手机网站建设、网站备案等方面的需求，请立即点击咨询我们或拨打咨询热线： 13761152229，我们会详细为你一一解答你心中的疑难。
客服1 