单页应用SEO浅谈
<img src="https://p3-sign.toutiaoimg.com/1359/1839587275~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1730071696&x-signature=CW%2BkouVXLaPuJaoP8GcWcO2cKhU%3D" style="width: 50%; margin-bottom: 20px;"><h2 style="color: black; text-align: left; margin-bottom: 10px;">前言</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">单页应用（Single Page Application）</strong>越来越受web<span style="color: black;">研发</span>者欢迎，单页应用的体验<span style="color: black;">能够</span>模拟原生应用，一次<span style="color: black;">研发</span>，多端兼容。单页应用并不是一个全新发明的技术，而是随着互联网的发展，满足用户体验的一种综合技术。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">SEO</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">始终</span><span style="color: black;">败兴</span>，搜索引擎优化（SEO）是<span style="color: black;">研发</span>者容易忽略的部分。SEO是针对搜索（Google、百度、雅虎搜索等）在技术细节上的优化，例如<strong style="color: blue;">语义</strong>、搜索关键词与内容<span style="color: black;">关联</span>性<strong style="color: blue;">、</strong>收录量、<strong style="color: blue;">搜索排名</strong>等。SEO<span style="color: black;">亦</span>是同行、市场竞争常用的的营销手段。Google、百度的搜索结果是重要的用户入口，腾讯云（www.qcloud.com）有30%<span style="color: black;">上下</span>的流量来自搜索引擎。<span style="color: black;">因此呢</span>SEO在品牌、营销、用户量的纬度是非常重要的<span style="color: black;">基本</span>能力。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">那样</span>单页应用与传统直出页面在SEO方面有<span style="color: black;">那些</span><span style="color: black;">区别</span>之处呢？</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">单页应用的优点</h2>更好的用户体验，让用户在web感受natvie的速度和流畅；经典MVC<span style="color: black;">研发</span>模式，前后端各负其责。一套Server API，多端<span style="color: black;">运用</span>（web、移动APP等）重前端，业务<span style="color: black;">规律</span><span style="color: black;">所有</span>在本地操作，数据都需要<span style="color: black;">经过</span>AJAX同步、提交；<h2 style="color: black; text-align: left; margin-bottom: 10px;">对搜索引擎不友好</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">单页应用<span style="color: black;">实质</span>是把视图（View）渲染从Server交给浏览器，Server只<span style="color: black;">供给</span>JSON格式数据，视图和内容都是<span style="color: black;">经过</span>本地JavaScript来组织和渲染。而搜索搜索引擎抓取的内容，需要有完整的HTML和内容，单页应用架构的站点，并<span style="color: black;">不可</span>很好的支持搜索。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>站点在用户体验和搜索友好权衡时，<span style="color: black;">倘若</span><span style="color: black;">咱们</span>做到更好的体验，<span style="color: black;">亦</span>做到友好的搜索支持，既是一箭双雕。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">URL中的哈希（#号）</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">单页应用<span style="color: black;">仅有</span>一个页面，视图的变化<span style="color: black;">一般</span>是<span style="color: black;">经过</span>路由（route）来驱动，<span style="color: black;">首要</span>，<span style="color: black;">咱们</span>先来谈一谈单页应用的URL中的#号，<span style="color: black;">非常多</span>采用单元结构王皓咱的URL都<span style="color: black;">显现</span>了这个符号。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">#号在浏览器的URL中是一个锚点，在当前页改变#号的参数，页面会<span style="color: black;">转</span>到锚点所在的位置，<span style="color: black;">经过</span>JavaScript<span style="color: black;">咱们</span><span style="color: black;">能够</span>获取到#号后的参数：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">
<div style="color: black; text-align: left; margin-bottom: 10px;"> 1 2 location.hash // 获取URL hash location.hash = "#list" //改变URL hash</div>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">改变#号后的参数，页面并不会重载，于是大<span style="color: black;">都数</span>的单页架构网站，都在URL中采用#号来<span style="color: black;">做为</span>当前视图的URL<span style="color: black;">位置</span>，例如：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">
<div style="color: black; text-align: left; margin-bottom: 10px;"> 1 2 3 example.com/#index //首页视图 example.com/#list //列表页视图 example.com/#list/1 //id为1的列表信息的视图</div>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Backbone.js<span style="color: black;">便是</span><span style="color: black;">经过</span>改变#号参数来组织视图，<span style="color: black;">这儿</span>有一个demo<span style="color: black;">能够</span>很直观的体验URL的变化。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">看过这个demo，你获取会<span style="color: black;">发掘</span>很<span style="color: black;">熟练</span>的符号#!，Twitter曾在URL<span style="color: black;">运用</span>这个标识。这个标识是Google提出。（AJAX 抓取：网站站长和<span style="color: black;">研发</span>人员指南1：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">由于</span><span style="color: black;">繁杂</span>的单页架构页面，对Google<span style="color: black;">来讲</span>抓取比较困难，于是给<span style="color: black;">研发</span>者制定一个规范：</p>网站提交sitemap给Google；Google<span style="color: black;">发掘</span>URL里有#!符号，例如example.com/#!/detail/1，于是Google<span style="color: black;">起始</span>抓取example.com/?_escaped_fragment_=/detail/1；<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">_escaped_fragment_这个参数是Google指定的命名，<span style="color: black;">倘若</span><span style="color: black;">研发</span>者<span style="color: black;">期盼</span>把网站内容提交给Google，就必须<span style="color: black;">经过</span>这个参数生成静态页面。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">按照</span>上面的demo，我简单示例一下Google要抓取的页面的样子:</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">http://119.28.4.22/?escapedfragment_=/detail/1</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">如此<span style="color: black;">败兴</span>，就需要Server<span style="color: black;">经过</span>生成静态的内容以便Google抓取。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以下将简单介绍，单页架构，爬虫<span style="color: black;">拜访</span>根目录时<span style="color: black;">倘若</span>配置Server端的路由。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">判断爬虫</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当Google<span style="color: black;">拜访</span>119.28.4.22/#!/detail/1时，会自动转化成http://119.28.4.22/?_escaped_fragment_=/detail/1，以Nginx为例：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">
<div style="color: black; text-align: left; margin-bottom: 10px;">1 2 3 if ($args ~ _escaped_fragment_) { rewrite ^ /api; }</div>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">/api为后台服务的接口，已nodejs为例，代理设置如下：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">
<div style="color: black; text-align: left; margin-bottom: 10px;">1 2 3 4 5 6 7 8 9 10 11 12 13 upstream 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 $host; proxy_set_header Port $server_port; proxy_pass http://nodejs; proxy_redirect off; }</div>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">如此，<span style="color: black;">咱们</span>便将Google的<span style="color: black;">拜访</span>重写到/api这个接口，<span style="color: black;">而后</span>在Server的/api处理请求把静态内容输出<span style="color: black;">就可</span>。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">sitemap</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Gogole的这个规范，必须有sitemap支持，<span style="color: black;">由于</span>有可能单页架构的站点，索引页面<span style="color: black;">亦</span>是JavaScript渲染的。提交sitemap时，<span style="color: black;">不消</span>关注_escaped_fragment_这个参数名，只提交带哈希符号的URL<span style="color: black;">就可</span>，例如：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">
<div style="color: black; text-align: left; margin-bottom: 10px;">1 2 3 http://119.28.4.22/#!/detail/1 weekly 0.5</div>
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">结语</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">技术潮流的步伐<span style="color: black;">火速</span>，单页应用，URL哈希处理<span style="color: black;">亦</span>没渲染的方式<span style="color: black;">实质</span>上<span style="color: black;">已然</span>流行了很久，在国外<span style="color: black;">非常多</span>用户数据较好的<span style="color: black;">状况</span>下，<span style="color: black;">研发</span>者会<span style="color: black;">选取</span>HTML5 History API的pushstate特性<span style="color: black;">研发</span>，在URL中抛弃#!。<span style="color: black;">然则</span>IE6、7等低端浏览器用户<span style="color: black;">状况</span>较多的网站，#能够很好的兼容。关于采用HTML5 History API来架构单页应用的<span style="color: black;">方法</span>，<span style="color: black;">亦</span>欢迎讨论。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">文案</span><span style="color: black;">源自</span>：腾讯isux</p>
页:
[1]