线上服务咨询
单页主题SEO怎么样？
发表时间：2019-07-30 15:44:22
文章来源：沈阳软件开发
标签：网站建设 小程序开发 小程序制作 微信小程序开发 公众号开发 微信公众号开发 网页设计 网站优化 网站排名 网站设计 微信小程序设计 小程序定制 微信小程序定制
浏览次数：0
前言单页应用（Single Page Application）越来越受Web开发人员的欢迎，单页面应用程序的体验可以模拟本机应用程序，一个开发和多端兼容性。单页应用程序不是一项完全发明的技术，而是随着互联网的发展而满足用户体验的综合技术。
SEO搜索引擎优化（SEO）一直是开发人员忽略的一部分。 SEO针对技术细节进行了优化，如搜索（谷歌，百度，雅虎搜索等），如语义，搜索关键字和内容相关性、，以及搜索排名。 SEO也是同行和市场竞争的常见营销工具。谷歌，百度的搜索结果是重要的用户门户网站，而腾讯云（www.qcloud.com）约有30％的流量来自搜索引擎。因此，SEO是品牌，营销和用户量的纬度中非常重要的基本能力。
那么单页应用程序和传统的直接页面在SEO方面有什么区别？
单页面应用程序的优点是更好的用户体验，让用户感受到网络上natvie的速度和流畅度;经典的MVC开发模式，每一侧的前后责任。一套服务器API，多端使用（网络，移动APP等）繁重的前端，业务逻辑全部在本地运行，数据需要通过AJAX进行同步和提交;对搜索引擎不友好单页面应用程序实际上将视图呈现从服务器传输到浏览器。服务器仅提供JSON格式数据，视图和内容由本地JavaScript组织和呈现。搜索搜索引擎抓取的内容需要完整的HTML和内容，单页面应用程序架构网站，并且不支持搜索。
如果网站的用户体验和搜索友好，如果我们有更好的体验和友好的搜索支持，这是一把双刃剑。
URL中的哈希值（##）单页面应用程序只有一页。视图的变化通常由路线驱动。首先，我们来谈谈单页应用程序的URL中的＃。许多使用单位结构网站的URL出现。
##是浏览器URL中的锚点。当前页面更改##参数时，页面将跳转到锚点的位置。通过JavaScript，我们可以在##：
之后获取参数 12location.hash //获取URL hashlocation.hash='＃list'//更改URL哈希在##之后更改参数后，页面不会重载，因此大多数单页架构网站使用URL中的##作为当前视图的URL地址，例如：
123example.com/#index //主页视图example.com/#list //列表页面视图example.com/#list/1 //ID为1的列表信息视图Backbone.js通过更改＃参数来组织视图。有一个演示可用于直观地体验URL更改。
阅读本演示后，您可能会发现熟悉的符号＃!这是Twitter在URL上使用的。此徽标由Google提出（AJAX抓取：网站网站管理员和开发者指南1）：
由于复杂的单页架构页面很难被Google抓取，因此为开发人员开发了一个规范：
网站向Google提交站点地图;谷歌找到＃！ URL中的符号，例如example.com/#!/detail/1，因此Google开始抓取example.com /？_ escaped_fragment _=/detail/1;_escaped_fragment_此参数是Google指定的命名。如果开发人员想要向Google提交网站内容，则必须使用此参数生成静态页面。
根据上面的演示，我只想举例说明Google如何抓取页面:
http://119.28.4.22/?escapedfragment _=/detail/1
因此，Server需要为Google抓取生成静态内容。
以下是单页架构的简要介绍。如果爬网程序访问根目录，则配置服务器端路由。
判断爬行动物当Google访问119.28.4.22/#!/detail/1时，它将自动转换为http://119.28.4.22/?_escaped_fragment_=/detail/1，以Nginx为例：
123if（$ args~_escaped_fragment_）{rewrite ^/api;}/api是后台服务的接口。 Nodejs用作示例。代理设置如下：
12345678910111213upstream nodejs {server 127.0.0.1: 3000;} location/api {proxy_set_header X-Request-URI $ request_uri; proxy_set_header X-Real-IP $ remote_addr; proxy_set_header X-Forwarded-For $ proxy_add_x_forwarded_for; proxy_set_header主机$ host; proxy_set_header Port $ Server_port; proxy_passhttp://nodejs; proxy_redirect off;}这样，我们将重写Google对/api接口的访问权限，然后在服务器的/api处理请求中输出静态内容。
网站地图Gogole的规范必须具有站点地图支持，因为它可以用于单页架构站点，索引页面也是JavaScript呈现的。提交站点地图时，您无需关注参数名称_escaped_fragment_，只需提交带有哈希符号的URL，例如：
！1234 //119.28.4.22 /＃/细节/1 GT;＆GT;结论技术趋势的步伐很快，单页应用程序，URL散列和渲染方法实际上已经流行了很长时间。对于许多具有良好数据的外国用户，开发人员将选择HTML5 History API的pushstate功能。丢弃＃！在URL中。但是，网站，＃在IE6和7等低端浏览器中更受欢迎，可以非常兼容。关于使用HTML5 History API构建单页应用程序，也欢迎讨论。
参考文献1:https://support.google.com/webmasters/answer/174992?hl=zh-Hans
标签:＆amp; nbsp＆amp; nbspSEO，网络营销，SEM网站建设,小程序开发,小程序制作,微信小程序开发,公众号开发,微信公众号开发,网页设计,网站优化,网站排名,网站设计,微信小程序设计,小程序定制,微信小程序定制
