单页应用SEO浅谈.pdf

单页应用 SEO 浅谈 前言 单页应用（ Single Page Application ）越来越受 web 开发者欢迎，单页应用的体验可以模拟原生应用 ，一次开发，多端兼容。单页应用并不是一个全新发明的技术，而是随着互联网的发展，满足用户 体验的一种综合技术。 SEO 一直以来，搜索引擎优化（ SEO ）是开发者容易忽略的部分。 SEO 是针对搜索（ Google 、百度、 雅虎搜索等）在技术细节上的优化，例如 语义 、搜索关键词与内容 相关性、收录量 、搜索排名 等。 SEO 也是同行、市场竞争常用的的营销手段。 Google 、百度的搜索结果是重要的用户入口，腾讯 云（ ）有 30% 左右的流量来自搜索引擎。因此 SEO 在品牌、营销、用户量的纬度 是非常重要的基础能力。 那么单页应用与传统直出页面在 SEO 方面有哪些不同之处呢？ 单页应用的优点 1. 更好的用户体验，让用户在 web 感受 natvie 的速度和流畅； 2. 经典 MVC 开发模式，前后端各负其责。 3. 一套 Server API ，多端使用（ web 、移动 APP 等） 4. 重前端，业务逻辑全部在本地操作，数据都需要通过 AJAX 同步、提交； 对搜索引擎不友好 单页应用实际是把视图（ View ）渲染从 Server 交给浏览器， Server 只提供 JSON 格式数据，视图和 内容都是通过本地 JavaScript 来组织和渲染。而搜索搜索引擎抓取的内容，需要有完整的 HT ML 和 内容，单页应用架构的站点，并不能很好的支持搜索。 如果站点在用户体验和搜索友好权衡时，如果我们做到更好的体验，也做到友好的搜索支持，既是 一箭双雕。 URL 中的哈希（ # 号） 单页应用只有一个页面，视图的变化通常是通过路由（ route ）来驱动，首先，我们先来谈一谈单页 应用的 URL 中的# 号，很多采用单元结构王皓咱的 URL 都出现了这个符号。 # 号在浏览器的 URL 中是一个锚点，在当前页改变 # 号的参数，页面会跳转到锚点所在的位置，通 过JavaScript 我们可以获取到 # 号后的参数： 1 location. hash // 获取 URL hash 2 location. hash = #list // 改变 URL hash 改变 # 号后的参数，页面并不会重载，于是大多数的单页架构网站，都在 URL 中采用 # 号来作为当 前视图的 URL 地址，例如： 1 example. com/ #index // 首页视图 2 example. com/ #list // 列表页视图 3 example. com/ #list / 1 //id 为 1的列表信息的视图 Backbone.js 就是通过改变 # 号参数来组织视图，这里有一个 demo 可以很直观的体验 URL 的变化。 看过这个 demo ，你获取会发现很熟悉的符号 #! ，Twitter 曾在 URL 使用这个标识。这个标识 是Google 提出。（ AJAX 抓取：网站站长和开发人员指南 1： 因为复杂的单页架构页面，对 Google 来说抓取比较困难，于是给开发者制定一个规范： 1. 网站提交 sitemap 给 Google ； 2. Google 发现 URL 里有 #! 符号，例如 /#!/detail/1 ，于是 Google 开始抓 取 /?_escaped_fragment_=/detail/1 ； _escaped_fragment_ 这个参数是 Google 指定的命名，如果开发者希望把网站内容提交给 Google ， 就必须通过这个参数生成静态页面。